Sumit Kr. Jaiswal.
Back to Blog
March 15, 2024Hackathon

More Than a Website: The Humsafar Story

How Team Path-Finders turned a simple travel idea into a Runner-Up finish at the Byte Battle Hackathon.

Web DevelopmentUI/UX DesignHackathonHumsafar

Runner-up • Byte Battle Hackathon • Punjab Technical University, Jalandhar

Team Path-Finders — Harsh Vardhan, Sumit Kumar and Sameer Kumar — after representing the team at Byte Battle

Team Path-Finders — Harsh Vardhan, Sumit Kumar and Sameer Kumar — after representing the team at Byte Battle.

A Hackathon Built Around a Familiar Problem

Some of the best student projects begin with a problem that almost everyone understands. Travel is one of them. Finding the right destination, understanding the journey, exploring available options and getting the information you need before travelling can quickly become scattered across different websites and services. At the Byte Battle Hackathon at Punjab Technical University (PTU), Jalandhar, our team, Path-Finders, decided to approach that familiar experience through a simple question: can we make the journey feel easier through a well-designed digital platform?

That question led us to Humsafar, a travel-focused website concept created during the hackathon. Our objective was not to build an enormous travel ecosystem within a limited competition window. Instead, we wanted to demonstrate how a clean, responsive and intuitive website could make travel-related exploration more convenient.

The project ultimately earned Team Path-Finders the Runner-Up position. For us, the recognition was significant because Humsafar was created under the pressure and constraints of a hackathon, where time, design decisions, implementation and presentation all have to come together quickly.

The Idea Behind Humsafar

The name Humsafar — meaning a companion on the journey — captured the direction we wanted the project to take. Rather than treating a travel website as just a collection of pages, we thought about it as a digital companion that could help a user move from curiosity to planning.

The concept focused on presenting travel information through a familiar, visually engaging website experience. We wanted the interface to feel approachable and organized, while making navigation simple enough that a user could quickly understand where to go next. This meant paying attention not only to the information displayed but also to layout, hierarchy, responsiveness and the overall flow of the website.

For a hackathon project, that user experience mattered. A technically functional website can still feel difficult to use if the interface is cluttered or inconsistent. Humsafar gave us an opportunity to focus on the relationship between design and functionality — making the technology feel simple from the user's perspective.

Building Under Hackathon Constraints

Hackathons compress the normal software development cycle into a very short period. There is little room for lengthy planning, and every decision has an opportunity cost. If the team spends too much time adding features, there may not be enough time to refine the interface. If the team focuses too heavily on visuals, the functional demonstration can suffer.

For Humsafar, we therefore concentrated on creating a strong frontend experience and a coherent demonstration of the core idea. The team had to divide responsibilities, decide which pages and interactions mattered most, and continuously evaluate whether a new addition actually improved the project.

This process taught us an important lesson: a hackathon is not simply a race to write the most code. It is an exercise in prioritization. The ability to identify the essential experience and deliver it well can be more valuable than attempting to build every possible feature.

Using Bootstrap to Build a Responsive Experience

One of the practical choices behind Humsafar was the use of Bootstrap to accelerate the development of a responsive web interface. Bootstrap provided a useful foundation for structuring layouts, components and responsive behavior, allowing us to spend more time thinking about the product experience rather than repeatedly solving common frontend layout problems.

Responsive design was especially important because travel websites can be accessed from a variety of devices. A layout that works well on a laptop but breaks on a mobile screen does not provide a consistent user experience. By using responsive design principles, we aimed to make Humsafar adaptable across different screen sizes.

The experience also helped us understand the practical value of frontend frameworks and reusable component patterns. Rather than building every visual element from scratch, we could use established patterns and customize them around the project's needs.

Learning Through Website Cloning

Another important part of the hackathon experience was website cloning. In the context of the competition, recreating familiar website patterns gave us a way to study how established digital products organize content, navigation and visual hierarchy.

For us, cloning was less about copying a finished product and more about understanding the mechanics behind a polished web experience. We had to observe how sections were structured, how visual elements were positioned, how users were guided through the interface and how responsive behavior could be reproduced. This turned the exercise into a practical frontend learning experience.

It also made us more conscious of originality. A developer should be able to learn from existing interfaces while understanding the difference between inspiration, recreation for learning, and building an original product. Humsafar gave us a chance to practice that distinction while working under real competition conditions.

The Team Behind Humsafar

Team Path-Finders consisted of Harsh Vardhan, Sumit Kumar and Sameer Kumar. The project benefited from having multiple perspectives during the design and implementation process. Discussions around what to build, what to simplify and what to present were just as important as the actual coding.

Team portrait
Team portrait
Team portrait

Team spotlight created from the single team photograph supplied for this portfolio article.

The Presentation: Explaining More Than the Interface

A hackathon project is ultimately judged not only by what appears on the screen but by how clearly the team can explain it. When we presented Humsafar, we had to communicate the problem, the idea, the technology choices and the value of the experience within a limited amount of time.

This forced us to think from the perspective of someone seeing the project for the first time. Which part should be explained first? Why does the user need this? What makes the interface useful? Why did we choose our implementation approach? These questions helped us understand that presentation is not a separate activity from development. It is another way of testing whether the team truly understands what it has built.

The Moment: Runner-Up at Byte Battle

When Team Path-Finders secured the Runner-Up position at Byte Battle, it became another memorable milestone in our journey of building and presenting technology solutions. The result was a validation of the effort that went into Humsafar and the teamwork that made the project possible.

The photograph of our team captures that achievement, but the most valuable part of the experience happened before the photograph: the discussions, iterations, implementation challenges and decisions that shaped the final project.

What Humsafar Taught Us About Product Development

One of the biggest lessons from Humsafar was that a product does not have to be technically enormous to demonstrate good engineering. A focused solution with a clear purpose can be more convincing than a large collection of disconnected features.

The project strengthened our understanding of responsive web development, frontend structure, visual hierarchy and rapid prototyping. It also showed us the importance of iteration. A first version is rarely the best version. Small changes in spacing, navigation, section ordering or responsiveness can significantly improve how a user experiences a website.

The hackathon also improved our ability to work as a team under time pressure. We learned when to debate an idea, when to compromise and when to stop adding features and focus on polishing what was already working.

Beyond Humsafar: Where the Idea Could Go

The Humsafar prototype could be expanded into a much richer travel platform. Future versions could incorporate destination discovery, personalized recommendations, itinerary generation, map-based exploration, budget planning, transport information and intelligent travel assistance.

A modern version could also use AI to understand a user's preferences and generate personalized travel plans. Instead of simply displaying destinations, the platform could understand whether a traveler prefers adventure, history, nature, food or budget-friendly experiences and adapt recommendations accordingly.

These possibilities demonstrate why hackathon prototypes are valuable. The competition may last only a short time, but a good prototype can reveal a much larger product direction.

A Small Website, A Big Learning Experience

Looking back at Byte Battle, the Runner-Up position is certainly something we are proud of. But the deeper value of the experience was the opportunity to build under constraints and learn by doing.

Humsafar gave Team Path-Finders a practical environment to explore frontend development, responsive design, Bootstrap, website recreation and rapid product thinking. It taught us that building a useful digital experience involves much more than writing code. It involves understanding people, organizing information, making deliberate design choices and communicating the result.

For me, this achievement became another step in learning how to turn an idea into something people can actually interact with. The project may have started as a hackathon challenge, but the lessons from it continue to shape the way I think about building technology: start with the user, keep the experience clear, choose the right tools, work together and always leave room to improve.

Team Path-Finders: Another Milestone

The Byte Battle Runner-Up achievement became another chapter in the story of Team Path-Finders. From presenting ideas to building working prototypes, every competition has added a different lesson to our experience. Humsafar was particularly valuable because it showed us the power of a simple idea executed with focus.

I am grateful to my teammates and to everyone who created the opportunity for us to participate, compete and learn. The Runner-Up finish is a proud achievement, but the real takeaway is the confidence to keep building, experimenting and turning everyday problems into better digital experiences.


Event Reference

If you want to read more about this event, check out the official post: