My first project in my 10 in 12 challenge was to build a website that helps you decide where to eat by generating a random nearby restaurant. The idea was part inspired by the lunch wheel my friends used at work and the classic meme-site, whatthefuckshouldimakefordinner.com. I often also have trouble deciding which restaurant to go to, so I figured this could be a fun little project to do.
How it works
- Go to site
- Allow/Enable location if prompted
- Set search radius
- Et voila! View restaurants!
How I built it
The site was built with React JS (using Next as its framework) and heavily relies on Google Places API for its data.
On initial load, it fetches a list of restaurants from Google’s Places API based on the user's geographic coordinates. It then renders a random restaurant from the list while quietly fetching additional pages of restaurants from the API. It’s done in this way because Google Places API limits its response payload to 20 items per call (3 pages in total), but I wanted users to have the ability to skip through more than 20 restaurants, and I didn’t want to make 3 calls before displaying the initial render.
The website has an action prompt that generates another restaurant from the list at random. When the user clicks it, the website appends a query with the “idx” parameter to the URL. It's a little hack I've added to allow users to navigate their browser history back and forth without storing state in local storage.
Text is also generated at random from a Google Sheet I created, so I don't have to keep redeploying code to update content. I also future-proofed the site with locale functionality, so there can be other languages aside from English.
What I learned
Since my main objective in this project was to learn (which I discovered to be a rather meaningless objective), it's important to record my learnings so I don't repeat the same mistakes. I learned the following things from the project:
1) Research product feasibility and market viability
The first thing I learned was to make sure I do thorough research before starting any kind of product development. This includes a) researching product feasibility to validate it’s actually possible to develop all the features in the product, and b) researching the market to validate that people would actually use the product, in that order. The order is important, otherwise you may not be validating a product that is feasible. If it’s not possible to develop every minor feature of the product in its entirety, then a pivot is necessary. This may seem obvious, but as someone who prioritized learning through action over research and inaction, I’d ended up spending an entire month working on something that was rather futile and had no business viability. More importantly, I didn’t learn anything from the business side of it because I didn’t have any belief in the product halfway through working on it. Ironically, the most important thing I learned was that I'd approached it wrongly.
2) Don't rely heavily on third-party services
The second thing that I learned was to not build your product around an external API. what.restaurant relies heavily on Google Places to generate restaurant data, and as a result, was severely limited in what it could display. It wasn’t possible, for instance, to filter or display Cuisine Type, which was so important for the application’s user experience. Another annoyance was pricing. I had used Google Places API for many years so I didn’t think this would be an issue. It was only while I was developing that the API was no longer free to use. They also no longer provided photo URLs in their places endpoint, and that photos for a given restaurant could only be obtained one API call at a time.
3) Don't rely heavily on creative content
Similarly, I learned that it was important for me not to build products that rely too heavily on creative content. whatthefuckshouldimakefordinner.com really made waves at the time it was released, but that was less so because it was a useful application; rather, it stood out because it was so original and funny. The creator of that site is a writer, a professional content creator who makes a living from being funny, whereas I’m more of a pragmatist and not exactly known for having a wicked imagination, so it wasn’t a good idea for me to make something that banked on humor or imagination. To further illustrate this point, many “funny” sites like that one fall into obscurity, so I don’t think it’s a stretch to say that the chances of a website like that catching fire are one in a thousand.
4) Spend some time writing a detailed plan
The next thing I learned also seems pretty obvious at the outset, but it’s actually not that obvious when your head is down and you’re just working to get things done, and that’s making sure you have a detailed plan before you execute anything. Spending a few hours to a day planning out the following week or fortnight in advance means you won’t need to deal with the friction of having to keep orienting yourself every time you stop working. Distractions and breaks occur on an almost hourly basis, and during this project, I wasted so much energy asking myself “what do I need to do next” simply because I didn’t have that detailed plan. As a result, I started losing motivation and my procrastination breaks got longer and longer. I even started waking up late. Overall, I felt very disheartened simply due to a lack of focus and drive, and that can be attributed to not having a detailed project plan to keep myself oriented.
In the future I'd make sure I have a SMART step-by-step plan, which might resemble the following:
- Product feasibility (D1)
- Market research (D2 - 5)
- Get design inspiration from sites like behance.com (D6 morning), Figma community (D6 afternoon)
- Draw out the user flow (D7 morning)
- Test user flow (D7 afternoon)
- Design the application (D8 - 10)
- Validate design (D11)
- Plan marketing and launch cycle (D12)
- Develop product (D13 - 20)
- Execute market + launch plan (D21 - 22)
Having something like this would not only 5X my productivity, but I’ll also have more focus and enjoyment working on the project.