Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KarinaOlenina/todo-react-app
Web application "ToDo" with React.
https://github.com/KarinaOlenina/todo-react-app
axios axios-react html javascript react react-router reactjs scss todo web
Last synced: 4 months ago
JSON representation
Web application "ToDo" with React.
- Host: GitHub
- URL: https://github.com/KarinaOlenina/todo-react-app
- Owner: KarinaOlenina
- Created: 2022-11-30T11:54:28.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-07T21:58:33.000Z (about 1 year ago)
- Last Synced: 2024-07-30T20:54:44.215Z (7 months ago)
- Topics: axios, axios-react, html, javascript, react, react-router, reactjs, scss, todo, web
- Language: JavaScript
- Homepage:
- Size: 37.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo React App
## 📖 Overview
The TODO Application is an interactive and user-friendly task management app that enables users to efficiently organize their responsibilities, create new tasks, edit them, and track the progress of their completion.
## 🔥Key Features
1. **Task Creation:**
- Add new tasks with defined names, descriptions, and color codes.
2. **Editing and Deleting Tasks:**
- User-friendly interface for editing existing tasks or deleting them when necessary.
3. **Marking Completed Tasks:**
- Mark tasks as completed for clear progress tracking and task organization.
4. **Color Labels for Categories:**
- Define task categories using color-coded labels for easy identification and filtering.
5. **Category List (Task List):**
- Convenient display of the task list and their categories for quick access and navigation.
## 🧩Technical Details
1. **Technologies Used:**
- Implemented on the React platform using the `react-router-dom` library for routing.
- Utilized `axios` for server interaction, ensuring data storage and retrieval.
2. **Design and UI/UX:**
- Modern and intuitive design for maximum user convenience.
- Use of color labels for categories and creating an aesthetically pleasing atmosphere.
3. **Security:**
- Implemented crucial security measures such as input data validation and processing to prevent potential attacks.
4. **Scalability and Extensibility:**
- Architecturally flexible structure, allowing for easy expansion and modification of the application's functionality.
The TODO Application helps users efficiently manage their tasks, providing tools for easy creation, tracking, and completion of tasks.
## 🛠 Getting Started
To use the application, follow these steps:
> First, make sure you have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your computer.
### 📔 Clone the repository:
HTTPS:
```bush
https://github.com/KarinaOlenina/todo-react-app.git
```
### 📦 Install the project dependencies by running:
```bush
npm install
```
### 💻 Install JSON-Server
```bush
npm i json-server
```
### 🚀 Start app:
```bush
npm start
```
### ☁️ Start json-server:
In addition to the application, you need to run a fake server to store data about words and results. You can do this by running:
```bush
npm run json-server
```
This will start a JSON server on [http://localhost:3001](http://localhost:3001).
Now you can access the application in your web browser at [http://localhost:3000](http://localhost:3000).
Create word pairs, practice, and review your results using the different modes available in the application.
## 🔧 Technologies Used
- React: A JavaScript library for building user interfaces.
- react-router-dom: A library for adding routing and navigation to your React applications.
- axios: A promise-based HTTP client for making requests to your JSON server or other APIs.
- JSON Server: A fake REST API to store and retrieve data.