todos

This project is a test assignment for a Junior Frontend developer.
It is deployed at GitHub Pages and available at dvalentina.github.io/todos/

The application allows you to manage a list of todos. You can:

• add new todos
• check (or uncheck) the completed ones
• filter through list of all, uncompleted (active), and completed todos
• quickly clear the completed todos
• and also view the number of tasks that you still need to do.

To learn what technologies were used to make this application and for additional comments read the end of this readme.

If you want to run this application locally

Clone this repository to your computer.

If you are not familiar with cloning GitHub repositories, check GitHub Docs.

In the Terminal, go to the cloned project directory.

Run following command to install all necessary dependencies:

If you don't have npm installed on your computer, follow npm Docs tutorial to install it.

npm i && npm run start

After that, your browser should automatically open a new tab and display the application. If it didn't happen, type

http://localhost:3000/

in the address bar of your browser.

You are now ready to explore the todos application!

Tests

To start tests and get a coverage report, run following command:

npm run test:coverage

Task

All requirements of the test task are met, namely:

• The interface has an input for entering a new todo

• There are separate lists for all todos, uncompleted (active) todos, and completed todos

• The application is created with TypeScript, React and React Hooks

• Key functionality is covered with tests

• The project starts with running npm i && npm run start command

• The project is deployed and available at GitHub Pages - dvalentina.github.io/todos/

• The appearance of the application matches the given example:

Tools & Technologies

In this project, I used React library for building a user interface and Create-React-App to start building an SPA.

The application's components were stylized with styled-components.

Tests were written using React Testing Library.

The application runs on Node.js environment, and npm manages its packages.

For strong typing of JavaScript, I used TypeScript.

To maintain the quality and the uniformity of the code, I relied on the help of eslint.

For debugging purposes, I used Chrome DevTools and React Developer Tools.

For version control, I used Git & GitHub.

The project was deployed using GitHub Pages.

✎ Some comments about development process

✎ Since the example of the application's appearance was given in the image format, I have used pixel perfect browser extension to ensure maximum match between the example and the result.

✎ I decided to not spend much time on finding the perfectly matching fonts, though, since it was not stated as necessary, and would consume a lot of time.

✎ Considering testing, integration tests were my main focus, since they check that components work properly together, and in a small app like this it provides enough confidence to not focus on testing different components in isolation. Strong typing with TypeScript and usage of ESLint provide an additional layer of confidence.

✎ There are different approaches to identifying elements on the webpage in testing, and in this application I decided to stick with using data-testid attribute, since it provides more reliable selectors, which helps to focus on testing the actual functionality of the app instead of components' implementation details