thunder-thursday

Thunder Thursday is the official event website for Thunder Thursday, providing participants with event information, schedules, galleries, and a seamless online experience powered by React, Vite, and Firebase.

Comment

Thunder Thursday⚡

Thunder Thursday is the official digital platform developed to support the Thunder Thursday event. The platform provides students with a seamless experience for event registrations, slot booking, voting, feedback, announcements, and event updates through a modern and responsive interface.

Built with React, Vite, and Firebase, the application is designed to deliver a fast, secure, and scalable experience across desktop and mobile devices while maintaining excellent performance and usability.

🌐 Live Website

https://thunder-thursday.vercel.app/

✨ Features

  • 🎉 Event information and announcements
  • 📝 Student event registrations
  • 📅 Slot booking system
  • ⭐ Real-time voting
  • 💬 Feedback collection
  • 🖼️ Event gallery
  • 🔐 Firebase Authentication
  • ☁️ Cloud Firestore integration
  • 📱 Fully responsive design
  • ⚡ Optimized loading performance

🛠️ Tech Stack

Frontend

  • React
  • Vite
  • JavaScript
  • HTML5
  • CSS3

Backend & Cloud

  • Firebase Authentication
  • Cloud Firestore
  • Vercel

Tools

  • Git
  • GitHub
  • Visual Studio Code
  • Antigravity

📁 Project Structure

thunder-thursday/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── assets/
│   ├── hooks/
│   ├── context/
│   └── ...
├── Images/
├── firebase.json
├── firestore.rules
├── package.json
└── README.md

🚀 Getting Started

Clone the Repository

git clone https://github.com/SP-1512/thunder-thursday.git

Navigate to the Project

cd thunder-thursday

Install Dependencies

npm install

Start the Development Server

npm run dev

📸 Screenshots

Add screenshots of:

  • Home Page

  • screencapture-thunder-thursday-vercel-app-2026-07-30-15_06_26

  • Event Registration

  • screencapture-thunder-thursday-vercel-app-2026-07-30-15_06_48 screencapture-thunder-thursday-vercel-app-2026-07-30-15_07_12

  • Slot Booking

  • screencapture-thunder-thursday-vercel-app-2026-07-30-15_07_37

  • Voting

  • screencapture-thunder-thursday-vercel-app-2026-07-30-15_08_24

  • Gallery

  • screencapture-thunder-thursday-vercel-app-2026-07-30-15_09_47

  • Creator PAge

  • image

  • Mobile View Screenshot_2026-07-30-15-10-45-60_40deb401b9ffe8e1df2f1cc5ba480b12 jpg

👥 Development Team

This project was collaboratively developed by a team of three members, with each member contributing to different aspects of the platform.

💻 My Contributions

As one of the core developers of Thunder Thursday, I was responsible for the complete web portal development, UI/UX implementation, Firebase integration, and performance optimization.

🎨 UI/UX Design

  • Designed the premium dark and gold visual identity.
  • Created intuitive layouts for onboarding, registrations, voting, and event updates.
  • Improved the user experience for both desktop and mobile devices.

🌐 Web Portal Development

  • Built the responsive React application from the ground up.
  • Integrated Firebase Authentication and Cloud Firestore.
  • Developed registration, slot booking, voting, and feedback modules.
  • Ensured a consistent experience across multiple screen sizes.

⚡ Performance Optimization

  • Reduced the primary logo asset size by 58%, improving Largest Contentful Paint (LCP).
  • Implemented a lightweight CSS-only splash screen, reducing First Contentful Paint (FCP) to under 0.2 seconds.
  • Optimized the mobile navigation drawer using hardware-accelerated CSS transforms, reducing Interaction to Next Paint (INP) to under 50 ms.
  • Refactored the voting module into an isolated child component to eliminate unnecessary parent re-renders and improve responsiveness.

🔥 Firebase & Database Engineering

  • Implemented client-side synchronization to ensure slot bookings are correctly linked to Firebase Authentication user IDs.
  • Developed a group synchronization system that stores shared team information using group_id, team_leader, and team_name for clean data management and Excel exports.

📈 Performance Highlights

  • ⚡ FCP optimized to < 0.2s
  • ⚡ INP optimized to < 50ms
  • 📦 Main logo optimized by 58%
  • 📱 Mobile-first responsive design
  • ☁️ Firebase-powered backend
  • 🚀 Optimized React application

🤝 Contributing

Contributions, suggestions, and feedback are always welcome.

If you find any issues or have ideas for improvements, feel free to open an issue or submit a pull request.

👨‍💻 Author

Sriram Pinninti

⭐ If you found this project useful, consider giving it a star.

Built With

Share this project:

Updates