✨ Key Features Implemented

1. Modern, Themed User Interface

• Fully responsive design that works across all devices.
• Dark space aesthetic with subtle nebula effects.
• Core sections including "Home," "About," "Events," "Passes," and a "Space Map."
• Glass-morphism effects for modern depth.

2. Interactive Starfield Background

• Canvas-based particle system with 300+ twinkling stars.
• Stars are attracted to the central logo on the homepage.
• On other pages, stars are repelled by the user's cursor, creating a dynamic experience.

3. Interactive Events Page - Floating Planets

• Each event represented as a 3D-style planet with a revolving, glowing moon.
• Hover interactions trigger glow intensification and orbital ring animations.
• Click to open a detailed event modal with a glassmorphism design.
• "Add to Calendar" feature to download an .ics file for the event.

4. User Authentication & Registration

• Secure Sign-up/Log-in system powered by a Python backend.
• User-specific dashboard to view registered events.
• Themed styling for all authentication forms and buttons.

5. Space Map Navigation System

• Interactive SVG-based galaxy map.
• Venue clusters organized by type (Performance, Technical, Creative).
• Hover effects with pulsing rings and labels.

6. Smooth Animations and Transitions

• Framer Motion powered animations for page transitions and UI elements.
• Floating animations creating a zero-gravity feel.
• Subtle star trail following mouse movement.

---

🚀 Backend Features

The application is powered by a Python backend using the FastAPI framework, providing a robust and scalable foundation for user- and event-related functionalities.

• Authentication: Secure user authentication using JWT (JSON Web Tokens). Passwords are B-scrypt hashed for maximum security.
• Database: SQLite database for lightweight and easy-to-manage data storage. SQLAlchemy is used as the ORM for database interactions.
• API Endpoints:
  • POST /signup: Creates a new user.
  • POST /login: Authenticates a user and provides a JWT token.
  • POST /events/{event_id}/register: Registers the authenticated user for a specific event.
  • GET /users/me/events: Retrieves all events the authenticated user has registered for.

---

🚀 Custom Features

Vibe-Centric Engagement Elements

1. Cosmic Countdown Timer

   • Animated countdown to build anticipation for the festival.
   • Each digit is styled as a glowing celestial body.

2. 3D Event Banners (Implemented via Planet System)

   • Events displayed as interactive 3D planets with revolving moons.
   • Dynamic rotation and hover effects.

3. Interactive Starfield

   • On the homepage, stars are gravitationally pulled toward the central logo.
   • On all other pages, stars are repelled by the user's cursor.

4. Zero-Gravity UI Interactions

   • Buttons levitate on hover.
   • Smooth easing mimicking weightlessness.

---

📁 Project Structure

meraz-intergalactic/
├── backend/
│   ├── routers/
│   │   ├── users.py
│   │   └── events.py
│   ├── main.py
│   ├── database.py
│   ├── models.py
│   ├── schemas.py
│   ├── crud.py
│   ├── auth.py
│   └── requirements.txt
├── public/
│   └── Meraz.png
├── src/
│   ├── components/
│   ├── context/
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

---

🛠️ Technologies Used

Frontend

• React 18 - Component-based architecture
• Framer Motion - Fluid animations and transitions
• Vite - Lightning-fast build tool
• CSS3 - Custom animations and effects
• Canvas API - Starfield particle system

Backend

• Python
• FastAPI - High-performance web framework
• SQLAlchemy - SQL toolkit and Object-Relational Mapper
• SQLite - Lightweight, serverless database
• Passlib & python-jose - For password hashing and JWT authentication

---

📦 Installation & Setup

Prerequisites

• Node.js 16+ and npm/yarn
• Python 3.8+ and pip

Installation Steps

# 1. Install frontend dependencies
npm install

# 2. Install backend dependencies
pip install -r backend/requirements.txt

# 3. Run the full-stack application (frontend and backend)
npm run dev:fullstack

The frontend will be available at http://localhost:3000, and the backend will run at http://127.0.0.1:8000.

---

🎯 Event Data Structure

Events are structured with the following properties:

{
  id: number,
  name: string,
  category: 'Technical' | 'Cultural' | 'Music',
  description: string,
  date: string,
  venue: string,
  contact: string,
  color: string (hex),
  planetSize: 'small' | 'medium' | 'large'
}

---

🎨 Design Choices Explained

1. Why Minimal UI?

To let the cosmic atmosphere and animations take center stage without overwhelming users. Clean interfaces improve focus on content.

2. Why Floating Planets for Events?

Creates a unique, memorable interaction pattern. Users explore events by "traveling" through space, making the experience gamified and engaging.

3. Why Dark Theme?

• Reduces eye strain for long viewing sessions
• Allows neon accents to pop visually
• Creates authentic space atmosphere
• Modern, premium feel

4. Why Canvas for Starfield?

Canvas provides better performance than CSS or DOM-based animations for hundreds of particles. Allows real-time physics calculations.

5. Typography Choices

• Orbitron: Geometric, futuristic - perfect for sci-fi aesthetic
• Space Grotesk: Modern, readable - excellent for body text while maintaining theme

---

🎭 Animation Philosophy

All animations follow these principles:

1. Purposeful - Every animation serves UX or aesthetic function
2. Smooth - Easing curves mimic natural motion
3. Performant - Hardware-accelerated transforms
4. Subtle - Never overwhelming or distracting
5. Zero-gravity - Floating, weightless feel throughout

---

📱 Responsive Design

The website is fully responsive with breakpoints at:

• Desktop: 1024px+
• Tablet: 768px - 1023px
• Mobile: < 768px

Key responsive features:

• Stacked planet layout on mobile
• Bottom-sheet info panel on mobile
• Adjusted typography scales
• Touch-optimized interactions

---

🎪 Event Information

The website currently showcases 6 featured events:

1. Vibe Coding - Technical (Purple)
2. Cosmic Dance - Cultural (Pink)
3. Stellar Beats - Music (Cyan)
4. Quantum Quiz - Technical (Violet)
5. Nebula Art - Cultural (Orange)
6. Robotics Arena - Technical (Emerald)

Each event displays:

• Name & description
• Date & time
• Venue location
• Contact person
• Registration button

---

🗺️ Campus Map Features

The galaxy map organizes venues into three clusters:

• Alpha Cluster (Pink) - Performance Zones
• Beta Cluster (Purple) - Technical Hubs
• Gamma Cluster (Cyan) - Creative Spaces

Interactive features:

• Hover to highlight venues
• Click for detailed information
• Orbital rings indicate active selection
• Smooth SVG animations

---

🚀 Future Enhancements

Potential additions for expanded functionality:

1. User Authentication System

   • Firebase/Auth0 integration
   • Profile dashboards
   • Event registration tracking

2. Live Event Countdown

   • Real-time countdown timers
   • Notification system

3. AI Chatbot Assistant

   • Festival information queries
   • Navigation help
   • Event recommendations

4. Photo Gallery

   • Past festival highlights
   • AI-generated event posters
   • Interactive carousel

5. Sponsor Showcase

   • Rotating sponsor logos
   • Partnership information

6. Registration Forms

   • Integrated event registration
   • Payment gateway
   • Ticket generation

---

🎨 AI Prompting Strategy

This website was created using advanced AI prompting techniques:

Design Prompts Used:

• "Create a minimalist intergalactic theme with cosmic purple and neon pink"
• "Generate smooth zero-gravity floating animations"
• "Design interactive planet elements for event browsing"

Code Generation Approach:

• Structured component-based architecture prompts
• Animation-specific CSS generation
• Performance optimization requests

Asset Generation:

• All visual effects created via code
• Logo integration from provided file
• SVG graphics for scalability

---

📄 License & Credits

Created for: Meraz 2026, IIT Bhilai
Developed by: Data Science & Artificial Intelligence Club
Design Theme: "Where Cultures Orbit"

This project demonstrates the power of AI-assisted development in creating professional, production-ready web experiences.

---

🌟 Highlights

• ✅ 100% AI-generated code
• ✅ Zero external image dependencies (except logo)
• ✅ Fully responsive design
• ✅ Accessible navigation
• ✅ Performance optimized
• ✅ Modern React practices
• ✅ Clean, maintainable code structure

---

📞 Contact

For questions or feedback about this project:

Event Coordinators:

• Vatsal: +91-7983870917 | vatsalyd@iitbhilai.ac.in
• Rudra: +91-9326110119 | rudramd@iitbhilai.ac.in

---

May your code compile and your designs inspire! 🚀✨