RVU Fest Website

A production-ready static fest website for RV University built with Next.js 14, React, TypeScript, and Tailwind CSS.

Features

• 🎨 Premium Dark Theme - RVU brand colors with gold accents
• 📱 Mobile-First & Responsive - Optimized for all devices
• ⚡ Fast & Lightweight - Static generation for optimal performance
• 🎭 Scroll Animations - Native CSS + IntersectionObserver (no animation libraries)
• ♿ Accessible - Respects prefers-reduced-motion and semantic HTML
• 🎫 Ticket System Ready - Structure prepared for Firebase integration

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Fonts: Cantarell (body), Playfair Display (headings) via next/font/google

Brand Colors

• Primary Navy: rgb(35, 48, 57)
• Accent Gold: rgb(215, 172, 84)
• Neutral Dark: rgb(55, 52, 53)
• Background: Near-black/black
• Text: Gold
• Subtext: Muted gold/gray

Getting Started

Prerequisites

• Node.js 18+ installed
• npm, yarn, or pnpm package manager

Installation

1. Clone the repository or navigate to the project directory:

cd fest

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

Build for Production

npm run build
npm start

Project Structure

fest/
├── app/                      # Next.js App Router pages
│   ├── layout.tsx           # Root layout with fonts
│   ├── page.tsx             # Home page
│   ├── globals.css          # Global styles and Tailwind
│   ├── events/              # Events page (placeholder)
│   ├── register/            # Registration page (placeholder)
│   └── tickets/             # Tickets page with QR placeholder
├── components/              # React components
│   ├── sections/           # Home page sections
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Highlights.tsx
│   │   ├── EventsPreview.tsx
│   │   ├── SchedulePreview.tsx
│   │   ├── Sponsors.tsx
│   │   ├── GalleryPreview.tsx
│   │   ├── FAQs.tsx
│   │   └── Contact.tsx
│   ├── Navbar.tsx          # Sticky navigation
│   ├── Footer.tsx          # Site footer
│   └── Section.tsx         # Reusable section wrapper with reveal animation
├── hooks/                  # Custom React hooks
│   └── useRevealOnScroll.ts  # IntersectionObserver hook for scroll animations
├── lib/                    # Utility functions
│   └── tickets/            # Ticket system placeholders
│       └── index.ts        # Future Firebase integration functions
└── public/                 # Static assets (images, etc.)

Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub, GitLab, or Bitbucket
2. Import your repository on Vercel
3. Vercel will automatically detect Next.js and configure settings
4. Click "Deploy"

Or use Vercel CLI:

npm i -g vercel
vercel

Deploy to Netlify

1. Build the project:

npm run build

2. Set up on Netlify:
   • Build command: npm run build
   • Publish directory: .next
   • Framework preset: Next.js

Or use Netlify CLI:

npm i -g netlify-cli
netlify deploy --prod

Environment Variables (Future Firebase Integration)

When ready to integrate Firebase for ticketing, create a .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

Add these variables in your deployment platform:

• Vercel: Project Settings → Environment Variables
• Netlify: Site Settings → Build & Deploy → Environment Variables

Customization

Updating Content

• Home page sections: Edit files in components/sections/
• Events data: Update events array in components/sections/EventsPreview.tsx
• Schedule: Modify schedule array in components/sections/SchedulePreview.tsx
• Sponsors: Update sponsors array in components/sections/Sponsors.tsx
• FAQs: Edit faqs array in components/sections/FAQs.tsx

Styling

• Colors: Update tailwind.config.ts and CSS variables in app/globals.css
• Fonts: Modify font imports in app/layout.tsx
• Spacing/Layout: Adjust Tailwind classes directly in components

Adding Images

1. Place images in public/ directory
2. Use Next.js Image component (currently using placeholders):

import Image from 'next/image'
<Image src="/path/to/image.jpg" alt="Description" width={400} height={300} />

Future Enhancements (Ticket System)

The project structure is prepared for Firebase integration:

1. Firebase Setup:

   • Install Firebase SDK: npm install firebase
   • Initialize Firebase in lib/firebase/config.ts
   • Set up Firestore collections for tickets and users

2. Implement Ticket Functions:

   • Complete lib/tickets/index.ts with real Firebase functions
   • Add Cloud Functions for server-side ticket signing
   • Implement QR code generation using a library like qrcode

3. Update Ticket Page:

   • Connect /app/tickets/page.tsx to Firebase
   • Fetch real user tickets from Firestore
   • Generate actual QR codes

Development Guidelines

• No Animation Libraries: Use native CSS transitions + IntersectionObserver only
• Mobile-First: Design for mobile, enhance for desktop
• Accessibility: Use semantic HTML, ARIA labels, respect reduced motion
• Performance: Optimize images, use Next.js Image component
• Code Style: Follow TypeScript best practices, use functional components

Linting & Type Checking

npm run lint

License

© 2024 RV University. All rights reserved.