Body Fuel

Purpose and goals
Web stack and Explanation
Problems and Thought Process
Lessons Learned
Features
Screenshots

Purpose and goals

For this project I aimed to create a full-stack web application that would help users create and share healthy recipes, log their daily meals, and track their nutritional values. As a web developer, I aimed to build something fun yet challenging to expand my knowledge and skill set in web development.

I was inspired to create this project because I believe that a healthy diet is essential for overall well-being. By building a web application that would enable users to create and share healthy recipes and track their nutritional values, I hoped to contribute to people’s efforts to maintain a healthy lifestyle.

My primary goal for this project was to create an easy-to-use application that would provide users with a seamless experience for creating, sharing, and tracking their recipes and meals.

Additionally, I aimed to challenge myself as a developer by utilizing new technologies that I had not used before, such as AWS S3 and NextAuth with email links. This allowed me to expand my knowledge and skill set and apply new techniques to build better web applications in the future.

Ultimately, my hope for the Body Fuel project was to create a useful and enjoyable tool that could help users maintain a healthy lifestyle while also pushing the limits of my own knowledge and skill set as a web developer.

Web stack and Explanation

NextJs and NextAuth

NextJs made the most sense for the web application because it is a React framework built for production. It is also effortless to use and has many features that make creating a good user experience easy, with SEO and speed in mind, as it can be used to create static and server-side rendered pages.

Especially for a web application that requires authentication, NextJs is a great choice because it allows for server-side rendering, which is essential for security. This means that the user’s information is not exposed to the client-side, which is a common security risk.

Considering that most of the pages in this web application require authentication, NextJs was the perfect choice for this project.

NextAuth was also a great choice for this project because it is a NextJs authentication library that makes it easy to add authentication to any NextJs application. It also supports many different authentication providers, including email links, which I used for this project.

TRPC, Zod, and Prisma

Behind the scenes, I used TRPC for type-safe server-side requests and Zod for data validation, creating clean, maintainable, and bug-free code. I utilized Prisma for handling database queries, making it easy to scale the website if it needes to grow.

Tanstack React Query and TailwindCSS

To handle complex data and state management, I implemented React Query. To make design customization and prototyping easier, I used TailwindCSS.

AWS S3 with presigned URLs

I’ve took inspiration from Theo’s Tweet to implement a presigned URL system for uploading images to AWS S3. This allowed the app to upload images to S3 without exposing the AWS credentials to the client-side, which is a common security risk. Also it’s a great way to give the users the ability to uploade their own recipes images.

Problems and Thought Process

One of the primary challenges I faced with this project was implementing the AWS S3 integration. I had never worked with AWS S3 before, so I had to do a lot of research to understand how it worked and how to integrate it into the web application. I had to go thoruogh the AWS S3 documentation about CORS and bucket policies to understand how to configure the bucket to allow the web application to upload images to it. I also had to research how to generate presigned URLs for uploading images to S3, which I implemented using the AWS SDK for JavaScript. All of this research and experimentation allowed me to successfully integrate AWS S3, using TRPC, into the web application and create a secure and reliable image upload system.

Also I hadn’t worked with React Hook Forms before, so I had to do some reasarch on how to best use it, because I needed it to handle the image upload. I had to figure out how to use the useForm hook to handle the image upload. I’ve managed to handle the image separately generating first a presigned URL and then uploading the image to S3 using TRPC, then use the data from the React Hook Forms in combination with the image URL to create a TRPC request to the database to create the recipe. All of this research and experimentation allowed me to successfully integrate React Hook Forms into the web application and create a reliable and secure image upload system.

For the meal plans, I had to learn how to use the date type through TRPC to create a meal plan for the current day or a day selected by the user. I had to figure out how to use the date type in the database and how to use it in the API routes. I also had to figure out how to use the date type in the React components. All of this research and experimentation allowed me to successfully integrate the date type into the web application and create a reliable meal plan system that’s capable of handling the current day and any day selected by the user, also making a comparison between the day chosen and the day before.

Lessons Learned

Building the Body Fuel project was a significant learning experience for me as a web developer. I was able to gain hands-on experience working with a variety of modern web technologies, as well as develop a deeper understanding of web development best practices.

One of the most important lessons I learned was the value of using NextJs and NextAuth for creating a full-stack web application with authentication. These technologies provided a seamless user experience while ensuring user information was kept safe and secure.

I also improved my knowledge of using TRPC, Zod, and Prisma to create a clean, maintainable, and bug-free codebase. Utilizing these technologies allowed me to streamline development and reduce the risk of errors or bugs in the application.

React Query was another technology that proved invaluable in handling complex data and state management. It allowed me to efficiently manage large amounts of data, reducing the need for complicated and time-consuming data management tasks.

In terms of design, I learned how to use TailwindCSS to make design customization and prototyping easier. This technology provided a range of pre-built styles and utilities, which allowed me to quickly and easily create a polished and professional design for the application.

Additionally, I learned how to use AWS S3 to create a secure and reliable image upload system and React Hook Forms to make a reliable and secure form validation and submission system. These technologies allowed me to ensure that user data was stored safely and securely while providing a seamless user experience.

Finally, I learned how to use the date type to create a reliable meal plan system that handles the current day and any day the user selects. This system also allowed for comparisons between the present and the previous day, enabling users to track their nutritional values and make informed decisions about their diet.

Overall, the Body Fuel project provided valuable learning experiences and allowed me to develop my skills and knowledge as a web developer.