Being the member of techincal team of my univerisity I get to work on various projects, and today I want to take you behind the scenes into the world of unpaid but ambitious students banding together to create something remarkable.
The Problem
Picture this: Our team needs to deliver a site so eye-catching, animated, and sleek that sponsors notice us, students want to join us, and the whole college talks about it. But we're not just coding up a simple homepage—we need:
- A dynamic overview that broadcasts the fest’s energy.
- Comprehensive event details, schedules, and highlights.
- User management to track registrations.
But here’s the real kicker
We have to build all this for free. Zero budget.
The Plan
Jugaad: is an Indian English word that refers to a low-cost, innovative solution, often improvised or makeshift, using readily available resources.
Turns out, last year’s site didn’t attract a flood of registrations but the visitors poured in, especially after the instagram / linkedln posts event buzz peaked. With a more energized fresher batch this year, our traffic is set to soar. How do we make sure our site can handle the rush, look gorgeous, and stay free forever?
Here’s How We’ll Do It
1. Design
Yeah we are gonna skip that for this blog but we have decided for now either a minimal theme or a futuristic tech theme
2. Decide tech stack
This is my favourite part
| Technology | Description | Reason |
|---|---|---|
| Bun | Bun is an all-in-one JavaScript runtime & toolkit designed for speed. | It delivers blazing-fast performance and a seamless developer experience, making it ideal for our use case. |
| TypeScript | TypeScript is a strongly typed programming language that builds on JavaScript, giving better tooling at any scale. | No one likes JS. |
| Hono | Fast, lightweight, built on Web Standards. Supports any JavaScript runtime. | Hono is selected as a lightweight, high-performance web framework, allowing fast response times and easy routing with minimal overhead. |
| React + Vite | React is a powerful component-based UI library, and Vite is a fast build tool and development server. | Together, they provide a smooth front-end development experience with rapid hot module reloading and optimized production builds. |
| Drizzle ORM | Drizzle ORM is a modern, lightweight ORM designed for TypeScript with type-safe database querying. | It simplifies managing relational data and ensures compile-time correctness for reliable data layer code. |
| Neon PG | Neon PG offers a serverless PostgreSQL cloud experience with seamless scalability and no server management. | It fits perfectly with our free and scalable backend approach. |
| TanStack Router + Query | TanStack Router provides flexible, declarative routing with full TypeScript support, and TanStack Query manages server state and data fetching efficiently. | Together, they ensure smooth navigation and performant data handling within the app. |
| Gsap | GSAP (GreenSock Animation Platform) is used because it offers high-performance, smooth, and visually appealing animations with an intuitive API that allows precise control over complex sequences and timelines. | It is highly cross-browser compatible, lightweight, and flexible, making it ideal for creating engaging, interactive user experiences that enhance the overall look and feel of the site without compromising performance. |
3. Architecture
The architecture follows a traditional monolithic approach where the backend serves the frontend as static assets along with handling API requests, enabling easy deployment and simplified management.
4. Handling traffic
We are looking for alternatives but at the moment we only have one way to handle this
We are going to use mirrors i.e. We'll have many instances of the same site connected to same db and then we'll use a load balancer to send user to one of those mirrors thats why the monolithic architecture
Will add more blogs sharing the journey follow me on X for getting regular updates