# Spanglish - Language Exchange Event Platform

A full-stack web application for organizing and managing language exchange events in Asunción, Paraguay.

## Features

### Public Website
- **Homepage** - Hero section with next event, about section, newsletter signup
- **Events** - Browse upcoming and past events, view event details
- **Booking** - Book tickets for events with payment options
- **Community** - WhatsApp and social media links, community guidelines
- **Contact** - Contact form for inquiries
- **Multi-language** - English and Spanish support with easy extensibility

### Admin Dashboard (`/admin`)
- **Dashboard** - Overview stats, alerts, quick actions
- **Events** - Create, edit, publish, and manage events
- **Tickets** - View bookings, check-in attendees, manage ticket status
- **Users** - Manage user accounts and roles
- **Payments** - View and confirm payments, process refunds
- **Messages** - View and respond to contact form submissions

### API
- **API Docs** - Swagger UI at `/api-docs`
- **OpenAPI Spec** - JSON specification at `/openapi.json`
- Full REST API with JWT authentication

## Tech Stack

### Backend
- **Runtime**: Node.js with TypeScript
- **Framework**: Hono (fast, lightweight)
- **Database**: SQLite (default) or PostgreSQL
- **ORM**: Drizzle ORM
- **Authentication**: JWT with bcrypt password hashing
- **API Documentation**: OpenAPI 3.0 / Swagger UI

### Frontend
- **Framework**: Next.js 14 (App Router)
- **Styling**: Tailwind CSS
- **Icons**: Heroicons
- **State Management**: React Context
- **HTTP Client**: SWR / Fetch API
- **Notifications**: React Hot Toast

## Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd Spanglish
```

2. Install dependencies:
```bash
npm install
```

3. Set up environment variables:
```bash
# Backend
cp backend/.env.example backend/.env
# Edit backend/.env with your settings
```

4. Initialize the database:
```bash
npm run db:migrate
```

5. Start the development servers:
```bash
npm run dev
```

The application will be available at:
- Frontend: http://localhost:3002
- Backend API: http://localhost:3001
- API Docs: http://localhost:3001/api-docs

### First User = Admin

The first user to register becomes the admin. Register at `/register` to create the admin account.

## Database Configuration

### SQLite (Default)
No additional configuration needed. Database file is created at `backend/data/spanglish.db`.

### PostgreSQL
Update `backend/.env`:
```env
DB_TYPE=postgres
DATABASE_URL=postgresql://user:password@localhost:5432/spanglish
```

## Project Structure

```
Spanglish/
├── backend/
│   ├── src/
│   │   ├── db/           # Database schema and migrations
│   │   ├── lib/          # Utilities (auth, helpers)
│   │   ├── routes/       # API routes
│   │   └── index.ts      # Server entry point
│   └── drizzle.config.ts
├── frontend/
│   ├── src/
│   │   ├── app/          # Next.js pages
│   │   │   ├── (public)/ # Public pages
│   │   │   └── admin/    # Admin dashboard
│   │   ├── components/   # React components
│   │   ├── context/      # React contexts
│   │   ├── i18n/         # Internationalization
│   │   └── lib/          # API client, utilities
│   └── tailwind.config.js
└── package.json          # Monorepo workspace config
```

## Adding New Languages

The i18n system is designed for easy extensibility:

1. Create a new locale file at `frontend/src/i18n/locales/{code}.json`
2. Copy structure from `en.json` and translate
3. Update `frontend/src/i18n/index.ts`:

```typescript
import pt from './locales/pt.json';

export type Locale = 'en' | 'es' | 'pt';

export const locales: Record<Locale, typeof en> = {
  en,
  es,
  pt, // Add new locale
};

export const localeNames: Record<Locale, string> = {
  en: 'English',
  es: 'Español',
  pt: 'Português', // Add display name
};

export const localeFlags: Record<Locale, string> = {
  en: '🇺🇸',
  es: '🇪🇸',
  pt: '🇧🇷', // Add flag
};
```

## API Endpoints

### Authentication
- `POST /api/auth/register` - Register new user
- `POST /api/auth/login` - Login
- `GET /api/auth/me` - Get current user

### Events
- `GET /api/events` - List events
- `GET /api/events/:id` - Get event
- `POST /api/events` - Create event (admin)
- `PUT /api/events/:id` - Update event (admin)
- `DELETE /api/events/:id` - Delete event (admin)

### Tickets
- `POST /api/tickets` - Book ticket
- `GET /api/tickets/:id` - Get ticket
- `POST /api/tickets/:id/checkin` - Check in (staff)

### Users
- `GET /api/users` - List users (admin)
- `PUT /api/users/:id` - Update user

### Payments
- `GET /api/payments` - List payments (admin)
- `PUT /api/payments/:id` - Update payment status
- `POST /api/payments/:id/refund` - Process refund

### Contacts
- `POST /api/contacts` - Submit contact form
- `POST /api/contacts/subscribe` - Subscribe to newsletter

## User Roles

- **admin** - Full access to all features
- **organizer** - Manage events, tickets, view payments
- **staff** - Check-in attendees, view ticket info
- **marketing** - Access to subscriber lists, analytics
- **user** - Public user, can book events

## Brand Colors

- Primary Yellow: `#FFD84D`
- Primary Dark: `#111111`
- Primary White: `#FFFFFF`
- Secondary Gray: `#F5F5F5`
- Accent Blue: `#2F80ED`

## License

MIT