Animated Todo App

A modern, animated Todo application built with Vite, React, TypeScript, Material-UI, and MongoDB.

Features

• ✨ Beautiful animations using Framer Motion
• 🎨 Modern UI with Material UI
• 🔄 Add, edit, delete, and mark todos as completed
• 💾 MongoDB integration for data persistence
• 🚀 Fast development with Vite

Prerequisites

• Node.js (v14+)
• MongoDB (local instance or MongoDB Atlas)

Installation

1. Clone the repository
2. Install dependencies:

   npm install
   

3. Create a .env file in the root directory with the following variables:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/todo-app
   

   (Adjust the MongoDB URI as needed)

Running the App

Development

To run both the frontend and backend concurrently:

npm run start

To run only the frontend:

npm run dev

To run only the backend:

npm run server

Production

Build the frontend:

npm run build

Then start the server:

npm run server

Project Structure

• /src - Frontend React application
  • /components - React components
  • /services - API services
• /server - Backend Express server
  • /models - MongoDB models
  • /routes - API routes

Technologies Used

• Vite
• React
• TypeScript
• Material UI
• Framer Motion (for animations)
• Express
• MongoDB & Mongoose