# 📦 Project Template — React + Go REST API + MySQL (Todo App)

This is a **full‑stack starter template** with a consistent, working setup:

* **Frontend:** React (Vite)
* **Backend:** Go (REST API)
* **Database:** MySQL
* **Example domain:** Todo application

---

## 📁 Folder Structure

```
/project-root
 ├── /web            # React (Vite) frontend
 ├── /server         # Go backend (REST API)
 ├── .env            # Shared environment variables (optional)
 └── README.md
```

> Folder names are lowercase (`web`, not `Web`) to avoid cross‑platform issues.

---

## ⚙️ Environment Variables

### Backend (`/server/.env`)

```
# Database configuration
DB_USER=
DB_PASSWORD=
DB_HOST=localhost
DB_PORT=3306
DB_NAME=

# Server
SERVER_PORT=3000
```

### Frontend (`/web/.env`)

```
VITE_SERVER_URL=http://localhost:3000
```

> ⚠️ `VITE_` variables **must only exist in the frontend**. They should not be used by the Go backend.

---

## 🗄️ Database Setup

Create the database:

```sql
CREATE DATABASE your_db_name;
USE your_db_name;
```

### 📌 Todo Table

```sql
CREATE TABLE todos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    completed BOOLEAN NOT NULL DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

### Table Fields

| Column      | Description                  |
| ----------- | ---------------------------- |
| id          | Primary key                  |
| title       | Todo title                   |
| description | Optional details             |
| completed   | Completion status            |
| created_at  | Auto‑generated creation time |

---

## ▶️ Running the Project

### Backend (Go)

```bash
cd server
go mod tidy
go run main.go
```

Backend runs at:

```
http://localhost:3000
```

---

### Frontend (React)

```bash
cd web
pnpm install
pnpm run dev
```

Frontend runs at:

```
http://localhost:5173
```

(Vite default port)

---

## 🔌 API Structure (REST)

```
GET    /api/todos
GET    /api/todos/{id}
POST   /api/todos
PUT    /api/todos/{id}
DELETE /api/todos/{id}
```

### POST / PUT Body Example

```json
{
  "title": "Buy milk",
  "description": "Lactose‑free",
  "completed": false
}
```

---

## 🌐 CORS (Backend Requirement)

Make sure your Go server includes CORS headers:

```go
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
```

---

## 🛠️ Building for Production

### Backend

```bash
cd server
go build -o server
```

### Frontend

```bash
cd web
pnpm run build
```

---

## ❓ Troubleshooting

| Problem                | Solution                          |
| ---------------------- | --------------------------------- |
| No DB connection       | Verify DB credentials in `.env`   |
| Backend not responding | Check `SERVER_PORT` and Go logs   |
| CORS errors            | Ensure CORS middleware is enabled |
| Port already in use    | Change the port in `.env`         |

---

## ✅ Fixed Issues Summary

* ✅ Database schema now matches API payload
* ✅ Removed invalid backend `VITE_` variables
* ✅ Consistent folder naming (`web`)
* ✅ Correct REST route syntax for Go
* ✅ Added `created_at`
* ✅ Clarified Vite default port

---

Happy hacking 🚀