Skip to content

Hey-Lets-code/todo-list-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TO-DO List Application

Overview

This project is a To-Do List Application built with React, Material-UI and Typescript. It allows users to manage their tasks, including creating, editing, and deleting tasks. All tasks are stored in the browser's LocalStorage for persistence.

Deployed Application

You can view the live version of the application here.

Register

Register

Login

Login

Create to-do item

Adicionar

Edit to-do item

Edição

Delete to-do item

Deletar

Search Field

campo-de-pesquisa

Features

The application includes the following features:

  1. Login

    • A screen with fields for email and password.
    • Only the interface is implemented; authentication logic is not implemented yet.
  2. User Registration

    • A screen with fields for name, email, and password.
    • Only the interface is implemented; registration logic is not implemented yet.
  3. Task List

    • A screen that lists all created tasks.
    • Each task displays the title, color, and description.
  4. Task Management

    • A form to create new tasks.
    • A form to edit existing tasks.
    • Functionality to delete tasks.
    • Each task includes the following fields: title, color (using a color picker), and description.
    • Tasks are saved to and loaded from LocalStorage.

Technical Details

  • Framework: React
  • UI Components: Material-UI
  • Data Storage: Browser's LocalStorage
  • Language: TypeScript
  • Testing: Jest

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/todo-list-app.git
    cd todo-list-app
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm start

For a project with React, Material-UI, React Router, TypeScript, and Jest, you will need the following dependencies:

Main Dependencies

  1. React and React DOM:

    npm install react react-dom
  2. Material-UI (including icons):

    npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
  3. React Router:

    npm install react-router-dom
  4. TypeScript (if it's not already installed):

    npm install typescript
  5. Type Definitions for TypeScript:

    npm install --save-dev @types/react @types/react-dom @types/react-router-dom
  6. Jest and React Testing Library for tests:

    npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

Commands to Install All Dependencies

You can install all the dependencies at once with the following commands:

npm install react react-dom @mui/material @emotion/react @emotion/styled @mui/icons-material react-router-dom typescript
npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest @types/react @types/react-dom @types/react-router-dom

Usage

  1. Open your browser and navigate to http://localhost:3000.
  2. Use the login and registration interfaces to create a new user (only the interface is functional).
  3. Create, edit, and delete tasks using the provided forms and task list interface.

Development Status

The testing phase is currently under development.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.

About

To-Do List Application built with React, Material-UI and Typescript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published