Complete Production Grade Restaurant Billing App built in React NextJS GraphQL

I had completed building the Indian Restaurant Billing App , which i started from the learning of Advanced React course by Wes Bos.

I also wrote four articles earlier related to the app, which included some of the problems which i faced and also some settings.

In this article i will give the way to install the app on localhost after taking it from my github . There is a prisma setup, transactional email setup , admin user generation.

I will also walk you through the app. Mymotive is to have this app serve as a basis of the more advanced Restaurant or general Point-Of-Sale app for anyone or to be used by small Restaurant owners. Fell free to fork it, use it, raise issue(and fix them)

So, go to your favorite terminal and clone the project.

Image for post
Image for post
git clone

Now, you will see two folders — backend and frontend. Go inside each folder and do npm install

Image for post
Image for post
npm install

Now, it’s time to setup a Prisma database. So, go to https://www.prisma.io/ and setup an account.

Once it is done, you can check your prisma dashboard.

Image for post
Image for post
Prisma Dashboard

We will do some of the deployment through the terminal, so go ahead in backend folder and first install prisma globally by npm i -g prisma

Image for post
Image for post
prisma globally

Now, while in backend folder only give command prisma login.

prisma login

It will open your default browser, where you need to enter your credentials which were been used to create the prisma account.

Image for post
Image for post
Enter your credentials

Then it will ask to Grand Permission for use.

Image for post
Image for post
Grant Permission

Once you click on Grant permission, it will ask you to close the browser. Once done you are authenticated in the console.

Now, we need to type prisma init to initialize a new Prisma service in the terminal. You will get some errors as below.

Image for post
Image for post
prisma init error

We are getting these errors because our project is already complete and have some of the prisma related auto-generated files.

You need to go ahead and delete some of them. Delete the below files.

.graphqlconfig.yml
datamodel.prisma
prisma.yml
variables.env
src/generated/prisma.graphql

Again type the prisma init and it will let you go through. Here use mouse keys to go down and enter Demo Server + MySQL database

Image for post
Image for post
Select Demo Server

Then choose the least latency one in next screen.

Image for post
Image for post
Choose the least latency one

After that choose a name for your service and give stage as dev.

Image for post
Image for post
stage is dev

In select programming language give Don’t generate

Image for post
Image for post
Don’t generate

And prisma created two files for us.

Image for post
Image for post
Two files created

Let’s now open the prisma.yml and we will notice that prisma gave us an endpoint.

Image for post
Image for post
endpoint

We will put this endpoint information, along with some other sensitive information to our environment file.

So, go ahead and create a variables.env in your backend folder. The PRISMA_ENDPOINT will be the endpoint we got from prisma.yml file. Put PRISMA_SECRET and APP_SECRET, anything of your choice.

Image for post
Image for post
variables.env

Next, go to prisma.yml to use these variables. Notice that we have commented out the secret. It is done because we are in development and we don’t want the database to ask us password everytime.

Image for post
Image for post
prisma.yml

We need to update our datamodel.prisma to the latest code. We had to delete it for prisma init to succeed. Get it from here.

Image for post
Image for post
datamodel.prisma

Now in the backend folder run npm run deploy

Image for post
Image for post
npm run deploy

If everything is successful, you can see the service in your prisma dashboard.

Image for post
Image for post
Our service

Click on the service and you will see all our datamodel items.

Image for post
Image for post
All our models

Before, we run our backend and frontend one last step is remaining. Prisma uses something called prisma.graphql, which we had to delete for prisma init to succeed. Get it from here.

Add it in src/generated/prisma.graphql

Image for post
Image for post
prisma.graphql

Now goto backend and frontend folder and run npm run dev

Image for post
Image for post
npm run dev

If both are successful your app will start in http://localhost:7777/

Now, in the app the admin user have the privilege to create new user. So, we have to create an admin user first from the backend via graphql playground.

Goto http://localhost:4444/ and give the below mutation to create an admin user.

Image for post
Image for post
The mutation to create admin user

Then head over to prisma dashboard and add an Admin privileges to this user. You need to click on the three dots beside permissions and click on ADMIN. Then click on the button Save to Database at the bottom

Image for post
Image for post
Adding ADMIN privileges

Now login with the Admin user by clicking on SIGNIN. You will see a lot of different admin options here.

Next, we will create a normal user. Click on the SIGNUP.

Image for post
Image for post
SIGNUP

Create a user with real gmail credentials, as we have reset password facility also.

Image for post
Image for post
Real credentials

Next, we will do Transactional email setup for password reset. For this follow all steps from my earlier medium article here.

You will get three new values for CLIENT_ID, CLIENT_SECRET and REFRESH_TOKEN, which you will add in variables.env

Image for post
Image for post
Three new values

Also, in Mutation.js add, the gmail id which you had used to setup the transactional email.

Image for post
Image for post
Mutation.js

You need to restart the backend server and then click on RESET.

Image for post
Image for post
reset password

If it is successful and you will get the message.

Image for post
Image for post
Password reset successful

You will get an nice email in your gmail account with the link, to reset the password.

Image for post
Image for post
Mail for password reset

You also need to setup an cloudinary account for image upload and management. Follow all instructions from my earlier medium article on it here.

Just change username with the one you got from following the steps in above mentioned article in CreateItem.js

Image for post
Image for post
cloudinary

It’s time to test some image uploads. Login with your ADMIN user and click on ADD DISH in hamburger menu. You can also create additional type of users from PERMISSIONS, who can just create and item, or delete or edit an item.

Image for post
Image for post
Adding a Dish

Click on Submit and the dish gets successfully added.

Image for post
Image for post
Dish Successfully added

This completes the setup. Go ahead and check all the functionality of Billing, Admin privileges and others. Everything gets saved in the cloud in Prisma database.

Image for post
Image for post
Cloud Prisma databse

If you like this project, please give me star on

Hope you liked this article and you want to deploy this project using heroku. Click here for the article on Deploying React NextJS GraphQL App in Heroku.

This open-source app has also been launched on Product Hunt. Please upvote it.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store