Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dulanjalisenarathna/reactjs-todo-app
React js todo application
https://github.com/dulanjalisenarathna/reactjs-todo-app
formik-yup framer-motion material-ui react-context-api react-hot-toast react-todo-app reactjs todoapp todolist
Last synced: about 1 month ago
JSON representation
React js todo application
- Host: GitHub
- URL: https://github.com/dulanjalisenarathna/reactjs-todo-app
- Owner: DulanjaliSenarathna
- Created: 2024-09-13T03:19:55.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-20T06:10:27.000Z (2 months ago)
- Last Synced: 2024-10-12T23:04:24.537Z (about 1 month ago)
- Topics: formik-yup, framer-motion, material-ui, react-context-api, react-hot-toast, react-todo-app, reactjs, todoapp, todolist
- Language: JavaScript
- Homepage: https://reactjs-todo-app-two.vercel.app
- Size: 772 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Js To Do Web Application
This is a React-based Todo application that includes user authentication functionality using the React Context API and localStorage. The app allows users to register, log in, and manage todo items effectively.
**live demo: (https://reactjs-todo-app-two.vercel.app)**
## Features
- **User Authentication**:
- **Register**: Create a new user account with name, email, and password.
- **Login**: Access your account using email and password.
- **Include basic validation**
- **Provide feedback to users on successful login or registration**
- **Todo List Management**:
- **Add Todo**: Create new todo items with a title and description.
- **Edit Todo**: Modify existing todo items.
- **Delete Todo**: Remove todo items from the list.
- **Toggle Completion**: Mark todos as completed or incomplete.
- **Display Date and Time**: See when each todo was added.
- **Display toast messages for adding and deleting todo item**
- **Responsive Design**: Optimized for both desktop and mobile views.
- **Added smooth animations**
## Technologies Used
- **React.js**: Front-end library for building user interfaces.
- **React Router**: For client-side routing.
- **React Context API**: For managing authentication state.
- **localStorage**: For storing user credentials and todo items.
- **CSS**: For styling (SCSS compiled to CSS).
- **react-hot-toast**: For display toast messages
- **React icons**: Library for icons
- **Formik-Yup**: Form validation
## Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
### Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/DulanjaliSenarathna/reactjs-todo-app.git
cd todo-app
```
2. **Install Dependencies**:
```bash
npm install
```
or
```bash
yarn install
```
3. **Start the Development Server**:
```bash
npm start
```
or
```bash
yarn start
```
This will start the app on `http://localhost:3000`.
## Usage
1. **Register a New User**:
- Go to the registration page.
- Fill in your name, email, and password.
- Submit the form to create a new account.
2. **Log In**:
- Go to the login page.
- Enter your email and password.
- Submit the form to log in.
3. **Manage Todos**:
- After logging in, you will be redirected to the todo list page.
- Use the form to add new todos.
- Click on the edit icon to update a todo item.
- Click on the delete icon to remove a todo item.
- Toggle the checkbox to mark todos as completed or incomplete.
4. **Log Out**:
- Click on the logout button to end your session and return to the login page.
# Screenshots
