/todo-react-app

Web application "ToDo" with React.

Primary LanguageJavaScript

Todo React App

GitHub contributors GitHub top language GitHub last commit Github Repo Size

📖 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.

todo-gif.gif

🧩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 and npm installed on your computer.

📔 Clone the repository:

HTTPS:

https://github.com/KarinaOlenina/todo-react-app.git

📦 Install the project dependencies by running:

npm install

💻 Install JSON-Server

npm i json-server

🚀 Start app:

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:

npm run json-server

This will start a JSON server on http://localhost:3001.

Now you can access the application in your web browser at 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.