Home Original page

GitHub - code-vibe/Cornfield

Cornfield Todo App

A modern, full-stack todo application built for the Cornfield Group Assessment.

Project Overview

This is a complete todo application featuring:

  • Backend: Node.js REST API with Express
  • Frontend: React application with modern UI
  • Database: In-memory storage
  • Containerization: Full Docker support with Docker Compose

Requirements Completed

Core Features

  • Add new todos to the list
  • Mark todos as complete
  • Delete todos from the list
  • Filter by all/active/complete todos
  • Clear all completed todos

Bonus Features

  • Drag and drop to reorder items
  • Real-time statistics dashboard
  • Toast notifications for user feedback
  • Responsive mobile-friendly design
  • Optimistic UI updates

Technical Stack

  • Backend: Node.js with Express (preferred)
  • Frontend: React (preferred)
  • API Documentation: Comprehensive docs included
  • Docker: Both frontend and backend containerized
  • Communication: Frontend makes API calls to backend

Quick Start

Method 1: Docker Compose (Recommended)

Prerequisites: Docker and Docker Compose installed

# Clone or navigate to project directory
cd Cornfield

# Build and run both services
docker-compose up --build

# Or run in background
docker-compose up -d --build

Access the application:

Method 2: Local Development

Prerequisites: Node.js 16+ installed

# Start Backend (Terminal 1)
cd server
npm install
npm start

# Start Frontend (Terminal 2) 
cd client
npm install
npm start

Access the application:

Project Structure

Cornfield/
├── server/                 # Backend API
│   ├── server.js          # Main server file
│   ├── package.json       # Backend dependencies
│   ├── Dockerfile         # Backend container config
│   ├── healthcheck.js     # Health check script
│   ├── test-api.js        # API testing script
│   ├── api-tester.html    # Interactive API tester
│   ├── API_DOCUMENTATION.md # Complete API docs
│   └── README.md          # Backend documentation
├── client/                # Frontend React App
│   ├── src/
│   │   ├── App.js         # Main React component
│   │   ├── api.js         # API service layer
│   │   └── components/    # React components
│   ├── public/            # Static assets
│   ├── package.json       # Frontend dependencies
│   ├── Dockerfile         # Production container config
│   ├── Dockerfile.dev     # Development container config
│   ├── nginx.conf         # Nginx configuration
│   └── README.md          # Frontend documentation
├── docker-compose.yml     # Production Docker setup
├── docker-compose.dev.yml # Development Docker setup
└── README.md             # This file

Docker Commands

Production Build

# Build and run production containers
docker-compose up --build

# Stop containers
docker-compose down

# View logs
docker-compose logs

# Rebuild specific service
docker-compose build server
docker-compose build client

Development Build

# Build and run development containers (with hot reload)
docker compose -f docker-compose.dev.yml up --build

# Stop development containers
docker compose -f docker-compose.dev.yml down

Individual Container Commands

# Build backend only
cd server
docker build -t cornfield-api .
docker run -p 5000:5000 cornfield-api

# Build frontend only
cd client
docker build -t cornfield-frontend .
docker run -p 80:80 cornfield-frontend

Configuration

Environment Variables

Backend (server/.env):

PORT=5000
NODE_ENV=production

Frontend:

  • Development: Automatically proxies to http://localhost:5000
  • Production: Uses Nginx reverse proxy to backend

Port Configuration

  • Frontend: Port 80 (production) / 3000 (development)
  • Backend: Port 5000
  • API Endpoints: /api/*

API Documentation

Complete API documentation is available at:

Key Endpoints:

  • GET /api/todos - Get all todos
  • POST /api/todos - Create todo
  • PUT /api/todos/:id - Update todo
  • DELETE /api/todos/:id - Delete todo
  • DELETE /api/todos/completed/clear - Clear completed
  • PUT /api/todos/reorder - Reorder todos (drag & drop)
  • GET /api/stats - Get statistics

Testing

Backend Testing

cd server

# Test with Node.js script
node test-api.js

# Test with interactive HTML page
open api-tester.html

Frontend Testing

cd client

# Run React tests
npm test

# Build production version
npm run build

Integration Testing

  1. Start both services (Docker or locally)
  2. Open frontend in browser
  3. Test all CRUD operations
  4. Verify drag & drop functionality
  5. Test filtering and statistics

Features Showcase

Frontend Features:

  • Modern React UI with hooks and functional components
  • Drag & Drop Reordering using react-beautiful-dnd
  • Real-time Filtering (All/Active/Completed)
  • Toast Notifications for user feedback
  • Loading States and error handling
  • Responsive Design for mobile devices
  • Statistics Dashboard with completion metrics
  • Optimistic Updates for smooth UX

Backend Features:

  • RESTful API with proper HTTP status codes
  • In-memory Storage (no database required)
  • CORS Support for frontend integration
  • Error Handling with consistent response format
  • Health Checks for Docker monitoring
  • API Documentation with examples
  • UUID-based IDs for unique identification

Troubleshooting

Common Issues:

1. Port Already in Use:

# Check what's using the port
netstat -ano | findstr :5000
netstat -ano | findstr :3000

# Kill process if needed (Windows)
taskkill /PID <PID> /F

2. Docker Build Issues:

# Clean Docker cache
docker system prune -a

# Rebuild without cache
docker-compose build --no-cache

3. API Connection Issues:

  • Verify backend is running on port 5000
  • Check browser console for CORS errors
  • Ensure frontend proxy is configured correctly

4. Dependencies Issues:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

##Browser Support

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Performance Features

  • Optimistic Updates - Instant UI feedback
  • Code Splitting - Lazy loaded components
  • Asset Optimization - Minified production builds
  • Nginx Caching - Static asset caching
  • Gzip Compression - Reduced transfer sizes

Future Enhancements

Potential improvements for production use:

  • Database persistence (MongoDB/PostgreSQL)
  • User authentication and authorization
  • Real-time updates with WebSockets
  • Progressive Web App (PWA) features
  • Dark theme support
  • Bulk operations (select multiple todos)
  • Todo categories and tags
  • Due dates and reminders
  • Export/Import functionality

📧 Contact

**Mrsamoladapo@gmail.com

For any questions about this implementation, please contact the development team.