# Blueprint

A reusable full-stack starter template with authentication, CRUD, and MongoDB. Copy or rename this folder to bootstrap any new project.

## Stack

- **Backend:** Node.js, Express, Mongoose, JWT, bcrypt
- **Frontend:** React (Vite), Tailwind CSS, React Router, axios

## Prerequisites

- [Node.js](https://nodejs.org/) (v18+ recommended)
- [MongoDB](https://www.mongodb.com/try/download/community) running locally (use [MongoDB Compass](https://www.mongodb.com/products/compass) to inspect `blueprint_db`)

## Project structure

```
blueprint/
├── backend/     # API (port 5000)
├── frontend/    # React app (port 5173)
│   ├── public/  # Favicon, static files (e.g. /favicon.svg)
│   └── src/
│       └── assets/  # Logos, images used in pages
└── README.md
```

## Setup

### 1. MongoDB

Start MongoDB on your machine. The default connection string targets a local instance:

```
mongodb://127.0.0.1:27017/blueprint_db
```

### 2. Backend

```bash
cd backend
npm install
cp .env.example .env
```

On Windows (PowerShell):

```powershell
Copy-Item .env.example .env
```

Edit `.env` and set a strong `JWT_SECRET`. Other defaults work for local development.

```bash
npm run dev
```

API base: **http://localhost:5000/api**

- Health: `GET /api/health`
- Auth: `POST /api/auth/register`, `POST /api/auth/login`, `GET /api/auth/me`
- Items (protected): `GET/POST /api/items`, `GET/PUT/DELETE /api/items/:id`

### 3. Frontend

In a second terminal:

```bash
cd frontend
npm install
cp .env.example .env
```

Windows:

```powershell
Copy-Item .env.example .env
```

```bash
npm run dev
```

App URL: **http://localhost:5173**

## Test flow

1. Open **http://localhost:5173/register** and create an account (name, email, password).
2. You are redirected to **/items** with a JWT stored in `localStorage`.
3. Create, edit, and delete items on the Items page.
4. Log out, then sign in again at **/login** — your items remain tied to your user only.

## Renaming for a new project

1. Rename the `blueprint` folder and update `package.json` `name` fields in `backend` and `frontend`.
2. Change `MONGO_URI` database name in `backend/.env`.
3. Duplicate `Item` model/routes/controllers as a pattern for new resources.
4. Add new pages and routes in the frontend following `Items.jsx`.

## Scripts

| Location   | Command        | Description              |
|-----------|----------------|--------------------------|
| backend   | `npm run dev`  | API with nodemon         |
| backend   | `npm start`    | API (production-style)   |
| frontend  | `npm run dev`  | Vite dev server          |
| frontend  | `npm run build`| Production build         |

## Environment variables

**Backend (`backend/.env`)**

| Variable     | Example                              |
|-------------|--------------------------------------|
| PORT        | 5000                                 |
| MONGO_URI   | mongodb://127.0.0.1:27017/blueprint_db |
| JWT_SECRET  | (long random string)                 |
| CLIENT_URL  | http://localhost:5173                |

**Frontend (`frontend/.env`)**

| Variable       | Example                      |
|---------------|------------------------------|
| VITE_API_URL  | http://localhost:5000/api    |
