Todo app

The challenge

Your challenge is to build out this todo app and get it looking as close to the design as possible.

Download the designs files

You can use any tools you like to help you complete the challenge.
You must choose one of these technologys as your main one:

• Next.js
• Gatsby + GraphQL
• React + GraphQL
• Redux + Redux-Thunk or Redux-Saga

Your users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode

Where to find everything

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Building your project

1. Create a repo in the organization with the name ow-todo-app-{your-name}
2. Create a README file that contains the details of your project, what technologies you used, how to install your project and set it u etc…

Deploying your project

As mentioned above, there are many ways to host your project for free. Our recommend hosts are:

You can host your site using one of these solutions depending on what you choose as technology.

• Heroku
• Netlify

Have fun building! 🚀