Todos CRUD - React.js & Zustand

Project Details

Overview

A simple Todos Management App built with React.js, Zustand, and Tailwind CSS, using the DummyJSON Todos API. The app supports CRUD operations (Create, Read, Update, Delete) for Todos with pagination, and it persists data locally using localStorage

Live Link

• Live Demo

Features

• CRUD Operations: Create, delete, and update toggle completion of Todos.
• Pagination: Display Todos with navigation controls.
• State Management: Global state with Zustand.
• Local Persistence: Todos are stored in localStorage for data persistence.
• Notifications: Toast notifications for success/error messages using react-hot-toast.
• Icons: lucide-react icons for UI components.
• Responsive Design: Built with Tailwind CSS for a mobile-first, responsive layout.

Tech Stack

• React.js
• Tailwind CSS
• Zustand (State Management)
• Axios (API Calls)
• localStorage (for persistence)

Setup & Installation

Installation

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn

1. Clone the Repository

Clone this repository to your local machine:

git clone https://github.com/your-username/todo-assignment.git
cd todo-assignment

2. Install dependencies :

npm install

3. Run the Application locally :

npm run dev

Running the Application :

Visit http://localhost:3000 in your browser to access the application.

Build the Application:

npm run build

This will create a dist folder containing optimized files for deployment.

Made :

• By Dhruti Thakkar