A modern, responsive Todo application built with React 18, Tailwind CSS, and Create React App. Features a beautiful UI with smooth animations, real-time updates, and seamless backend integration.
This Todo application demonstrates modern React development practices with a focus on user experience and clean architecture. Built as a single-page application (SPA), it provides an intuitive interface for managing daily tasks with real-time synchronization to a FastAPI backend.
Key Highlights: Modern React hooks, responsive design, smooth animations, error handling, loading states, optimistic updates, and production-ready Docker deployment.
- Modern Design: Clean, minimalist interface with gradient backgrounds
- Responsive Layout: Works seamlessly on desktop, tablet, and mobile
- Smooth Animations: Fade-in, slide-up, and bounce effects using Tailwind CSS
- Interactive Elements: Hover effects, loading spinners, and visual feedback
- Accessibility: Semantic HTML and keyboard navigation support
- CRUD Operations: Create, read, update, and delete todos
- Real-time Updates: Instant synchronization with backend API
- Task Management: Mark todos as complete/incomplete
- Statistics Dashboard: Live counters for total, completed, and pending tasks
- Error Handling: User-friendly error messages and retry mechanisms
- Loading States: Visual feedback during API operations
- React 18: Latest React with concurrent features and createRoot API
- Tailwind CSS: Utility-first CSS framework with custom theme
- Environment Configuration: Flexible API URL configuration
- Docker Support: Containerized deployment with hot reloading
- Production Builds: Optimized bundles for deployment
- Framework: React 18.3.1
- Build Tool: Create React App 5.0.1
- Styling: Tailwind CSS 3.4.17
- Icons: Heroicons React 2.2.0
- HTTP Client: Fetch API (native)
- Development: Hot Module Replacement (HMR)
- Containerization: Docker with Node 18 Alpine
- Node.js 18+ and npm 10+
- Docker & Docker Compose (for containerized setup)
# Clone and navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Set up environment
echo "REACT_APP_API_URL=http://localhost:8000" > .env
# Start development server
npm startVisit http://localhost:3000 to view the application.
# From the devops directory
cd ../devops
docker-compose up --build -d
# Or from frontend directory
cd frontend
docker build -t todo-frontend .
docker run -p 3000:3000 -e REACT_APP_API_URL=http://localhost:8000 todo-frontend- Header Section: App title with gradient text and description
- Add Todo Form: Input field with real-time validation and submit button
- Todo List: Interactive list with checkboxes, edit, and delete actions
- Statistics Bar: Live counters with visual separators
- Empty State: Friendly message when no todos exist
- Error States: Clear error messages with retry options
/* Custom Tailwind Theme */
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
// ... full color palette
}
}
animations: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'bounce-gentle': 'bounceGentle 0.6s ease-in-out'
}# API Configuration
REACT_APP_API_URL=http://localhost:8000 # Backend API base URL
# Docker Environment
HOST=0.0.0.0 # Docker host binding
CHOKIDAR_USEPOLLING=true # File watching in containers{
"start": "react-scripts start", // Development server
"build": "react-scripts build", // Production build
"test": "react-scripts test", // Test runner
"eject": "react-scripts eject" // Eject from CRA (not recommended)
}frontend/
├── public/
│ └── index.html # HTML template
├── src/
│ ├── App.js # Main application component
│ ├── index.js # React root and rendering
│ └── index.css # Global styles and Tailwind imports
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── Dockerfile # Container configuration
└── README.md # This file
App.js
├── State Management (useState hooks)
├── API Integration (useEffect, fetch)
├── Error Handling
├── Loading States
├── Header Section
├── Add Todo Form
├── Todo List Rendering
└── Statistics Dashboard- Functional Components: Modern React with hooks
- State Management: useState for local state
- Side Effects: useEffect for API calls
- Event Handling: Synthetic events with proper binding
- Conditional Rendering: Dynamic UI based on state
- List Rendering: Efficient key-based rendering
# Development
npm start # Start dev server with hot reload
npm run build # Create production build
npm test # Run test suite
npm run eject # Eject from CRA (irreversible)
# Linting & Formatting
npm run lint # ESLint checking
npm run format # Prettier formatting- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
# Create optimized build
npm run build
# Serve static files
npm install -g serve
serve -s build -l 3000# Multi-stage build for production
docker build -t todo-frontend:prod --target production .
docker run -p 80:80 todo-frontend:prod# Development
REACT_APP_API_URL=http://localhost:8000 npm run build
# Staging
REACT_APP_API_URL=https://api-staging.example.com npm run build
# Production
REACT_APP_API_URL=https://api.example.com npm run build- User Authentication: Login/logout with JWT tokens
- Todo Categories: Organize todos by categories or tags
- Due Dates: Add deadline functionality with reminders
- Priority Levels: High, medium, low priority indicators
- Search & Filter: Find todos by text or status
- Drag & Drop: Reorder todos with drag-and-drop
- Dark Mode: Toggle between light and dark themes
- Offline Support: PWA with offline capabilities
- State Management: Redux Toolkit or Zustand for complex state
- Testing: Jest and React Testing Library test suite
- Performance: React.memo and useMemo optimizations
- Accessibility: WCAG 2.1 AA compliance
- Internationalization: Multi-language support with react-i18next
- Analytics: User behavior tracking and performance monitoring
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow React best practices and hooks patterns
- Use Tailwind CSS for styling (avoid custom CSS when possible)
- Maintain responsive design principles
- Add proper error handling and loading states
- Write meaningful commit messages
This project is open source and available under the MIT License.