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
 
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