DEV Community

Cover image for How I Built a Modern 'Food Menu' Web App: From Tech Stack to Workflow

How I Built a Modern 'Food Menu' Web App: From Tech Stack to Workflow

Andrew Baisden on June 07, 2023

Introduction Building successful and efficient web apps needs two things: a strong technological foundation, and a solid approach to man...
Collapse
 
andreisibisan profile image
Andrei Sibisan

4 techs for a food menu... seems a little over engineered...

Collapse
 
andrewbaisden profile image
Andrew Baisden

It is supposed to be a simple example that shows how easy it is to deploy an application to Preevy 🙂 I was showing how you can use different stacks and get them to work without too much effort. So with that knowledge in mind anyone can deploy their applications whether it is simple or complex.

Collapse
 
andreisibisan profile image
Andrei Sibisan

yes, I meant no offence and your effort is very commendable, it was more of a general remark on ever increasing complexity and general overhead used in IT. Example: I was shocked to see how nonsensically complex was to make the 'Todo app' in React... I could do it faster and cleaner just with vanilla JS...

all the boilerplate and overhead makes sense when you truly make something complex and sprawling...

Collapse
 
clarance_farley_c14c5d02f profile image
Clarance Farley

Nice one @andreisibisan

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks 🙏

Collapse
 
agusarias__ profile image
Agus Arias

I guess people complaining on the use case didn't get the point of showcasing the interaction between the tools. Kudos for putting this together.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Yeah thats it you understood and thanks 🙂

Collapse
 
hassanndam profile image
hassan • Edited

Hello @andrewbaisden thanks for the nice tutorial.

1) Having this issues while trying to deploy on a prevision environment : CredentialsProviderError: Could not load credentials from any providers

2) There's a mistake in the Dockerfile image (line 27). You need to change the "COPY next.config.js" to "COPY next.config.mjs ." otherwise you'll have this error in your console : "failed to solve: failed to compute cache key: failed to calculate checksum of ref 6e54fd9d-94d4-4570-8388-b6d0a9998d0b::t9jl1swrd0b4vzg"

Thanks for sharing

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks @hassanndam I fixed the error. I'm pretty sure it was working before I think Vercel updated Next.js and changed the file type unless I'm mistaken.

Collapse
 
alejandro_lr_794f8ed0e1b7 profile image
Alejandro LR

Nicely done!!

Collapse
 
getcodescandy profile image
codescandy

Awesome,

Collapse
 
baboon12 profile image
Bhavya Sura

Good Content and Great Effort
Can you also share the screen shots?

Collapse
 
the_riz profile image
Rich Winter

I certainly appreciate the effort but honestly, this isn't an Application. While there are database calls, generally speaking you could have written this entire thing with plain vanilla HTML and CSS. I was expecting this to take orders/payment and pass them on to another client or something that makes this an application, not a website.

Collapse
 
andrewbaisden profile image
Andrew Baisden

I used a simple example so that people could see how easy it is to deloy thier applications to Preevy 🙂 So now if someone wanted to create a complex application as you described then you can see that it wont require that much effort. Basically if you can build it locally then it will work on Preevy.

Collapse
 
rockybaes profile image
Lion Life

The recommended dosage and frequency depend on the individual's condition and doctor’s advice. Torsilax is generally taken with water after meals to minimize stomach upset due to diclofenac's NSAID properties.

Collapse
 
rohitvishkak profile image
Attiq Mughal

If you’re a fan of seafood, Cheddar’s Scratch Menu has some solid choices. Their Grilled Whitefish is light, perfectly seasoned, and a great option if you’re not in the mood for anything too heavy. Served with rice and fresh vegetables, it’s a nice balance of flavor and freshness. The fish was cooked just right, and it’s awesome to find healthy, tasty options at a place like this

Collapse
 
hamza_saqib_1ab0b93d3dbf9 profile image
hamza • Edited

Great tutorial! Your creativity in combining Node.js, GraphQL, Next.js, and Preevy is impressive. It's inspiring to see how you built a full-stack food menu app from scratch. Speaking of food menus, i also tried on my project and the result looking nice check out and is it going nice or still have some space for corrections menuspricesphl.com/

Collapse
 
jontykhan profile image
Wateen Speed

A deep dive into a celebrity's biography often reveals the untold story behind their success. It’s not just the fame that makes them special, but their journey to the top.

Collapse
 
jimmyfurgson profile image
Junaid Akbar

You explained very well that how you built a Modern Food Menu. Recently I also visit Subway Menu Website and was amazed to see the Menu style on that site. It was Designed in a modern Way and I loved it completely.

Collapse
 
jollimenupriceph profile image
jollimenupriceph

Thanks for sharing this tutorial! I'm also working on a food menu project but with a focus on all resturant menu pricing in the Philippines. I've created a mobile app, but I'm still ironing out some technical issues. Would love to learn from your experience and get feedback on my project once it's up and running smoothly!

Collapse
 
codeworldindustries profile image
CodeWorldIndustries

This is rather disappointing... Also, I would not consider this an app.

Collapse
 
andrewbaisden profile image
Andrew Baisden

I just needed an example to showcase how easy it is to put your codebase on Preevy. It can be as basic or as complex as you want it to be 😁

Collapse
 
jaredthomas profile image
Jared Thomas

I appreciated the author's clear and concise writing style. The way they articulated their journey of creating a modern food menu web app was both engaging and informative. Each step of the process was explained in detail, making it easy for readers to follow along regardless of their level of expertise in web development.It is really amazing like chick-fil-a menu breakfast

Collapse
 
gb_sheet_6860749dca295751 profile image
gb sheet

Yeah that's great you explain and thanks 🙂 I am watching how you can use different stacks and get them to work without too much effort.

Collapse
 
dunkindonutsprices profile image
dunkindonutsprices

It is informative and explained in very easy steps. I am making a menu app for my menu pricing site, but I am facing many challenges regarding nodejs.

Collapse
 
hmaqbl profile image
HMQBL

@andreisibisan Thanks for detailed overview.

Collapse
 
murphy1122 profile image
Murphy

recently I am download the youtube biru apk on my android phone. But i am not able to watch any food related on this app. can anyone tell me why? like this youtubebiru.site/