Redux Thunk Todo App

Simple todo application built with React, Chakra UI, Axios, Redux, React Redux, and React Router on the frontend, and JSON Server on the backend.

Features

• Add new todo with title, description, and status
• Edit todo title, description, and status
• Delete todo
• Toggle todo status

Technologies Used

• React: A JavaScript library for building user interfaces
• Chakra UI: A simple, modular and accessible component library
• Axios: Promise-based HTTP client for the browser and Node.js
• Redux: A predictable state container for JavaScript apps
• React Redux: Official React bindings for Redux
• React Router: Declarative routing for React.js
• JSON Server: Full fake REST API backend for prototyping and mocking

Getting Started

Prerequisites

• Node.js and npm should be installed on your machine.

Installation

1. Clone this repository:

2. Navigate into the project directory:

3. Install dependencies:

4. Install dependencies:

Running the App

1. Start the JSON Server (backend):

This will start the JSON Server at http://localhost:8080 with the todo data.

2. Start the React application (frontend):

This will start the React app in development mode. Open http://localhost:3000 to view it in the browser.

Usage

• Once the app is running, you can add new todos by providing a title, description, and selecting a status (e.g., "To Do", "In Progress", "Done").
• You can edit existing todos by clicking on them and modifying the title, description, or status.
• To delete a todo, click on the delete button associated with the todo.
• To toggle the status of a todo, click on the status label.

Theming

This app uses Chakra UI, which supports theming. You can customize the app's appearance by modifying the theme configuration. The theme file is located at src/theme.js. Feel free to adjust colors, typography, and other design tokens to match your preferences.

• Add to do

• Dark page of home

• Home page

• Edit existing todo