SkyArtShop/PROJECT_README.md

# 🎨 SkyArtShop - Production-Ready Architecture

**Modern, scalable full-stack web application with proper separation of concerns.**

---

## 🏗️ Architecture Overview

```
SkyArtShop/
├── frontend/          # React + TypeScript + Vite
├── backend/           # Node.js + Express + Prisma
├── docs/              # Architecture documentation
└── setup.sh           # Quick start script
```

### Frontend Stack

- **React 18** - Modern UI library
- **TypeScript** - Type safety
- **Vite** - Lightning-fast build tool
- **React Router** - Client-side routing
- **Axios** - HTTP client with interceptors
- **Tailwind CSS** - Utility-first styling

### Backend Stack

- **Node.js + Express** - Web server
- **TypeScript** - Type safety
- **Prisma ORM** - Type-safe database access
- **PostgreSQL** - Production database
- **JWT** - Authentication
- **Zod** - Request validation

---

## 🚀 Quick Start

### Automated Setup (Recommended)

```bash
./setup.sh
```

### Manual Setup

#### 1. Install Dependencies

**Frontend:**

```bash
cd frontend
npm install
```

**Backend:**

```bash
cd backend
npm install
```

#### 2. Configure Environment

**Backend:** Update `backend/.env`:

```env
PORT=3000
DATABASE_URL="postgresql://user:password@localhost:5432/skyartshop"
JWT_SECRET=your-secret-key
CORS_ORIGIN=http://localhost:5173
```

**Frontend:** Update `frontend/.env`:

```env
VITE_API_URL=http://localhost:3000/api
```

#### 3. Set Up Database

```bash
cd backend
npx prisma generate
npx prisma migrate dev
```

#### 4. Start Development Servers

**Terminal 1 - Backend:**

```bash
cd backend
npm run dev
# Runs on http://localhost:3000
```

**Terminal 2 - Frontend:**

```bash
cd frontend
npm run dev
# Runs on http://localhost:5173
```

---

## 📁 Project Structure

### Frontend Structure

```
frontend/
├── src/
│   ├── @types/          # TypeScript definitions
│   ├── api/             # API client & endpoints
│   ├── assets/          # Images, fonts, icons
│   ├── components/      # Reusable UI components
│   ├── hooks/           # Custom React hooks
│   ├── pages/           # Page components (routes)
│   ├── routes/          # Router configuration
│   ├── templates/       # Page layouts
│   ├── themes/          # Design system
│   ├── utils/           # Helper functions
│   ├── validators/      # Form validation
│   ├── app.tsx          # Root component
│   └── main.tsx         # Entry point
├── index.html
├── vite.config.ts
├── tailwind.config.ts
└── package.json
```

### Backend Structure

```
backend/
├── prisma/
│   └── schema.prisma    # Database schema
├── src/
│   ├── @types/          # TypeScript definitions
│   ├── config/          # App configuration
│   ├── controllers/     # Request handlers
│   ├── services/        # Business logic
│   ├── models/          # Data access layer
│   ├── routes/          # API endpoints
│   ├── middlewares/     # Express middleware
│   ├── validators/      # Request validation
│   ├── helpers/         # Utility functions
│   └── server.ts        # Entry point
├── tsconfig.json
└── package.json
```

---

## 📚 Documentation

- **[ARCHITECTURE.md](docs/ARCHITECTURE.md)** - Complete architecture guide with examples
- **[STRUCTURE_COMPLETE.md](docs/STRUCTURE_COMPLETE.md)** - Structure comparison & overview
- **[frontend/readme.md](frontend/readme.md)** - Frontend documentation
- **[backend/readme.md](backend/readme.md)** - Backend documentation

---

## 🎯 Key Features

### ✅ Frontend Features

- Type-safe API client with automatic auth token injection
- Custom hooks for authentication and data fetching
- Protected routes with automatic redirect
- Centralized theming and design system
- Form validation matching backend schemas
- Utility functions for formatting and validation

### ✅ Backend Features

- Layered architecture (Controllers → Services → Models)
- JWT authentication with middleware
- Global error handling with consistent responses
- Request validation with Zod schemas
- Prisma ORM with type-safe queries
- Security middleware (Helmet, CORS, Compression)
- Request logging for debugging

---

## 📝 How to Add a New Feature

See [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for a complete step-by-step guide on adding the "Wishlist" feature.

### Quick Overview

**Backend:**

1. Update Prisma schema
2. Create service (business logic)
3. Create controller (request handler)
4. Add routes
5. Add validation

**Frontend:**

1. Add TypeScript types
2. Create API client methods
3. Create custom hook (optional)
4. Use in components

---

## 🔐 Security

- JWT authentication on protected endpoints
- Password hashing with bcrypt
- Input validation with Zod
- Security headers with Helmet
- CORS configured for specific origins
- SQL injection prevention via Prisma
- Client-side route protection

---

## 🧪 Testing

### Frontend

```bash
cd frontend
npm run test:unit        # Component tests
npm run test:integration # Hook tests
npm run test:e2e        # End-to-end tests
```

### Backend

```bash
cd backend
npm run test:unit        # Service tests
npm run test:integration # Route tests
npm run test:api        # API tests
```

---

## 🚢 Deployment

### Frontend (Vercel/Netlify)

```bash
cd frontend
npm run build
# Deploy dist/ folder
```

### Backend (Railway/Heroku/AWS)

```bash
cd backend
npm run build
# Set environment variables
# Run: npm start
```

---

## 🛠️ Development Scripts

### Frontend

```bash
npm run dev      # Start dev server
npm run build    # Production build
npm run preview  # Preview production build
npm run lint     # Run linter
```

### Backend

```bash
npm run dev              # Start dev server (hot reload)
npm run build            # Compile TypeScript
npm start                # Run production server
npm run prisma:generate  # Generate Prisma client
npm run prisma:migrate   # Run migrations
npm run prisma:studio    # Open Prisma Studio
```

---

## 📊 Tech Stack Summary

| Layer | Technology | Purpose |
|-------|-----------|---------|
| **Frontend** | React 18 | UI framework |
| | TypeScript | Type safety |
| | Vite | Build tool |
| | React Router | Routing |
| | Axios | HTTP client |
| | Tailwind CSS | Styling |
| **Backend** | Node.js + Express | Server |
| | TypeScript | Type safety |
| | Prisma | ORM |
| | PostgreSQL | Database |
| | JWT | Authentication |
| | Zod | Validation |
| **DevOps** | Git | Version control |
| | npm | Package management |
| | ESLint/Biome | Code quality |

---

## 💡 Why This Architecture?

✅ **Scalable**: Clear separation enables independent scaling  
✅ **Maintainable**: Each file has a single, clear responsibility  
✅ **Testable**: Layers can be tested in isolation  
✅ **Team-Friendly**: Multiple developers work without conflicts  
✅ **Production-Ready**: Security, error handling, logging built-in  
✅ **Type-Safe**: TypeScript catches bugs before runtime  
✅ **Industry Standard**: Follows best practices from top companies  

---

## 🤝 Contributing

1. Create feature branch: `git checkout -b feature/name`
2. Follow folder structure conventions
3. Add tests for new features
4. Update documentation
5. Submit pull request

---

## 📞 Support

- **Documentation**: See `docs/` folder
- **Issues**: Check existing issues or create new one
- **Questions**: Review architecture docs first

---

## 📄 License

[Your License Here]

---

**Built with ❤️ using modern web technologies**

🎉 **Happy coding!**