TEDxIUE Website

TEDxIzmirUniversityOfEconomics official website built with MERN stack, featuring an interactive compass game landing page and comprehensive admin dashboard.

🎯 Features

Public Features

• Interactive Game Landing: 2D compass game with theme integration
• Responsive Design: Optimized for desktop, tablet, and mobile
• Event Information: About, speakers, schedule, team, sponsors
• Contact System: Contact forms and information
• Interactive Maps: Google Maps integration for campus location

Admin Features

• Secure Authentication: JWT-based login system
• Content Management: CRUD operations for all content types
• Media Management: Image uploads and file handling
• Role-based Access: Admin and moderator permissions

Game System

• One-time Experience: Users play compass game once per device
• Theme Integration: "Compass" theme guides navigation
• Smooth Transitions: Seamless flow to main website

🏗️ Project Structure

TEDxIUE/
├── client/                 # React frontend
│   ├── src/
│   │   ├── pages/         # Route components
│   │   ├── components/    # Reusable UI components
│   │   ├── game/         # 2D compass game
│   │   ├── contexts/     # React contexts
│   │   ├── hooks/        # Custom hooks
│   │   └── utils/        # Utility functions
│   └── public/           # Static assets
├── server/                # Express backend
│   ├── models/           # MongoDB schemas
│   ├── routes/           # API endpoints
│   ├── middleware/       # Custom middleware
│   ├── config/           # Database config
│   └── controllers/      # Business logic
└── package.json          # Root dependencies

🚀 Quick Start

Prerequisites

• Node.js (v18+)
• MongoDB (local or Atlas)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd TEDxIUE

2. Install dependencies

   npm install

3. Set up environment variables

   Create .env in server directory:

   MONGODB_URI=mongodb://localhost:27017/tedxiue
   JWT_SECRET=your-super-secret-jwt-key
   NODE_ENV=development
   PORT=5000

4. Start development servers

   npm start

   This runs both client (port 5173) and server (port 5000) concurrently.

Individual Services

# Frontend only
cd client && npm run dev

# Backend only
cd server && npm run dev

# Build frontend
cd client && npm run build

🗄️ Database Models

Core Models

• User: Admin authentication and roles
• Sponsor: Company sponsors with tiers (Platinum, Gold, Silver, Bronze)
• TeamMember: Team members organized by departments
• Speaker: Event speakers with talk information
• ScheduleItem: Event timeline with speaker references
• Event: Main event configuration and details

Key Features

• Indexed fields for performance
• Soft deletes with isActive flags
• Populated references for related data
• Automatic timestamps

🔐 Authentication System

Admin Access

• No public registration
• Admins manually added to database
• JWT tokens with 24-hour expiration
• Role-based permissions (admin/moderator)

Creating Initial Admin (Development)

POST /api/auth/create-admin
Content-Type: application/json

{
  "name": "Admin Name",
  "email": "admin@tedxiue.com",
  "password": "securepassword"
}

🌐 API Endpoints

Public Routes

GET  /api/sponsors           # Active sponsors by tier
GET  /api/team               # Active team members
GET  /api/speakers           # Active speakers
GET  /api/schedule           # Event schedule
GET  /api/content/event      # Event information
GET  /api/content/about      # About page content

Protected Routes (Admin)

POST   /api/auth/login       # Admin login
GET    /api/auth/verify      # Token verification

POST   /api/sponsors         # Create sponsor
PUT    /api/sponsors/:id     # Update sponsor
DELETE /api/sponsors/:id     # Delete sponsor

POST   /api/team             # Create team member
PUT    /api/team/:id         # Update team member
DELETE /api/team/:id         # Delete team member

# Similar CRUD operations for speakers, schedule

🎮 Game Integration

Compass Game Features

• Canvas-based 2D graphics
• Mouse movement interaction
• Progress tracking
• Completion detection
• Local storage persistence

Implementation

// Game completion tracking
localStorage.setItem('tedx-game-completed', 'true');

// One-time experience check
const hasPlayedGame = localStorage.getItem('tedx-game-completed');

📋 Available Scripts

Root Level

npm start          # Start both client and server
npm install        # Install all dependencies

Client

npm run dev        # Start Vite dev server
npm run build      # Build for production
npm run preview    # Preview production build
npm run lint       # Run ESLint

Server

npm start          # Start production server
npm run dev        # Start with nodemon

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚠️ Project Status: Cancelled / Open Source

This TEDx event was unfortunately cancelled due to budgetary constraints and management issues. However, I still wanted to share this project publicly in case it's useful to anyone organizing their own TEDx or similar event. Feel free to use, modify, and adapt this code however you'd like – it's MIT licensed.

The project is nearly complete but wasn't fully finished before cancellation. Most features work, but some things like analytics dashboards and a few admin refinements were still in progress.

---

A full-stack event website built for TEDx Izmir University of Economics, featuring an interactive compass-themed landing game, a comprehensive admin dashboard, and all the pages you'd expect for an event site (speakers, schedule, team, sponsors, contact, etc.).

What's Inside

This is a MERN stack application (MongoDB, Express, React, Node.js) with:

For Visitors:

• An interactive 2D "compass" game that plays once per device before showing the main site
• Event info pages: About, Speakers, Schedule, Team, Sponsors, Gallery
• Contact form with backend storage
• Google Maps integration for venue location
• Mobile-responsive design throughout

For Admins:

• JWT-based authentication (no public signup – admins are created manually)
• Full CRUD management for speakers, sponsors, team members, schedule items, FAQs
• Image uploads for speakers, sponsors, team photos, gallery
• Site content and links management
• Basic analytics tracking (page views, button clicks, etc.)

Tech Stack

Frontend:

• React 19 with Vite
• Tailwind CSS 3.4 with custom TEDx-themed utilities
• React Router for navigation
• Chart.js / Recharts for analytics visualization

Backend:

• Express 5 with Node.js
• MongoDB with Mongoose 8
• JWT for auth
• Multer for file uploads

Getting Started

What You Need

• Node.js v18 or higher
• MongoDB (local installation or a free MongoDB Atlas cluster)
• npm

Setup

1. Clone this repo and install dependencies:

   git clone <your-fork-url>
   cd TEDxIUE
   npm run install-all

2. Create the server environment file:

   cp server/.env.example server/.env

   Then edit server/.env with your MongoDB URI and a JWT secret:

   MONGODB_URI=mongodb://localhost:27017/tedxiue
   JWT_SECRET=pick-something-long-and-random
   PORT=5000
   NODE_ENV=development

3. Start both servers:

   npm run dev

   This runs the backend on port 5000 and the React dev server on port 5173. The frontend proxies API requests to the backend automatically.

4. Visit http://localhost:5173 – you'll see the compass game first, then the main site.

Creating an Admin User

There's a setup script for this:

cd server
node mock/setup-admin.js

Or you can hit the endpoint directly in development:

curl -X POST http://localhost:5000/api/auth/create-admin \
  -H "Content-Type: application/json" \
  -d '{"name":"Your Name","email":"admin@example.com","password":"yourpassword"}'

Then log in at /login to access the admin dashboard.

Project Structure

TEDxIUE/
├── client/                    # React frontend
│   ├── src/
│   │   ├── components/        # UI components
│   │   │   ├── admin/         # Admin dashboard panels
│   │   │   ├── cards/         # Speaker, sponsor, schedule cards
│   │   │   ├── event/         # Event-specific components
│   │   │   ├── game/          # Compass game engine
│   │   │   ├── layout/        # Header, footer, hero
│   │   │   └── ui/            # Shared UI elements
│   │   ├── constants/         # Turkish text constants
│   │   ├── contexts/          # React contexts (auth, toast, analytics)
│   │   ├── hooks/             # Custom hooks
│   │   └── pages/             # Route pages
│   └── public/                # Static assets
│
├── server/                    # Express backend
│   ├── config/                # Database config
│   ├── controllers/           # Business logic
│   ├── middleware/            # Auth, uploads, error handling
│   ├── models/                # Mongoose schemas
│   ├── routes/                # API endpoints
│   └── uploads/               # Uploaded images (gitignored)
│
└── package.json               # Root scripts

API Overview

All routes are under /api. Public routes return data for visitors; protected routes require a JWT token in the Authorization: Bearer <token> header.

Route	Public	Description
/api/health	✓	Health check
/api/sponsors	✓	List sponsors by tier
/api/speakers	✓	List speakers
/api/schedule	✓	Event schedule
/api/team	✓	Team members by department
/api/faq	✓	FAQs
/api/event	✓	Event details
/api/content/*	✓	Page content (about, home)
/api/gallery	✓	Gallery photos
/api/links	✓	Social media links
/api/contact	✓	Submit contact form
/api/auth/*	Admin	Login, verify token
/api/*/admin/*	Admin	CRUD operations

The Compass Game

The landing page features a canvas-based 2D game where visitors guide a ship to a lighthouse using their cursor. It's designed as a one-time experience – once completed, the game state is saved to localStorage and visitors go straight to the home page on return visits.

The game code lives in client/src/components/game/ with separate modules for the ship, ocean, lighthouse, seagulls, and island.

Turkish Content

Since this was for an event in Turkey, most user-facing text is in Turkish. Text strings are centralized in:

• client/src/constants/turkishTexts.js (frontend)
• server/constants/turkishTexts.js (backend error messages)

If you're adapting this for a different language, those are the files to update.

What's Not Finished

A few things were still in progress when the event was cancelled:

• Analytics dashboard has the scaffolding but needs more work
• Some admin UI polish and validation
• Email notifications for contact form submissions
• Production deployment configs for AWS (S3, CloudFront, etc.)

License

MIT – do whatever you want with it. If you build something cool for your own TEDx event, I'd love to hear about it.