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:

git clone <repository-url>
cd Spanglish

2. Install dependencies:

npm install

3. Set up environment variables:

# Backend
cp backend/.env.example backend/.env
# Edit backend/.env with your settings

4. Initialize the database:

npm run db:migrate

5. Start the development servers:

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:

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:

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