Simple Todo List App with React, Redux.
This is a basic to-do list application built with React for the UI, Redux for state management, nanoid for unique IDs, and FontAwesome for icons.
- Add new tasks to your todo list.
- Mark tasks as completed.
- Remove tasks from the list.
- Responsive design for various screen sizes.
- Uses Nanoid for generating unique task IDs.
- Utilizes Font Awesome for stylish icons.
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js: Make sure you have Node.js installed. You can download it from nodejs.org.
1. Clone this repository:
$ git clone git clone https://github.com/Mustapha-Nkhili/react-todo-list.git
2. Navigate to the project directory:
$ cd react-todo-list
3. install the dependencies:
$ npm install
4. Start the development server:
$ npm run dev
5. Open your web browser and go to http://localhost:5173/ to see the app in action.
-
Add a new task:
- Type the task in the input field.
- Press Enter or click the Add icon button.
-
Mark a task as completed:
- Click the checkbox next to the task.
-
Remove a task:
- Click the delete (trash) icon next to the task.
react-todo-list-app/
├── src/
| ├── assets/
│ ├── components/
│ │ ├── AddTodo.jsx
│ │ ├── TodoItem.jsx
| | ├── TodoList.jsx
| ├──features/
| | ├── todos/
| | | ├── todosSlice.js
| ├── actions.js
| ├── App.css
│ ├── App.jsx
| ├── index.css
│ ├── main.jsx
├── index.html
├── package.json
├── README.md
├── vite.config.js
├── yarn.lock
- src/components/: Contains React components used in the project.
- src/App.jsx: The main application component.
- src/index.jsx: Entry point of the application.
- index.html: Static assets and HTML template.
- React
- Redux
- Nanoid
- Font Awesome
Feel free to fork this repository and contribute with your ideas and improvements. Make sure to pull requests follow the contributing guidelines.