Inside the oven: Building out a Foodie App

Introduction

In this blog post, we'll delve into the exciting journey of building a foodie app from scratch.

buildinpublic

I'm inspired by this way of making products. Essentially documenting the progress of building, instead of hiding away for months on end and only revealing the final product.

This approach keeps me agile and transparent. I'm currently reading 'the Mom Test' - so user interview are in my pipeline.

Honestly, I'm not a software developer or computer science major. So, I am hoping that I might just have a different and unique enough angle in this space.

This week's update

• Optimising the backend
• Gemini as a coding partner
• heatmaps as a feature

Some food for thought here. The whole building process feels like baking in the oven.

It takes time, thought and some amount of kneeding to get things into the right shape!

Setting the Stage

Last two weeks we have an initial deployment that was functional but lacked polish and efficiency.

It works and it's scalable but probably nobody is gonna buy yet.

Key areas for improvement included performance, user interface (UI)/user experience (UX), and missing features.

Locations clustering

One of our biggest challenges was marker clustering on the map. With over 400 points to display, the map was cluttered and difficult to navigate. We tackled this problem by:

• Researching and implementing clustering algorithms: We explored various clustering techniques and maplibre-gl has an existing implementation that works out of the box. Might do with a custom one in the future.
• Fine-tuning the clustering parameters: some tweaking is required for readability.

Gemini: The Coding Companion

I tested out Gemini Code Assist, as a AI coding assistant.

It was easier than expected to set up. All it took was two steps:

1. Installing a VScode plugin
2. Connecting the project to a Google cloud project - this was quick as I am already using their ecosystem!

Some real benefits were :

• Code generation: Gemini provided code suggestions and snippets, saving time and effort. It was pretty handy for brainstorming.
• Explaining complex concepts: Gemini helps identify coding concepts and best practices. I thought it was pretty neat at rationalising architecture decisions too.
• Debugging code: not the best use, but Gemini has a neat way of scanning the whole project to see which part needs fixing. Not all the suggestions work out though, and Gemini gets this part wrong often.

I think overall it has made me a faster frontend dev. Especially since I am not superb in Typescript.

After a week with the assistance, I feel a lot more confident in writing my own Typescript (using modules, node, types, etc).

I wouldn't use Gemini to code out a whole app - I don't think that is the use case. Rather, the best way to see it is as a code buddy or a documentation synthesiser.

Backend Blitz: Optimizing for Performance

Quick gains here in dropping our deployment size to 1/3rd. I did this by:

• Refactoring code: eliminate unnecessary complexity and improve efficiency.
• Removing unused packages: removed unused packages to reduce the app's size and dependencies.
• Achieving significant size reduction: leading to faster load times and better user experience.

Heatmap Hurdles: Visualizing Data Effectively

To provide users with valuable insights, I added heatmaps to visualize ratings and price levels.

This involved:

• Researching heatmap techniques: We explored different heatmap algorithms and visualization methods. Again starting out with a base implementation from maplibre-gl​
• Selecting the perfect visual representation: We carefully considered the color scheme, gradient, and other visual elements to create a clear and informative heatmap.

Polishing the Experience: Enhancing UI/UX

User experience is super important but not an area I am experienced with.

It is super easy to make new sections with components now.

But there is a lot more thought that needs to go into a customer workflow.

Final Showcase and Reflections

This is a current state of the app. I've got more details on the YouTube video but this is a quick summary for the week!

Through this project, we learned the importance of:

• Overcoming obstacles is a crucial part of the development process.
• Utilizing tools like Gemini can significantly improve efficiency and productivity.
• Continuously refining and improving the app based on user feedback and evolving requirements.

Conclusion

Building a successful app requires a combination of technical expertise, creativity, and a willingness to learn and adapt.

By following this series of blog posts, hopefully it can create spark some ideas for your own app that meets the needs of your users and stands out in the market.