🎉 Antwerp Student Events (ASE) Platform

A modern, mobile-first web platform for discovering student events in Antwerp. Built with Next.js, React, and Tailwind CSS.

📋 Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
• Database Setup
• API Reference
• Future Enhancements
• Deployment

✨ Features

Current Features

• ✅ Event Feed - Browse events in a clean, card-based layout
• ✅ Filtering & Search - Filter by category, date, price, and search by keyword
• ✅ Event Details - Full event page with date, location, organizer info
• ✅ Event Submission - Associations can submit events for approval
• ✅ Admin Panel - Review and approve/reject event submissions
• ✅ Mobile-First Design - Responsive design optimized for all devices
• ✅ Modern UI - Clean aesthetic inspired by Apple/Airbnb

Planned Features (Future)

• 🔄 User authentication & personal accounts
• 🔄 Save/favorite events for later
• 🔄 Personal calendar view
• 🔄 Trending events algorithm
• 🔄 Map integration (Google Maps)
• 🔄 Ticket system integration
• 🔄 Social sharing (comments, ratings)
• 🔄 Email notifications
• 🔄 Real-time updates

🛠️ Tech Stack

Category	Technology
Frontend	Next.js 14+, React 18, TypeScript
Styling	Tailwind CSS 3
Backend	Next.js API Routes
Database	Supabase (PostgreSQL) - Ready to integrate
Authentication	Supabase Auth - Ready to integrate
File Storage	Supabase Storage - Ready to integrate
Deployment	Vercel

📁 Project Structure

ase-platform/
├── app/
│   ├── layout.tsx                 # Root layout
│   ├── page.tsx                   # Homepage (event feed)
│   ├── events/
│   │   └── [id]/
│   │       └── page.tsx           # Event detail page
│   ├── submit/
│   │   └── page.tsx               # Event submission form
│   ├── admin/
│   │   └── page.tsx               # Admin panel
│   └── api/
│       ├── events/
│       │   ├── route.ts           # GET events, POST new event
│       │   └── [id]/route.ts      # GET single event
│       ├── submissions/
│       │   ├── route.ts           # GET & POST submissions
│       │   └── [id]/route.ts      # PATCH & DELETE submission
│       └── categories/
│           └── route.ts           # GET categories
├── components/
│   ├── EventCard.tsx              # Reusable event card
│   ├── EventGrid.tsx              # Grid layout for events
│   ├── EventDetail.tsx            # Detailed event view
│   ├── FilterBar.tsx              # Filters & search
│   ├── SubmissionForm.tsx         # Event submission form
│   ├── AdminTable.tsx             # Admin submissions table
│   ├── Header.tsx                 # Navigation header
│   └── Footer.tsx                 # Footer
├── lib/
│   ├── types.ts                   # TypeScript type definitions
│   ├── constants.ts               # Constants & categories
│   ├── api.ts                     # API client functions
│   └── supabase.ts                # Supabase client *
├── styles/
│   └── globals.css                # Global styles & utilities
├── public/                        # Static assets
├── package.json
├── tailwind.config.js
├── next.config.js
└── tsconfig.json

*Ready for Supabase integration

🚀 Getting Started

Prerequisites

• Node.js 18+ (recommended 20+)
• npm or yarn
• Git

Installation

1. Clone or set up the project:

cd ase-platform
npm install

2. Set up environment variables:

cp .env.local.example .env.local

Edit .env.local and add:

# Supabase (optional - mock data works for now)
NEXT_PUBLIC_SUPABASE_URL=your_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key
SUPABASE_SERVICE_ROLE_KEY=your_role_key

# Admin
ADMIN_PASSWORD=your_secure_password

3. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Development Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run TypeScript type checking
npm run type-check

# Run linter
npm run lint

💾 Database Setup

Using Supabase (Recommended)

1. Create a Supabase Project:

   • Go to supabase.com
   • Click "New Project"
   • Fill in project details and create

2. Create Tables:

Copy and run these SQL queries in Supabase SQL Editor:

-- Events Table
CREATE TABLE events (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT,
  image_url TEXT,
  category TEXT NOT NULL,
  date TIMESTAMP NOT NULL,
  location TEXT NOT NULL,
  price DECIMAL(10,2),
  organizer TEXT NOT NULL,
  organizer_instagram TEXT,
  ticket_url TEXT,
  created_at TIMESTAMP DEFAULT now(),
  updated_at TIMESTAMP DEFAULT now(),
  status TEXT DEFAULT 'published',
  CONSTRAINT status_check CHECK (status IN ('published', 'draft', 'archived'))
);

-- Submissions Table
CREATE TABLE submissions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  event_id UUID REFERENCES events(id) ON DELETE SET NULL,
  title TEXT NOT NULL,
  description TEXT,
  image_url TEXT,
  category TEXT NOT NULL,
  date TIMESTAMP NOT NULL,
  location TEXT NOT NULL,
  price DECIMAL(10,2),
  organizer TEXT NOT NULL,
  organizer_contact TEXT NOT NULL,
  organizer_instagram TEXT,
  ticket_url TEXT,
  status TEXT DEFAULT 'pending',
  admin_notes TEXT,
  created_at TIMESTAMP DEFAULT now(),
  CONSTRAINT status_check CHECK (status IN ('pending', 'approved', 'rejected'))
);

-- Categories Table
CREATE TABLE categories (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL UNIQUE,
  icon TEXT,
  color TEXT
);

-- Indexes
CREATE INDEX idx_events_category ON events(category);
CREATE INDEX idx_events_date ON events(date);
CREATE INDEX idx_events_status ON events(status);
CREATE INDEX idx_submissions_status ON submissions(status);
CREATE INDEX idx_submissions_date ON submissions(date);

-- Enable Row Level Security (RLS)
ALTER TABLE events ENABLE ROW LEVEL SECURITY;
ALTER TABLE submissions ENABLE ROW LEVEL SECURITY;

-- Public can read published events
CREATE POLICY "Public read published events" ON events
  FOR SELECT USING (status = 'published');

-- Only admins can read submissions (add auth later)
-- For now, submissions are protected by password

3. Update Environment Variables:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

4. Initialize Supabase in Code:

The project has lib/supabase.ts ready. Just uncomment and use it in API routes:

import { supabase, supabaseAdmin } from '@/lib/supabase'

// Fetch events
const { data, error } = await supabase
  .from('events')
  .select('*')
  .eq('status', 'published')

🔌 API Reference

Events

GET /api/events - Fetch events with filters

curl "http://localhost:3000/api/events?category=party&priceRange=free&dateRange=week"

Query Parameters:

• category - Filter by category (party, sports, culture, etc.)
• dateRange - today, week, month, upcoming
• priceRange - free, paid, all
• search - Search by title, description, location

Response:

{
  "success": true,
  "data": [...],
  "total": 10,
  "page": 1,
  "pageSize": 10
}

GET /api/events/:id - Fetch single event

curl "http://localhost:3000/api/events/event-id"

Submissions

POST /api/submissions - Submit new event

curl -X POST http://localhost:3000/api/submissions \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Event Title",
    "description": "Description",
    "category": "party",
    "date": "2024-12-25T20:00:00Z",
    "location": "Antwerp",
    "price": 5,
    "organizer": "My Association",
    "organizerContact": "email@example.com"
  }'

GET /api/submissions - Get pending submissions (admin only)

curl -H "Authorization: Bearer admin_password" \
  http://localhost:3000/api/submissions

PATCH /api/submissions/:id - Approve/reject submission

curl -X PATCH http://localhost:3000/api/submissions/sub-id \
  -H "Authorization: Bearer admin_password" \
  -H "Content-Type: application/json" \
  -d '{"status": "approved"}'

🎨 Design System

Colors

• Primary: #0066FF (Bright Blue)
• Secondary: #FF6B6B (Coral)
• Background: #FAFAFA (Off-white)
• Text: #1a1a1a (Dark)
• Border: #E0E0E0 (Light Gray)

Typography

• Font: Inter (sans-serif)
• Sizes: 12px, 14px, 16px, 18px, 24px, 32px
• Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)

Components

• Cards with soft shadows and rounded corners
• Smooth transitions and hover effects
• Responsive grid layouts
• Mobile-first design

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push to GitHub:

git init
git add .
git commit -m "Initial commit"
git push origin main

2. Deploy on Vercel:
   • Go to vercel.com
   • Click "New Project"
   • Import the GitHub repository
   • Add environment variables
   • Click "Deploy"

Manual Deployment

# Build
npm run build

# Start production server
npm start

🔮 Future Enhancements

Phase 2: Authentication & Users

• User registration/login
• User profiles
• Save/favorite events
• Personal calendar

Phase 3: Social & Engagement

• Event comments and ratings
• User-to-user messaging
• Social sharing integration
• Trending events algorithm

Phase 4: Admin & Analytics

• Advanced admin dashboard
• Event statistics
• Email notifications
• Email verification for submissions

Phase 5: Advanced Features

• Google Maps integration
• Real-time notifications (WebSockets)
• Ticketing system
• Multi-language support
• Dark mode

Phase 6: Mobile App

• React Native mobile app
• Push notifications
• Offline support

📝 API Integration Guide

To connect this to Supabase, follow these steps in each API route:

// Before (Mock)
const mockEvents = [...]
return mockEvents

// After (Supabase)
import { supabase } from '@/lib/supabase'

const { data, error } = await supabase
  .from('events')
  .select('*')
  .eq('status', 'published')
  .order('date', { ascending: true })

if (error) throw error
return data

🤝 Contributing

This is a demonstration project. To extend it:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

📞 Support

For questions or issues:

• Email: info@ase-platform.com
• Instagram: @antwerp_student_events
• GitHub Issues: [Create an issue]

---

Made with 💙 for Antwerp Students