React Todo App - Full Stack Application

A complete full-stack React Todo application with Redux Toolkit, authentication, and MongoDB backend. This npm package includes both frontend and backend code ready to use.

🚀 Features

• Frontend: React 19 with Redux Toolkit
• Backend: Express.js with MongoDB
• Authentication: JWT-based authentication
• State Management: Redux Toolkit with async thunks
• Routing: React Router with protected routes
• UI: Tailwind CSS with responsive design
• API: RESTful API with Axios interceptors

📦 Installation

Quick Start (Recommended)

npx create-react-todo-app my-todo-app
cd my-todo-app
npm run setup
npm run dev

Manual Installation

npm install react-todo-app
# Copy the example files
cp -r node_modules/react-todo-app/frontend_pj ./
cp -r node_modules/react-todo-app/backend ./
npm run setup
npm run dev

🛠️ Available Scripts

• npm run dev - Start both frontend and backend
• npm run client - Start React frontend only
• npm run server - Start Express backend only
• npm run build - Build for production
• npm run setup - Install all dependencies

🏗️ Project Structure

my-todo-app/
├── frontend_pj/          # React frontend
│   ├── src/
│   │   ├── components/   # React components
│   │   │   ├── TodoList/ # Todo components
│   │   │   ├── AuthForm.js
│   │   │   ├── Dashboard.js
│   │   │   ├── Navigation.js
│   │   │   └── Profile.js
│   │   ├── store/        # Redux store
│   │   │   ├── store.js
│   │   │   └── todoSlice.js
│   │   ├── api/          # API services
│   │   │   ├── axios.js
│   │   │   ├── authApi.js
│   │   │   └── todoApi.js
│   │   ├── hooks/        # Custom hooks
│   │   │   └── useTodos.js
│   │   └── App.js
│   └── package.json
├── backend/              # Express backend
│   ├── routes/           # API routes
│   │   ├── userRoutes.js
│   │   └── todoRoutes.js
│   ├── controllers/      # Route controllers
│   │   ├── userdata.js
│   │   └── todoController.js
│   ├── models/           # MongoDB models
│   │   ├── userSchema.js
│   │   └── todoSchema.js
│   ├── middlewares/      # Express middlewares
│   │   └── auth.js
│   └── app.js
└── package.json

🔧 Configuration

Environment Variables

The CLI tool automatically creates .env files:

Backend (.env)

NODE_ENV=DEVELOPMENT
PORT=3001
MONGO_URI=mongodb://localhost:27017/todo-app
JWT_SECRET=your-super-secret-jwt-key

Frontend (.env)

REACT_APP_API_URL=http://localhost:3001/api

📡 API Endpoints

Authentication

• POST /api/user/signup - Register new user
• POST /api/user/login - Login user

Todos (Protected Routes)

• GET /api/todos - Get all todos
• POST /api/todos - Create new todo
• PUT /api/todos/:id - Update todo
• DELETE /api/todos/:id - Delete todo
• PATCH /api/todos/:id - Toggle completion
• POST /api/todos/bulk-delete - Bulk delete
• PUT /api/todos/bulk-update - Bulk update

🎯 Features

Frontend Features

• ✅ User authentication (login/register)
• ✅ Protected routes with React Router
• ✅ Redux Toolkit state management
• ✅ Todo CRUD operations
• ✅ Real-time filtering and sorting
• ✅ Responsive design with Tailwind CSS
• ✅ Form validation and error handling
• ✅ Loading states and optimistic updates
• ✅ Inline editing for todos
• ✅ Priority levels and due dates
• ✅ Bulk operations support

Backend Features

• ✅ Express.js REST API
• ✅ MongoDB with Mongoose
• ✅ JWT authentication middleware
• ✅ User registration and login
• ✅ Todo CRUD operations
• ✅ Bulk operations support
• ✅ Error handling and validation
• ✅ CORS configuration
• ✅ Security headers with Helmet

🛡️ Security

• JWT token authentication
• Password hashing with bcrypt
• Protected API routes
• Input validation and sanitization
• CORS configuration
• Helmet security headers

🚀 Deployment

Frontend (Netlify/Vercel)

npm run build
# Deploy the build folder

Backend (Heroku/Railway)

# Set environment variables
MONGO_URI=your-mongodb-uri
JWT_SECRET=your-jwt-secret
PORT=3001

📦 NPM Package Contents

This package includes:

Frontend Code

• Complete React application
• Redux Toolkit setup
• All components and hooks
• API integration
• Styling with Tailwind CSS

Backend Code

• Express.js server
• MongoDB models
• Authentication system
• API controllers and routes
• Middleware functions

CLI Tool

• create-react-todo-app command
• Automatic project setup
• Environment file generation
• Dependency installation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React team for the amazing framework
• Redux Toolkit for state management
• Express.js for the backend framework
• MongoDB for the database
• Tailwind CSS for styling

📞 Support

If you have any questions or need help, please open an issue on GitHub.

Made with ❤️ by [Your Name]