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:
  • Prettier formatting
  • ESLint linting
  • Live-reloading local dev server
• 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.

   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

   • Timers in JavaScript.
   • Coordinating event handlers.
   • Managing ongoing state.

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

   • JS Canvas API
   • Drag/swipe event handlers

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

   • Managing complex fetch requests/multiple promises
   • Efficiently processing large amounts of data

4. Snake game

   Recreate the classic mobile game Snake.

   

   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

   • Keyboard event handlers
   • Managing complex game state
   • Collision detection