Todo-SQL — Fullstack Todo App

This repository is a simple fullstack Todo application with:

• Backend: Node.js + Express + MySQL
• Frontend: React + Vite + Tailwind CSS (v4) + React Router

This README covers how to run the backend and frontend locally, API details, and troubleshooting.

Checklist of what's implemented

• REST API with CRUD endpoints for todos (see server/controllers/todo.controllers.js).
• MySQL connection pool in server/config/mysql.js.
• Frontend React app in client/ using Tailwind and React Router. Components and pages live under client/src.

---

Requirements

• Node.js 18+ (recommended)
• npm
• MySQL server

Setup

1. Clone repo (already in your workspace) and create a .env for the server:

Create server/.env with:

DB_HOST=localhost
DB_USER=your_mysql_user
DB_PASSWORD=your_mysql_password
DB_NAME=your_database_name
PORT=3000

2. Create the database and table (example SQL):

CREATE DATABASE IF NOT EXISTS todo_app;
USE todo_app;

CREATE TABLE IF NOT EXISTS todos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  completed BOOLEAN DEFAULT FALSE
);

3. Install dependencies for server and client (from repository root):

cd server; npm install
cd ..\client; npm install

---

Run locally

Start backend (in server/):

cd server
npm run dev   # or: node app.js

Start frontend (in client/):

cd client
npm run dev

• Frontend development server runs with Vite (default configured port 5173). It calls the backend at http://localhost:3000/api/todos (see client/src/services/api.js).

---

API Reference

Base URL: http://localhost:3000/api/todos

• GET / — Get all todos
  • Response: JSON array of todo objects: [{ id, title, completed }, ...]
• POST / — Create a todo
  • Body: { title: string }
  • Response: created todo object
• PUT /:id — Update a todo
  • Body: { title?: string, completed?: boolean }
  • Response: { message: 'Todo updated successfully' }
• DELETE /:id — Delete a todo
  • Response: { message: 'Todo deleted successfully' }

---

Frontend notes

• The frontend uses the API wrapper in client/src/services/api.js which exports todoAPI with methods: getAllTodos, createTodo, updateTodo, deleteTodo.
• Example usage is provided in client/src/pages/TodoPage.jsx.
• Tailwind is already installed and configured. Vite plugin includes Tailwind and React plugin in client/vite.config.js.

---

Troubleshooting

• CORS: The server enables CORS via app.use(cors()). If you still have issues, ensure frontend and backend ports match configuration.
• MySQL connection: If the server fails to start, check server/.env and that the MySQL server is running and reachable.
• Ports: By default backend uses port 3000 and frontend 5173. Update .env or vite.config.js if you need different ports.

---

Next steps / Suggested improvements

• Add unit tests for the server controllers.
• Add optimistic UI updates and better error handling in the frontend.
• Add user authentication if you want per-user todo lists.

---

If you'd like, I can:

• Start both dev servers and confirm the UI works.
• Add a docker-compose.yml to run MySQL, backend, and frontend together.
• Add a production build and deployment guide.