random-meal

Random Meal

Timeframe: Mid Aug 2022 - Oct 2022
My Role: Solo Developer
Type: Web Application

Project Description

"Random Meal" - a website that helps you plan your meals for the week without the stress of decision-making. With the click of a button, the website generates random meal plans that offer a variety of delicious options to choose from.

In addition to meal planning, "Random Meal" also allows you to create an online shopping list containing the ingredients needed for your meals. This feature saves you time and ensures you have everything you need for the week ahead.

And that's not all - you can also save your favorite meals and meal plans for future use and share them with your friends and family. With "Random Meal", you'll never run out of meal ideas and always have the support of those closest to you.

Used Tech-Stack

Figma

Tailwind

JavaScript

React

Firebase

Framer Motion

Figma In my experience, Figma has been a useful design tool that helps me bring my ideas to life. Although it was only my second time using it, I found it easy to navigate and use. I primarily used it to create visual representations of the ideas I had in my head.

Tailwind Using Tailwind for the first time was a great experience, as it allowed for quick and safe development. The pre-defined classes and utility-first approach made it easy to design and style components, without the need for custom CSS. Overall, Tailwind greatly improved the efficiency and productivity of the development process.

React React proved to be a great choice for developing the "Random Meal" website as it allowed us to create a seamless user experience that feels like a native app. The ecosystem around React provided us with a wealth of resources and tools that made the development process smoother and more efficient than if I had attempted to build the site without a framework.

Firebase Using Firebase for the first time was a great experience as it allowed me to explore the use cases for a no SQL database. I mainly used the database, authentication, and storage features, and appreciated the abstractions of "Backend as a Service". I will definitely continue to use BAAS in the future.

Process

Planning

During the planning stage of the project, I wanted to create a development style that suited me the most after finishing my Software Engineering course.

Design

During the design stage, I began by envisioning a helpful meal app, and then used Figma to turn my ideas into a tangible form.

Development

During the Development stage, a combination of Agile and Waterfall methodologies was used resulting in a quick development process. However, the biggest challenge was the scope of the website and lack of knowledge of React, which caused some difficulties along the way.

Test & Deployment

This stage involved testing the website and deploying it on Netlify, which required some time to understand the process. However, in the end, the website was successfully deployed on Netlify.

Showcase

Generating Meals

Conclusion

The project "Random Meal" was a valuable learning experience for me as a developer, as it was my first bigger pet project and my first time seriously using the framework React.

Through the development process, I gained a deep understanding of how to use a component-based framework to the fullest and learned best practices. While the codebase is almost a collection of different ways of writing code, solving problems, it allowed me to test out various techniques and find my own style of writing code.

Overall, I have gained confidence in my skills and will continue to use React for future projects.

Let's build your potential next website

stunning websites.

Navigation

Contact Information

Socials: Github