TodoApp

A modern, feature-rich todo application built with React that allows managing tasks across multiple projects.

Features

• Add, edit, and delete todos with automatic UI updates
• Organize todos by projects with drag-and-drop functionality
• Create and manage projects
• Set due dates and reminders for todos
• Mark todos as complete
• Dashboard view with upcoming tasks
• Project-specific views
• REST API with local storage fallback
• Responsive design for mobile and desktop

Getting Started

Prerequisites

• Node.js (v14 or higher recommended)
• npm (v6 or higher)

Installation

1. Clone the repository or download the source code
2. Navigate to the project directory
3. Install dependencies:

npm install

Development

To run the application in development mode:

# Run frontend and backend concurrently
npm run dev:all

# Or run them separately
npm run dev        # Frontend only
npm run dev:server # Backend only

The frontend will be available at http://localhost:3000, and the API at http://localhost:3001/api.

Production Deployment

Environment Setup

1. Create or modify the .env.production file in the root directory:

# API Configuration
REACT_APP_API_URL=/api
PORT=3001

# Development/Production settings
NODE_ENV=production

# Authentication
JWT_SECRET=your-strong-secret-key-here

# Database
MONGO_URI=your-mongodb-connection-string

# Web Push VAPID Keys
VAPID_PUBLIC_KEY=your-vapid-public-key
VAPID_PRIVATE_KEY=your-vapid-private-key
VAPID_SUBJECT=mailto:your-email@example.com

2. Make sure to replace all placeholders with your actual secure credentials and never commit the .env.production file to version control.

Building for Production

1. Build the application:

# Clean previous builds first
npm run clean

# Build with production configuration
npm run build

2. Start the production server:

npm run prod

This will build the frontend and serve it along with the API from http://localhost:3001.

Deployment Options

Standard Server Deployment

1. Upload the project to your server (excluding node_modules and sensitive files)
2. Install dependencies: npm install --production
3. Create .env.production file on the server with your production settings
4. Build the application: npm run build
5. Start the server: NODE_ENV=production npm start

Docker Deployment

Create a Dockerfile in the project root:

FROM node:18-alpine as build

WORKDIR /app

# Copy dependency files
COPY package*.json ./
RUN npm ci

# Copy application code
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM node:18-alpine

WORKDIR /app

# Copy package.json and build
COPY --from=build /app/package*.json ./
COPY --from=build /app/dist ./dist
COPY --from=build /app/server ./server

# Install only production dependencies
RUN npm ci --only=production

# Environment variables
ENV NODE_ENV=production
ENV PORT=3001

# Expose port
EXPOSE 3001

# Start the application
CMD ["node", "server/index.js"]

Build and run:

docker build -t todoapp .
docker run -p 3001:3001 --env-file .env.production todoapp

Cloud Deployment (Heroku, Render, Vercel, etc.)

Most platforms will automatically detect and build Node.js applications:

1. Connect your repository to your cloud platform
2. Configure environment variables in the cloud platform dashboard
3. Deploy using the cloud platform's interface or CLI

Important Security Notes for Production

1. Environment Variables: Always use environment variables for sensitive information
2. HTTPS: Ensure your production server uses HTTPS
3. Security Headers: The app already uses Helmet for security headers
4. Database Access: Use a database user with minimal required permissions
5. Backups: Configure regular backups for your database

Technology Stack

• Frontend:

  • React 19
  • React Router 7
  • Material UI 7
  • date-fns (for date handling)
  • Webpack 5 and Babel

• Backend:

  • Express.js 5
  • MongoDB & Mongoose (for data persistence)
  • JWT Authentication
  • Web Push Notifications
  • Helmet (security)
  • Compression
  • UUID (for generating unique IDs)

• Data:

  • MongoDB database
  • Local storage fallback
  • API key authentication
  • User authentication with JWT

Project Structure

todoApp/
├── public/                   # Static assets
│   ├── index.html
│   ├── favicon.ico
│   └── service-worker.js     # Service worker for push notifications
├── src/                      # Frontend source code
│   ├── components/           # React components
│   │   ├── auth/             # Authentication components
│   │   ├── settings/         # User settings components
│   │   └── ...               # Other React components
│   ├── context/              # React context providers
│   ├── services/             # API integration and services
│   │   ├── api.js            # API client
│   │   └── notificationService.js # Push notification handling
│   ├── styles/               # CSS styles
│   ├── App.js                # Main app component
│   └── index.js              # Entry point
├── server/                   # Backend
│   ├── models/               # Mongoose models
│   ├── notifications/        # Notification management
│   ├── data/                 # Legacy JSON storage (for API keys)
│   └── index.js              # Express server
├── dist/                     # Production build (created on build)
├── package.json              # Dependencies and scripts
├── webpack.config.js         # Build configuration
├── .env                      # Development environment variables
├── .env.production           # Production environment variables
└── README.md                 # Documentation

API Documentation

The API has the following endpoints:

Authentication Endpoints

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Log in a user
• GET /api/auth/me - Get current user information
• PUT /api/auth/settings - Update user settings

Todo Endpoints

• GET /api/todos - Get all todos for the current user
• GET /api/todos/:id - Get a specific todo
• POST /api/todos - Create a new todo
• PUT /api/todos/:id - Update a todo
• DELETE /api/todos/:id - Delete a todo
• PUT /api/todos/:id/toggle - Toggle todo completion status

Project Endpoints

• GET /api/projects - Get all projects for the current user
• POST /api/projects - Create a new project
• PUT /api/projects/:id - Update a project
• DELETE /api/projects/:id - Delete a project

Notification Endpoints

• GET /api/notifications/vapid-public-key - Get VAPID public key
• POST /api/notifications/subscribe - Subscribe to push notifications
• POST /api/notifications/unsubscribe - Unsubscribe from push notifications
• GET /api/notifications/pending - Get pending notifications
• GET /api/notifications/status - Check notification service status
• POST /api/notifications/start - Start notification service
• POST /api/notifications/stop - Stop notification service

API Key Endpoints (Legacy)

• POST /api/keys - Generate a new API key
• GET /api/keys - Get all API keys
• DELETE /api/keys/:id - Delete an API key

Authentication

Most API endpoints require authentication using a JWT token in the Authorization header:

Authorization: Bearer YOUR_JWT_TOKEN

Legacy endpoints still support the API key authentication method using the X-API-Key header.

License

This project is licensed under the ISC License.