The Global Pantry

The Global Pantry is a website that refers to the diverse array of cuisines that are available in different parts of the world. It promotes various dishes & aims to spread recipes & culture to people.

Comment

The Global Pantry

This website has been developed for the 'Byte the Web' Hackathon. This project uses HTML, CSS, JS, Next.js, TailwindCSS, and a bit of React. It was written primarily in JS and some TypeScript. It is a landing page website which presents the culture and cuisine of the world in a very aesthetic manner. Providing descriptions for six of the many cuisines in the world as well as a full, six-course meal, to cook up inspiration. It also contains a search bar which can redirect any search for a recipe made directly to Google to assist users in furthering their culinary journey.

Inspiration

My inspiration for developing this project came mainly from the theme, but also how I realized how important it is to inform the world about the rich culture across the entire planet. In many cases, people restrict themselves to only eat food from their own culture and never take the initiative, or aren't provided with enough information to explore other cultures and cuisines. This drove me to create a website which does not only promote the most popular cuisines, but also helps the viewer dive into the culture.

What it does

What The Global Pantry website does is that it initially opens up with an aesthetic first glance showcasing a clickable image of the globe featuring key dishes from each of the regions. The user can then either use the navigation bar or can scroll down the landing page to get enthralled by the rich descriptions of cuisines as well as the entire layout of a six-course meal (all are multiple cuisines) which descriptions, images, and recipes. The website also features an interactive search bar which allows the user to type in any dish they are aware of which is then redirected to a google search regarding the dish.

How we built it

This website was built primarily using JavaScript and a little bit of TypeScript. Also incorporates the use of common web development languages such as HTML and CSS. For frameworks and libraries, I used Next.js, an open source web development framework; React, which is a JavaScript library for building UI; and TailwindCSS, which allows for much quicker and advanced styling of CSS.

Challenges we ran into

Throughout building this website, there were a multitude of challenges I ran into, mainly regarding the UI aspect since this is a web development hackathon. Initially, I was unable to figure out how to incorporate a "typing" effect into the title but eventually overcame that by creating a new typing.js file and importing the file into the landing page. Another major issue I had was the search tool because it seemed pretty challenging to be able to take user input from the search bar and provide it to google as a new tab. I was able to overcome this eventually by referencing tools and examples from online.

Accomplishments that we're proud of

A few accomplishments which I am proud of are firstly, the interactiveness of my website because a lot of the boxes, and texts are responsive when you hover over or click on them. Another accomplishment I am proud of is the incorporation of the search tool as I mentioned earlier. This tool does not only restrict the user to only the recipes found in the website, but redirects the user to any dishes and advanced information they would require after learning from the website.

What we learned

I have learned a lot from this project through the hackathon which involves, firstly making much better looking landing pages in a significantly short amount of time. I learned to use tailwind CSS in making the CSS styling faster as well as incorporate a variety of formatting classnames in the JavaScript code I developed for user interactiveness.

What's next for The Global Pantry

Something that I have in mind for The Global Pantry is to potentially bring in a database which can be referenced for users to upload recipes and images to allow other users to discover more culture from the world. This would require for me to develop an Oauth system potentially using Firebase to create a database of users to log in through username and password, or by Google. I also plan to develop more descriptions in multiple pages in the website but was unable to do so for this hackathon because of the limited time frame. Overall, I plan on developing The Global Pantry further and into a much more resourceful destination.

Built With

Share this project:

Updates