A Journey of Building a Functional Recipe Finder Website for a College Exhibition

 As a Computer Science student, my journey to gaining practical experience took an unexpected but rewarding turn when my friend and I decided to participate in a college exhibition. With no previous experience in presenting a complex project, we knew we had to build something impactful that could also help us gain confidence in our skills. After a lot of brainstorming, we decided to develop a Recipe Finder Website—a platform where users could search for dishes and get a list of ingredients. Little did we know, this project would teach us more than we ever expected.

The Idea and the Challenge of Building from Scratch

Both my friend and I were familiar with HTML and CSS, but when it came to JavaScript, our knowledge was limited. JavaScript wasn’t a subject in our diploma program, so we were faced with a steep learning curve. However, we were determined to create a website from scratch and gain practical experience. After spending a day brainstorming, we finally landed on the idea of a recipe finder, but we were unsure of how to start.

Our first step was to look for tutorials and resources online to bridge the knowledge gap. After hours of searching, we found a YouTube video that guided us through a similar project. We watched the video in its entirety, learning key concepts about using JavaScript to create a functional recipe website.

Hurdles and Quick Solutions

With the basics covered, we began building the website. To fetch recipes dynamically, we needed an API key that would provide raw data about recipes. After searching for a couple more hours, we found the perfect API and integrated it into our website.

However, the real challenge came when it was time to test the website. Despite our hard work, the code didn’t work as expected. It was a frustrating moment, especially with only two days left for the exhibition. We dived into the code, meticulously searching for errors. After some tense hours, we discovered the issue: a tiny mistake—a missing period in our code. With the problem resolved, we were back on track.

A Last-Minute Challenge

With the website now functioning, we presented it to our teachers, who suggested adding video-based recipe tutorials to enhance the user experience. At first, I was overwhelmed. We didn’t have any idea how to integrate video tutorials, and we couldn’t find any APIs that offered this feature.

In a moment of panic, we decided to download recipe tutorial videos from the internet and incorporate them into the site. It wasn’t an ideal solution, but it worked under the circumstances. The next day, when we presented the website at the exhibition, a teacher from another college asked us tough questions about the video content—why they were in a particular language, how others could understand them, and why there were so few videos.

This was a humbling experience. We hadn’t anticipated these questions, and it made me realize that there’s always more to learn, even when you think you’ve completed a project.

Lessons Learned

Despite the challenges and the late-night coding sessions, the experience was incredibly rewarding. Here’s what I learned:

  1. Learning is a Continuous Process: Even if you don’t know something, the resources are out there, and with persistence, you can learn on the go.
  2. Teamwork Makes a Difference: Collaborating with a friend not only made the process more enjoyable but also helped us solve problems more effectively.
  3. Real-World Problems Are Inevitable: No project is perfect. You’ll encounter bugs and issues, but the key is to remain calm and find solutions.
  4. Feedback is Crucial: Constructive feedback, even if it’s tough, helps you grow. The questions asked at the exhibition pointed out areas for improvement and made us rethink our approach.

In the end, this project was more than just a website—it was a chance to learn, grow, and gain confidence. While we didn’t have all the answers, we gave our best effort and learned lessons that will stick with us throughout our careers in the tech world.

Comments

Post a Comment