todos-react-FE

to be used with todos-express-BE https://github.com/mihaidld/todos-express-BE for back-end side

Features

• front-end for TODO List app setup with Create React App and using React Hooks API (useState, useEffect, useContext)
• simple user registration and authentication using API Keys
• HTTP requests using Fetch API and request header 'Authorization': <API Key>
• modular components styled with Bootstrap 5
• responsive, accessible and with a dark mode preference saved in localStorage

Project structure

src
├── App.js
├── App.test.js
├── components
│   ├── AddTodoForm.js
│   ├── LoginForm.js
│   ├── ModeSwitch.js
│   ├── RegisterForm.js
│   ├── SelectTodos.js
│   ├── Todo.js
│   ├── Todos.js
│   └── TodosList.js
├── context
│   └── ModeContext.js
├── index.js
├── serviceWorker.js
└── setupTests.js

Install

Update local IP and PORT of the server in ModeContext.js.

Install dependencies and start development server via terminal command line

yarn
yarn start

Usage

Enter an API KEY to login or register with a name