https://github.com/hari-shanke-reddy/todo-app-

https://github.com/hari-shanke-reddy/todo-app-

api axios babel crud material-ui npm-package react-router reactjs redux redux-toolkit

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hari-shanke-reddy/todo-app-
• Owner: hari-shanke-reddy
• Created: 2024-07-11T16:17:09.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-11-17T22:30:06.000Z (2 months ago)
• Last Synced: 2025-01-21T17:11:24.575Z (9 days ago)
• Topics: api, axios, babel, crud, material-ui, npm-package, react-router, reactjs, redux, redux-toolkit
• Language: JavaScript
• Homepage:
• Size: 194 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Todo List Application

This is a feature-rich **Todo List Application** built using **React**, **Babel**, **Material UI**, and **Redux Toolkit**. The application interacts with a RESTful API to fetch, update, and manage todo items, ensuring seamless integration with a backend server.

## Features

- **Dynamic Todo Management:**

  - Fetches the list of todos from a REST API.

  - Allows creating, editing, and deleting todos directly from the UI.

  - Updates are immediately reflected in the backend via API calls.

- **Modern UI/UX:**

  - Built with **Material UI** for a polished and responsive user interface.

  - Mobile-friendly design for on-the-go task management.

- **State Management:**

  - Utilizes **Redux Toolkit** for efficient state handling and simplified store setup.

  - Centralized state for better predictability and maintainability.

- **Performance Optimization:**

  - Leveraging **Babel** for code transpilation and cross-browser compatibility.

  - Efficient rendering using React’s component-based architecture.

## Tech Stack

- **Frontend Framework:** React

- **UI Library:** Material UI

- **State Management:** Redux Toolkit

- **Transpilation Tool:** Babel

- **API Integration:** RESTful API

## How It Works

1. **Fetching Data:** Todo items are fetched from the API and displayed in a list.

2. **Adding Todos:** Users can add new todos using an input form. The new todo is sent to the backend API and added to the UI upon a successful response.

3. **Updating Todos:** Users can edit existing todos inline. Changes are sent to the backend API and updated in the UI.

4. **Deleting Todos:** Users can delete a todo item. The item is removed from the API and reflected in the UI.

## Installation and Setup

### Prerequisites

- **Node.js** (version 16 or higher)

- **npm** or **yarn**

### Installation

-**1. Clone the repository:**

   git clone https://github.com/hari-shanke-reddy/Todo-App-.git

   

-**2.Install dependencies:**

npm install

yarn install

-**3.Start the development server:**

npm run dev

yarn dev

-**4.Open your browser and navigate to:**

http://localhost:3000

**thankyou 

k harishanker reddy**