#react.js
#master-in-software-engineering
In this project you will learn how to create a React.js todo list.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
See deployment for notes on how to deploy the project on a live system.
First, you will need to clone
or fork
the repository into your Github
account:
$ git clone https://github.com/assembler-school/reactjs-todo-list.git
The repository is made up of several branches that include the contents of each section.
The branches follow a naming strategy like the following:
main
: includes the main contents and the instructionsassembler-solution
: includes the solution
In order to fetch all the remote branches in the repository, you can use the following command:
$ git fetch --all
$ git branch --all
Then, you can create a local branch based on a remote branch with the following command:
$ git checkout -b <new_branch_name> <remote_branch_name>
First, you will need to install the dependencies with: npm install
.
Run the following command in your terminal after cloning the main repo:
$ npm install
The tests that validate your solution can be executed by runing the following commands:
$ npm run start
$ npm run cy:open
$ npm run cy:run
Both need the Create React App development server to be running.
In the assembler-solution
branch you can see an implementation of these tools
if you'd like to use them.
In this pill we won't deploy the app.
React.js
@testing-library/react
eslint
prettier
lint-staged
husky
In this project you will build a todo app similar to the following screenshot.
This is an overview of the main requirements of this project.
- You must follow all the instructions of the project step-by-step
- You should always try to solve them by yourself before asking for help
- You should always help your team members and fellow students of the master so that you can all learn together and become better software developers and team members
- You must finish all the steps that are marked as
Required
- You must use semantic HTML5 elements for all the markup of the application
- Once you are done, you can move on to the optional ones that are marked as
Extra ๐ฏ
For this step you have to think of a layout for the app.
- You must use
SCSS
for all the styles of the app and the classnames npm package to handle any conditionally set classes - The overall layout must be a pixel perfect copy of the design we provide
- The layout must be responsive so that it works in all device sizes
In this step you must implement the logic to render all the todos of the app. This means that all the todos are rendered without taking into account if they are completed or not.
- The todos must be created in the
App
component and passed as props to the page components - All the methods that modify the
<App />
state must also be passed as props - If there are no todos created you must render a message telling the user that they can create their first todo to get started
- You can also render an illustration that indicates users that they can create
a todo to get started
- Feel free to create your own or use one from the internet, this is a great resource: undraw.co
- For this step, you will need to add a
data-testid="no-todos"
property on the html component that is rendered as the illustration or the illustration wrapper.
Users must be able to create a new todo using the form in the app header
- To test the todo creation requirement you will need to add a
data-testid="create-todo-input"
property on the input element - If the user presses enter without entering a value in the todo form, an
error message should be rendered. The message needs to have a
data-testid="create-todo-error-message"
property with the following error message:"Please enter at least one character"
- Users must be able to press the
enter
key on their keyboard to create the todo (if you implement it using semantic html5 this comes for free)
Once the todo is created it must be rendered in the list bellow the form.
- By default the list should be empty.
- The list must be implemented using
ul
andli
elements. - To test the todo creation requirement you will need to:
- add a
data-testid="todos-list"
property on theul
list element. - add a
data-testid="todo-item"
property on theli
list element. - the
li
list element should have a text content of the todo that was created and thecheckbox
value set tochecked
or not depending on if the todo was marked as completed.
- add a
Render the total number of todos in the app footer.
The footer should have a property of: data-testid="app-footer"
and be
implemented using an html5 footer
element.
- To test this requirement you will need to render the total number of todos that the app has, that is both completed and incomplete todos.
- The text rendered should be:
0 todos left
: if there are no todos1 todos left
: if there is only 1 todo12 todos left
: if there are 12 todos in the app- etc
Users must be able to edit the todos once they are created.
- Clicking the todo name should open a form that allows users to edit the todo
name.
- This can be implemented either in line or by filling out the new todo form with the details of the todo that was clicked
- The todo item should have a property of
data-testid="todo-item-input"
- We recommend that you implement a solution that allows users to edit the todo in line. This means that clicking the todo name replaces the todo with a form that has a value of the todo's name
- Then, by clicking on the done button or by pressing enter, the todo is edited and saved
- Users should be able to delete todos by clicking the
X
button that is rendered when users hover over the todo name- the
X
button should have a property ofdata-testid="todo-item-delete-button"
- the
- Users must be able to mark a todo as completed when they press the
Done
button that is rendered when the user hovers over the todo name- the
X
button should have a property ofdata-testid="todo-item-checkbox"
- the
In this step you will create a page for each todo type.
In order to allow users to navigate to a page you will need to complete the footer of the app that you can see in the screenshot above.
You will have to render the following in the footer:
- The total count of all the
active
todos - A link to the home page that renders
all
the todos, both active and completed - A link to the active todos page that renders the
active
todos - A link to the completed todos page that renders the
completed
todos
- Route:
/
- Page Component:
Home
In this page you will render all the todos, both completed or not.
- Route:
/completed
- Page Component:
Completed
In this page you will render all the completed todos.
You will need to think of a way to store or filter the todos that are completed.
A possible solution is to use [].filter
or to store the todos in a different
this.state
property.
Feel free to think of a solution for this requirement.
- Route:
/active
- Page Component:
Active
In this page you will render all the active todos, that is, all the todos that are not completed.
You will need to think of a way to store or filter the todos that are active.
A possible solution is to use [].filter
or to store the todos in a different
this.state
property.
Feel free to think of a solution for this requirement.
All the todos are stored in localStorage
so that users can refresh the app and
their previous todos are not lost.
You must store the todos in a single local storage entry named:
"reactjs-todo-list"
.
The todos should be stored using the following shape (you can add other properties but these are required):
id
: the id of the todotext
: the text content of the tododone
: boolean that indicates wether the todo is completed or notisEditing
: boolean that indicates wether the todo is currently being edited
[
{
id: "9c34e805-7bfc-401a-b386-468c25315e46",
text: "todo 01",
done: false,
isEditing: false,
},
{
id: "d733a37e-cc4e-4cde-916f-935b3e915bb3",
text: "todo 02",
done: false,
isEditing: false,
},
];
Users must be able to clear all the todos that are completed. You can implement a button in the app footer that allows users to clear the completed todos.
The clear completed todos button should have a property of
data-testid="clear-completed-todos"
.
You can implement a light & dark mode switch that can be toggled using the moon icon in the app header.
The light & dark mode switch button should have a property of
data-testid="toggle-theme"
.
To deliver this project you must follow the steps indicated in the document:
This project is licensed under the MIT License - see the LICENSE file for details
Thanks goes to these wonderful people (emoji key):
Dani Lucaci ๐ป ๐ ๐ก ๐ง |
This project follows the all-contributors specification. Contributions of any kind welcome!