DEV Community

Abhishek Gupta
Abhishek Gupta

Posted on

Building the Calcutta <Hacks/> Hackathon Website: A Journey of Performance and Collaboration

🌐 Live Website: https://calcuttahacks.xyz
🎥 Project Walkthrough: https://youtu.be/u8kNGTQDq4o?si=Z5gqX564_YBYIacr

🌱 Introduction: From Sharing to Real Opportunities

I’ve always believed in one simple principle:

Build in public. Share everything. Learn faster.

By consistently sharing my learning journey—projects, mistakes, and improvements—I started connecting with real developers and communities.

That’s how I got introduced to Apex Circle, a developer community organizing hackathons and tech events.

Soon after joining, I got my first real responsibility:

👉 Build the official website for Calcutta <Hacks/>

Not a practice project.
Not a clone.

A real product, for real users, under real pressure.

🎯 The Problem: This Was Not Just “Another Website”

This wasn’t about making a landing page.

The website needed to:

  • Handle traffic spikes during live events
  • Deliver fast load times even on slow networks
  • Provide smooth UX across all devices
  • Present clear and structured event information
  • Reflect a modern, high-energy hackathon vibe

⚠️ Performance + UX + Reliability = Non-negotiable

🧠 Step 1: Thinking Before Coding

Before writing a single line of code, I focused on understanding the system.

Key questions I answered:

  • Who are the users? (students, hackers, beginners)
  • What do they need instantly?
  • What can cause friction?
  • What must never break during peak load?

Core sections identified:

  • Hero & branding
  • Event details
  • Registration flow
  • Schedule
  • FAQs
  • Community links

❌ Jumping into coding without clarity
✅ Designing decisions before implementation

🤝 Step 2: Real Collaboration (Not Solo Coding)

This project forced me to work like an actual engineer, not just a coder.

I collaborated with:

  • 🧑‍💼 Organizers → content, deadlines, priorities
  • 🎨 Design inputs → layout, structure, UX
  • 👨‍💻 Developers/community → feedback & testing

What I learned:

  • Communication > Coding speed
  • Feedback loops improve quality
  • Clarity avoids rework

⚙️ Tech Stack & Architectural Decisions

  • React → Component-based architecture
  • Modern JavaScript (ES6+)
  • Focus on performance-first design

It’s not about the stack—it’s about how efficiently you use it.

⚡ Step 3: Performance Optimization (Core Focus)

🧩 Problem

  • Unnecessary re-renders
  • Heavy components
  • Large bundle size

🛠️ Solutions

1. Memoization Strategy

  • useMemo → Avoid expensive recalculations
  • useCallback → Stable function references
  • React.memo → Prevent unnecessary re-renders

👉 Result: ~60% smoother UI performance

2. Code Splitting & Lazy Loading

  • React.lazy() for dynamic imports
  • Suspense for loading fallback

👉 Result:

  • Faster initial load
  • Better mobile performance

3. Component Structuring

  • Small reusable components
  • Clean state management
  • Predictable rendering

📉 Step 4: Load Time Optimization

Problem

Large bundle slows first render

Solution

  • Code splitting
  • Lazy loading
  • Non-blocking UI

👉 Result:

  • Faster FCP
  • Better UX
  • Lower bounce rate

🚧 Challenges & Learnings

Unclear Requirements

→ Solved via frequent communication

Design vs Performance

→ Prioritized essential UI

Team Coordination

→ Structured updates & clarity

Real-world Testing

→ Tested across devices & networks

🧠 Key Takeaways

  • Performance is a feature
  • Optimization must be intentional
  • Real projects teach decision-making
  • Communication is critical
  • Building in public creates opportunities

Top comments (0)