📋 Task Manager App

A Full-Stack React Learning Project - Modern Task Management with Cloudflare Workers & D1 Database

🎯 Try the App

Scroll down to interact with the task management interface! Create, update, and organize your tasks with our intuitive React-based application.

📖 About This Project

This is a comprehensive full-stack web application that demonstrates modern development practices using React, Cloudflare Workers, and D1 database. The app features a clean, intuitive interface for managing tasks with real-time updates, filtering capabilities, and persistent data storage.

🏗️ Project Structure

task-manager-api/
├── src/
│   └── index.ts              # Main Worker API with CRUD operations
├── migrations/
│   └── 0001_create_tasks_table.sql  # Database schema
├── test/
│   └── index.spec.ts         # Test suite
├── wrangler.jsonc           # Cloudflare Workers configuration
├── package.json             # Dependencies and scripts
└── tsconfig.json            # TypeScript configuration

task-manager-frontend/
├── src/
│   ├── App.jsx              # Main React component
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles
├── index.html               # HTML template with project info
├── package.json             # Dependencies and scripts
└── vite.config.js           # Vite configuration

💻 Code Explanation

API Routes (index.ts)

// GET /api/tasks - Fetch all tasks
router.get('/api/tasks', async (request: Request, env: Env) => {
  const { results } = await env.DB.prepare(`
    SELECT * FROM tasks ORDER BY created_at DESC
  `).all();
  return new Response(JSON.stringify(results), {
    headers: { 'Content-Type': 'application/json', ...corsHeaders }
  });
});

// POST /api/tasks - Create new task
router.post('/api/tasks', async (request: Request, env: Env) => {
  const { title } = await request.json() as { title: string };
  const result = await env.DB.prepare(`
    INSERT INTO tasks (title, completed, created_at, updated_at) 
    VALUES (?, 0, datetime('now'), datetime('now'))
  `).bind(title.trim()).run();
  // Return created task...
});

React Component (App.jsx)

function App() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');
  
  const fetchTasks = async () => {
    const response = await fetch(`${API_BASE_URL}/api/tasks`);
    const data = await response.json();
    setTasks(data);
  };
  
  const addTask = async (title) => {
    const response = await fetch(`${API_BASE_URL}/api/tasks`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title })
    });
    const newTask = await response.json();
    setTasks([newTask, ...tasks]);
  };
  
  return (
    <div className="App">
      <h1>📋 Task Manager</h1>
      {/* Task management interface */}
    </div>
  );
}

🛠️ Tech Stack

React 19 Cloudflare Workers D1 Database TypeScript Vite CSS3 REST API itty-router Vitest

🎓 Key Learning Points

Full-Stack Development: Building both frontend and backend from scratch
Cloudflare Workers: Serverless computing with edge deployment
D1 Database: SQLite-based database with Cloudflare integration
RESTful API Design: Creating clean, RESTful endpoints
TypeScript: Type safety and better development experience
React Hooks: Modern state management with useState and useEffect
CRUD Operations: Complete Create, Read, Update, Delete functionality
Database Migrations: Version-controlled database schema changes
CORS Handling: Cross-origin resource sharing configuration
Error Handling: Comprehensive error handling and user feedback

🚀 Deployment to Cloudflare Workers & Pages

This project demonstrates deployment to Cloudflare's edge computing platform:

Backend (Workers) Deployment:

# Install Wrangler CLI
npm install -g wrangler

# Login to Cloudflare
wrangler login

# Create D1 database
wrangler d1 create task-manager-db

# Apply database migrations
wrangler d1 migrations apply task-manager-db --remote

# Deploy Worker
wrangler deploy

Frontend (Pages) Deployment:

# Build the project
npm run build

# Deploy to Cloudflare Pages
wrangler pages deploy dist --project-name task-manager-frontend

# Or connect to Git repository for automatic deployments

D1 Database Configuration:

// wrangler.jsonc
{
  "name": "task-manaager-api",
  "main": "src/index.ts",
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "task-manager-db",
      "database_id": "your-database-id"
    }
  ]
}

🔧 Development Commands

# Backend (API)
npm run dev          # Start local development server
npm run deploy       # Deploy to Cloudflare Workers
npm run test         # Run test suite
wrangler d1 execute task-manager-db --local --file migrations/0001_create_tasks_table.sql

# Frontend
npm run dev          # Start Vite development server
npm run build        # Build for production
npm run preview      # Preview production build

📚 Next Steps

Add user authentication and authorization
Implement task categories and tags
Add due dates and priority levels
Create task sharing and collaboration features
Add real-time updates with WebSockets
Implement task search and advanced filtering
Add data export/import functionality
Create mobile app with React Native
Add analytics and task completion insights
Implement task templates and recurring tasks

Built with ❤️ using Cloudflare Workers, D1 Database, and React