IGNITE TO-DO LIST (REACT.JS)

Efficient Task Management!

Developed with the software and tools below.

Table of Contents

• 📍 Overview
• 🌐 Live Demo
• 📦 Features
• 📂 Repository Structure
• 🧩 Modules
• 🚀 Getting Started
  • ⚙️ Install
  • ► Using Ignite To-Do List
• 🛠 Project Roadmap

---

📍 Overview

The Ignite To-Do List project is a simple and efficient to-do list application built with React.js. It allows users to manage their tasks by adding, completing, and deleting them. This project was created as part of the Ignite course by Rocketseat, focusing on improving React.js skills.

---

🌐 Live Demo

The Ignite To-Do List project is online and available. You can view and interact with the application at the following URL:

https://castrosuellenx.github.io/ignite-to-do-list-reactjs/

Feel free to explore the features and functionality of the to-do list application.

---

📦 Features

	Feature	Description
⚙️	Architecture	This project is built using React.js and TypeScript, following a structured architecture that includes components and hooks to handle task interactions. It leverages Vite for fast development and Chakra UI for styling, ensuring a seamless user experience.
🔩	Code Quality	The codebase maintains a good level of quality with well-organized components, clear naming conventions, and consistent code style. TypeScript is used for type safety and improved code readability, enhancing overall maintainability.
📄	Documentation	The project includes detailed README files and comments within the codebase, aiding developers in understanding the architecture and implementation details.
🔌	Integrations	Key integrations include i18next for internationalization and various React libraries for UI components and state management.
🧩	Modularity	The codebase exhibits modularity through separate components and hooks, promoting code reusability. Data context management and global constants contribute to a cohesive architecture that can easily accommodate future enhancements or feature additions.
📦	Dependencies	Key dependencies include React, TypeScript, Vite, Chakra UI, i18next, and uuid. Configuration files like package.json and tsconfig.json manage dependencies and project settings effectively.

---

📂 Repository Structure

ignite-to-do-list-reactjs/
├── public/
│   └── locales/
│       ├── en/
│       │   └── translation.json
│       ├── pt/
│       │   ├── translation.json
│       │   ├── brazil-flag.png
│       │   ├── clipboard.png
│       │   ├── short-logo.svg
│       │   └── usa-flag.png
├── src/
│   ├── components/
│   │   └── List/
│   │       ├── EmptyList.module.css
│   │       ├── EmptyList.tsx
│   │       ├── ListHeader.module.css
│   │       ├── ListHeader.tsx
│   │       ├── Task.module.css
│   │       ├── Task.tsx
│   ├── Header.module.css
│   ├── Header.tsx
│   ├── Input.module.css
│   ├── Input.tsx
│   ├── LanguageSwitch.module.css
│   ├── LanguageSwitch.tsx
│   ├── RocketIcon.tsx
│   ├── hooks/
│   │   └── useTaskList.ts
│   ├── App.module.css
│   ├── App.tsx
│   ├── global.css
│   ├── i18n.ts
│   ├── main.tsx
│   ├── vite-env.d.ts
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── tsconfig.json

---

🧩 Modules

.

File	Summary
index.html	The main HTML file that serves as the entry point for the React application.
package.json	Manages dependencies and project configurations for the application.
tsconfig.json	Configures TypeScript settings for the project, ensuring robust type checking and better reliability.
vite.config.ts	Configuration file for Vite, a build tool that provides a fast development environment for React.

src

File	Summary
App.tsx	The main component that sets up the application's structure and routes.
i18n.ts	Configuration file for i18next, used for internationalization in the application.
global.css	Global CSS styles applied across the entire application.
App.module.css	CSS module for styling the App component.
main.tsx	The entry point file that renders the App component into the DOM.

components

File	Summary
Header.tsx	Component for the main header of the application, typically containing the application title and navigation links.
ListHeader.tsx	Component for the header of the to-do list, containing control information about the added tasks.
EmptyList.tsx	Component that displays a message when the to-do list is empty, enhancing user experience with visual feedback.
Task.tsx	Component representing an individual task item in the to-do list, with functionalities for marking as completed or deleting.
LanguageSwitch.tsx	Component allowing users to switch between different languages, enhancing accessibility and user preference settings.

hooks

File	Summary
useTaskList.ts	Custom hook for managing the state and logic of the task list, including adding, updating, and removing tasks.

---

🚀 Getting Started

Requirements Ensure you have the following dependencies installed on your system:

• Node.js: version >=14.0.0
• npm: version >=6.0.0

⚙️ Install

1. Clone the Ignite To-Do List repository:

git clone https://github.com/castrosuellenx/ignite-to-do-list-reactjs

2. Change to the project directory:

cd ignite-to-do-list-reactjs

3. Install the dependencies:

npm install

► Using Ignite To-Do List React.js

Use the following command to run Ignite To-Do List Reat.js:

npm run dev

The application will be available at http://localhost:5173.

---

🛠 Project Roadmap

• Implement task addition feature
• Implement task completion feature
• Implement task deletion feature
• Enhance accessibility features
• Implement language switch between English and Brazilian Portuguese

---