The Flavor Trial

Inspiration

Our inspiration for "The Flavor Trial" came from a simple idea: to create a digital journey through India's diverse culinary landscape, with a special focus on the rich food culture of Kolkata. We wanted to build a website that not only showcases various regional cuisines but also provides a curated guide to some of the best and most authentic dining experiences the city has to offer. The goal was to go beyond a basic food blog and craft an immersive, interactive experience that feels like a personal recommendation from a local.

What it does

The website is an interactive food guide centered around a dynamic carousel and a 3D image slideshow.

The 3D slideshow on the right of the page features rotating images representing different cuisines. When you click on one of these images, it triggers a change in the main carousel.

The main carousel then displays detailed information about that cuisine, including a hand-picked restaurant recommendation in Kolkata, the average cost for two people, operating hours, and a list of signature dishes.

This design allows users to easily explore various food types, from Bengali and North Indian to Gujarati, Rajasthani, and South Indian cuisine. It also includes a special section dedicated to Kolkata's famous street food.

How we built it

The project was built using a combination of HTML, CSS, and JavaScript.

HTML provided the fundamental structure for the entire website, including the navigation bar, the slideshow container, the main carousel, and all the content for each food section.

CSS was crucial for styling and designing the user interface. We used CSS to create the captivating visual effects, such as the 3D rotating slideshow, the smooth transitions and animations for the carousel, and the overall look and feel of the site. We also used CSS to make the layout responsive and adapt to different screen sizes.

JavaScript was used to add interactivity. It handles the user's clicks on the slideshow images and dynamically updates the content displayed in the main carousel. It also manages the 'active' state of the carousel items, ensuring that the correct content is shown for the selected cuisine.

Challenges we ran into

One of the main challenges was accurately positioning the 3D slideshow and the main content carousel on the screen so they would not overlap and would remain responsive on different devices. We initially used fixed pixel values for positioning, but this caused display issues on various screen sizes. To solve this, we switched to using relative units like vw and vh (viewport width and viewport height) to ensure that the elements scaled correctly regardless of the screen size.

Another challenge was managing the carousel's state with JavaScript. We needed a way to dynamically change the 'active' class on the carousel items based on which image was clicked in the slideshow. We accomplished this by iterating through the carousel items and adding the 'active' class to the one that corresponded to the clicked slideshow image while removing the class from all others.

Accomplishments that we're proud of

We are most proud of successfully integrating the 3D image slideshow with the main carousel to create a seamless, interactive user experience. This feature is the core of our project and a significant accomplishment. We are also proud of the responsive design, which ensures the website is functional and visually appealing on both large and small screens. Finally, creating a visually engaging and informative interface that showcases our curated content in a unique way is something we are very proud of.

What we learned

This project was an excellent learning experience. We deepened our understanding of CSS transforms and animations for creating a dynamic 3D effect. We also learned the importance of using relative units in CSS for responsive design. Furthermore, we gained valuable experience in using JavaScript to handle user events, manipulate the DOM (Document Object Model), and manage the dynamic state of a web application.

What's next for The Flavor Trial

For future development, we plan to add more restaurants and cuisine types to the guide. We also want to implement a search function and filtering options so users can search for specific dishes or restaurants. A feature to allow users to save their favorite places would also enhance the user experience. Finally, we'd like to integrate a small map for each restaurant to help users with directions.