Projects Project

You’ll be working on a solo project in your free time for the last 3 weeks. We expect you to focus primarily on employment—answering questions and completing take-home challenges. Any additional time you have left can be spent on your project.

These projects are designed to help you revise the fundamentals you have learnt during the first 9 weeks of the course. We recommend you pick one that involves something you are uncomfortable with. For example if you struggled using fetch and promises then pick a project that will force you to practice that.

Technical requirements

  • Configure dev tooling:
  • Publish code to GitHub
  • Deploy app to GitHub Pages

Project options

  1. Pomodoro timer

    A “Pomodoro timer” is a productivity tool that helps you time alternating periods of working and resting.

    An example of a Pomodoro timer

    Features

    • A “work” timer that counts down to zero (usually 25 minutes).
    • A second “break” timer that counts down to zero (usually 5 minutes).
    • Buttons to start a session, pause the timer, or cancel the session and restart.

    Stretch goals

    • Customisable lengths of time for work/break.
    • Save custom lengths to localStorage.
    • Play an alarm sound to make it obvious the time is up.

    Learning outcomes

  2. Canvas painting

    A painting app using the HTML5 Canvas API to render “brush” strokes. You can see a simple example in this video.

    Features

    • Draw coloured lines on a canvas when the user clicks and drags (or swipes if you want to support mobile).

    Stretch goals

    • Customise drawing settings: line width, line colour, line shape.
    • Download drawings as images.

    Learning outcomes

  3. GitHub profile analyser

    Search for a GitHub username to see information about their profile. Figure out what interesting data you can pull out of a profile using the GitHub API docs.

    Features

    • Show their starred projects.
    • Show their recent activity.
    • Figure out what their most popular repositories are.

    Stretch goals

    • Who have they collaborated with the most?
    • Visualise the data with a library like D3.js or Chart.js

    Learning outcomes

  4. Snake game

    Recreate the classic mobile game Snake.

    An example of a Snake game

    Features

    • Control a snake using the keyboard.
    • Game ends if snake touches itself.
    • Touching “food” makes snake grow longer/score go up.

    Stretch goals

    • Save scores in localStorage to show best attempts.
    • Speed game up as score gets higher.

    Learning outcomes