FlyNext

For one of my full-stack web development courses, I developed FlyNext, a robust travel search platform with a minimalistic design that enables users to search and compare flights across airlines, find hotels based on preferences, and manage bookings—all in one place. It features real-time data for accurate pricing and availability, advanced filters for flights and accommodations, and secure booking options, offering a seamless experience for both travelers and hotel managers.

This was a cool project because we had the opportunity to develop and deploy it using modern technologies. We used the following tech stack:

• React -> our web framework
• Next.js -> this was for the frontend and backend
• Prisma -> our ORM to interface with our database
• PostgreSQL -> SQL database

The project was developed as a SPA (Single Page Application) which allowed the user experience to be seamless across the website.

We also got the opportunity to explore a few unique scenarios where we needed to apply our problem solving skills:

• 🛠️ API development processes → converting user stories into actual APIs
• ✈️ Contacting an external API → to handle flight bookings, we contacted an external API (developed by our prof) to check if certain things were available
• 🔄 A lot of state management (including contexts/providers) → which was one of the trickier problems considering how we used certain components and the features that certain pages required
• 🖼️ Image storage mechanisms → we decided to use Formidable for this, so that user images could be stored and retrieved safely
• 🔐 Authentication process → we were initially passing the cookie to the client and saving it in local storage, but found out that this approach was insecure, so we moved to a server-side cookie-based approach
• 🗺️ Maps for hotels → we integrated a map feature with latitude/longitude which allowed us to see exactly where certain details could be seen
• 🚀 Deployment → our team decided to use Supabase with Vercel, as it was the simplest and cheapest solution for this problem
• 🐳 Local development/configuration → this was done simply via Docker (web server, database, and migrations all at once)

The way that it was set up, we initially worked on the following:

• Given certain user stories, we defined the APIs
• After building the APIs, we tested them using Postman API endpoints to make sure that they worked
• This was done for the first part of the project, the second part we began developing the UI for the website
• Setting up the UI was difficult because we wanted to change as little as possible about the APIs, while also making sure that we fulfil our desired use cases effectively
• We decided to create general components as we made certain pages, because we wanted to reuse certain things.
• We needed to ensure SPA during this process (fairly simple using Next.js)
• Our client needed to efficiently wait for server processes to complete, which was ensured by the Node event loop.

After completing the project, there were a lot of things to learn about. Especially about the development process, which I'll be taking with me as I move forward:

Firstly, generative AI is useful, but needs to be used strategically.

This website was developed in a tight timeline (2 weeks), but we managed to deliver a product which you can check out for yourself here!

You can also check out the source code here

Where you'll see local setup information to guide you. Keep in mind that you won't have an AFS API key, so you may have to create it by taking a ten digit number and entering it with a sha256 hash

Hope you enjoyed reading about this, and check out the website yourself to see the end product!