1. Project Overview

Calcutta <Hacks/> is the official website developed for Apex Circle's 24-hour heritage hackathon in Kolkata. The event brought together technology enthusiasts, developers, designers, and innovators to explore the intersection of technology, creativity, and cultural heritage.

The goal was to create a digital platform that communicated the event's identity, presented essential information, and provided participants with a clear and engaging experience.

Rather than building another conventional hackathon landing page, the objective was to create a website that reflected Kolkata's cultural identity while maintaining a modern technology-focused visual language.

I contributed to the Web Team, focusing on frontend development, component architecture, responsive layouts, and the overall user experience.

2. The Problem

Hackathon websites are often treated as simple promotional landing pages. However, an event website needs to do more than look attractive.

Potential participants need to understand the event, discover its purpose, explore important information, and know how to participate without navigating through confusing sections.

The key challenges were:

  • Information Architecture: Presenting event details, schedules, speakers, themes, and participation information in an organized structure.
  • Visual Identity: Representing Kolkata's heritage and cultural identity without compromising the modern technology-focused appearance.
  • User Experience: Making important information easy to discover and understand.
  • Responsive Design: Delivering a consistent experience across mobile, tablet, and desktop devices.
  • Frontend Maintainability: Structuring the codebase so components and sections could be reused and maintained efficiently.

3. The Solution

I contributed to building a responsive, component-driven React website that served as the event's primary digital information platform.

The approach focused on three major areas:

A. Heritage Meets Technology

The visual direction balanced Kolkata's cultural identity with a modern hackathon aesthetic. The intention was to make the event recognizable and visually distinct rather than relying on a generic developer-event template.

B. Structured Information Experience

Event-related information was organized into clearly defined sections, helping visitors understand the event, explore its themes, discover schedules and speakers, and find participation information.

C. Responsive Frontend Architecture

The interface was developed using reusable React components and Tailwind CSS, with attention to consistent styling, responsive behavior, and maintainable code.

4. My Responsibilities

As part of the Apex Circle Web Team, my responsibilities focused on frontend engineering.

  • Developed frontend interfaces using React.js.
  • Implemented responsive layouts using Tailwind CSS.
  • Built reusable and modular UI components.
  • Organized website sections into a structured page architecture.
  • Worked on the visual presentation of event information.
  • Improved consistency across different screen sizes.
  • Focused on maintainable component structures and clean implementation.
  • Worked on translating the event's identity into a digital experience.

5. Key Features & Website Experience

Event Information

A structured presentation of the hackathon, its purpose, and essential event details.

Event Schedule

A dedicated information experience for communicating event activities and schedules.

Speakers & Themes

Organized sections for presenting speaker information and the event's central themes.

Participation Information

Clear presentation of participation-related details to help potential attendees understand how to get involved.

Responsive Interface

Layouts designed to adapt to mobile, tablet, and desktop screen sizes.

Reusable UI Components

A component-based approach to reduce duplication and maintain consistency across the website.

6. Technical Architecture

The project followed a frontend-only architecture.

Frontend Layer

  • React.js — Component-based UI development.
  • JavaScript — Application logic and interface behavior.
  • Tailwind CSS — Styling and responsive layouts.

Architecture Approach

  • Component-based development.
  • Reusable UI elements.
  • Separation of page sections and presentation components.
  • Responsive utility-based styling.

Backend: Not implemented.

Database: Not implemented.

Authentication: Not implemented.

API Integration: No custom backend API was implemented.

The project was intentionally limited to the frontend scope required for the hackathon website.

7. Design & User Experience Decisions

The primary design challenge was balancing two different identities:

  • Kolkata's cultural and historical heritage.
  • The innovation, experimentation, and energy of a technology hackathon.

The website needed to feel modern without losing its connection to the event's identity.

My frontend implementation prioritized:

  • Clear content hierarchy.
  • Consistent spacing and typography.
  • Responsive section layouts.
  • Reusable visual patterns.
  • Easy navigation through event information.
  • Consistent presentation across devices.

8. Challenges & How I Approached Them

Challenge 1: Balancing Heritage with a Modern Technology Identity

A conventional technology-event design would not communicate the cultural theme effectively.

Approach: The visual direction was designed around the relationship between Kolkata's heritage and modern innovation.

Challenge 2: Organizing Multiple Categories of Information

Hackathon websites contain different types of information, including event details, schedules, speakers, themes, and participation instructions.

Approach: I used a structured section-based layout to make information easier to discover.

Challenge 3: Responsive Layout Development

A website that looks good on desktop may not translate well to smaller screens.

Approach: I used Tailwind CSS responsive utilities and adaptable layouts to maintain usability across different screen sizes.

Challenge 4: Maintaining Reusable Code

Building every section independently can lead to duplicated markup and inconsistent styling.

Approach: I followed a reusable React component approach to improve consistency and maintainability.

9. Project Scope & Limitations

This project was developed as a frontend-only hackathon website.

The implementation focused on the visual interface, responsive layouts, component architecture, and event information presentation.

The following functionality was outside the project's implementation scope:

  • Backend services and server-side business logic.
  • Database storage and management.
  • User authentication and authorization.
  • Custom registration APIs.
  • Admin dashboard and content management.
  • Server-side participant data processing.

This distinction is important: the project demonstrates frontend development and UI engineering, not a complete full-stack event management platform.

10. What I Learned

Working on Calcutta <Hacks/> helped me understand that building a good event website requires more than writing React components.

Key takeaways:

  • Translating an event's identity into a consistent digital experience.
  • Organizing complex information into understandable sections.
  • Building reusable React components.
  • Developing responsive interfaces with Tailwind CSS.
  • Understanding the importance of frontend architecture and maintainability.
  • Working as part of a collaborative web development team.
  • Making implementation decisions within a defined project scope.

11. Project Outcome

The project delivered a dedicated frontend website for Apex Circle's Calcutta <Hacks/> 24-hour heritage hackathon.

It brought the event's identity, information, and participation experience into one digital platform while demonstrating my contribution to frontend engineering as part of the Web Team.

The biggest takeaway: A successful event website is not simply a collection of attractive sections. It is an organized digital experience that communicates the event's identity and helps its audience find the information they need.

Project Credits

Project: Calcutta <Hacks/>

Organization: Apex Circle

Contribution: Frontend Development — Web Team

Technologies: React.js, JavaScript, Tailwind CSS

Project URL: https://cuttahacks.abhishek-nexgen.xyz/