🚀 HYPE CNX

The loudest event feed in the North. Discover events, lifestyle, and unique experiences in Chiang Mai, Thailand.

---

🌐 Live Demo

https:///hypecnx.com/

---

✨ Features

Feature	Description
🗓️ Event Discovery	Browse events by month, category, or search
🗺️ Interactive Map	Leaflet-based map with custom Neo-Brutalist markers
🎨 Neo-Brutalist Design	Bold, modern UI with striking colors and shadows
📱 Fully Responsive	Mobile-first design that works on all devices
🔍 SEO Optimized	Server Components, dynamic metadata, sitemap, robots.txt
♿ Accessible	ARIA labels, keyboard navigation support
⚡ Fast	React Query caching, infinite scroll, optimized images

---

🏗️ Project Structure

CM-EVENTS/
├── frontend/          # Next.js 16 App (React 19)
│   ├── app/           # App Router pages
│   ├── components/    # Reusable UI components
│   ├── hooks/         # React Query hooks
│   ├── lib/           # Utilities, types, API client
│   └── public/        # Static assets
│
├── backend/           # Express.js API
│   ├── src/
│   │   ├── controllers/   # API handlers
│   │   ├── services/      # Business logic + Scraper
│   │   ├── routes/        # Route definitions
│   │   ├── config/        # Database config
│   │   └── utils/         # Helpers
│   └── api/               # Legacy entry point
│
├── docs/               # Documentation
│   ├── API.md              # API endpoints
│   ├── ARCHITECTURE.md    # System architecture
│   ├── DEVELOPMENT.md      # Development guide
│   ├── DEPLOYMENT.md      # Deployment instructions
│   └── ENV.md             # Environment variables
│
└── design/            # Design assets & mockups

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 16 (App Router, React 19)
• Styling: Tailwind CSS 4
• State: React Query (TanStack Query)
• Maps: Leaflet + react-leaflet
• Icons: Lucide React
• Language: TypeScript 5

Backend

• Runtime: Node.js + tsx
• Framework: Express.js 5
• Database: PostgreSQL (Railway)
• Scraper: Cheerio + Axios
• AI: Google Generative AI (for content extraction)

Deployment

• Platform: Railway
• Build: Docker (standalone Next.js output)

---

🚀 Getting Started

Prerequisites

• Node.js 20+
• pnpm (recommended)
• PostgreSQL database

Quick Start

For detailed setup instructions, see Development Guide.

Frontend

cd frontend

# Install dependencies
pnpm install

# Set environment variables
echo "NEXT_PUBLIC_API_URL=http://localhost:8000" > .env.local

# Run development server
pnpm dev

# Build for production
pnpm build

# Deploy to Railway
pnpm deploy

Backend

cd backend

# Install dependencies
pnpm install

# Set environment variables
cp .env.example .env
# Edit .env with your database credentials
# See [ENV.md](docs/ENV.md) for all variables

# Run development server
pnpm dev

# Deploy to Railway
pnpm deploy

---

🌐 API Endpoints

For complete API documentation, see API.md.

Method	Endpoint	Description
GET	/events	List events (with pagination, filters)
GET	/events/:id	Get event by ID with images
GET	/months	Get available months
GET	/categories	Get event categories
GET	/stats	Get event statistics
GET	/search?q=	Search events
GET	/upcoming	Get upcoming events
GET	/map	Get events with GPS coordinates
GET	/scrape/status	Scraper status

---

🎨 Design System

Neo-Brutalist Color Palette

Color	Hex	Usage
Neo Lime	#ccff00	Primary accents, CTAs
Neo Pink	#ff00ff	Highlights, badges
Neo Purple	#9d00ff	Secondary accents
Neo Black	#000000	Text, borders
Neo White	#ffffff	Backgrounds

Typography

• Display: Outfit (headings)
• Sans: Kanit (body text, Thai support)
• Mono: JetBrains Mono (code, labels)

---

📁 Key Files

File	Description
frontend/app/layout.tsx	Root layout with SEO metadata
frontend/components/error-boundary.tsx	Error handling component
frontend/lib/api.ts	API client functions
frontend/hooks/use-events.ts	React Query hooks
backend/src/app.ts	Express app setup
backend/src/services/scraper.service.ts	Event scraper

---

🔧 Scripts

Frontend

pnpm dev      # Start development server
pnpm build    # Build for production
pnpm start    # Start production server
pnpm lint     # Run ESLint
pnpm deploy   # Deploy to Railway

Backend

pnpm dev      # Start with hot reload
pnpm start    # Start production server
pnpm deploy   # Deploy to Railway

---

🚢 Deployment

For detailed deployment instructions, see Deployment Guide.

Both frontend and backend are configured for Railway deployment:

# Frontend
cd frontend && railway up

# Backend
cd backend && railway up

Docker files are included for containerized deployment.

---

📚 Documentation

Document	Description
API Documentation	Complete API reference with all endpoints
Architecture	System architecture, tech stack, data flow
Development Guide	Setup, workflow, best practices
Deployment Guide	Railway, Vercel, AWS deployment
Environment Variables	All required and optional env vars

---

📄 License

MIT © 2025 Hype CNX Team

---

🙏 Acknowledgments

• Event data sourced from CMHY.city
• Icons by Lucide
• Maps by OpenStreetMap