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. My motive 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.

git clone

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

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.

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

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.

Enter your credentials

Then it will ask to Grand Permission for use.

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.

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

Select Demo Server

Then choose the least latency one in next screen.

Choose the least latency one

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

stage is dev

In select programming language give Don’t generate

Don’t generate

And prisma created two files for us.

Two files created

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

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.

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.

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.

datamodel.prisma

Now in the backend folder run npm run deploy

npm run deploy

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

Our service

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

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

prisma.graphql

Now goto backend and frontend folder and run npm run dev

npm run dev

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

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.

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

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.

SIGNUP

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

Real credentials

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

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

Three new values

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

Mutation.js

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

reset password

If it is successful and you will get the message.

Password reset successful

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

Mail for password reset

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

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

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.

Adding a Dish

Click on Submit and the dish gets successfully added.

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.

Cloud Prisma databse

If you like this project, please give me star on my GitHub link
BillingRestro

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.

https://www.producthunt.com/posts/billing-restro

Comments

[Mohammad Fazel]

Hey, my I ask your vs theme?

[Sung M. Kim]

It looks like Cobalt2 by Wes Bos, from his course this post is derived from 😉

I use that theme most of the time and it's a bliss.

[Nabendu]

Yep, you are right. It's Cobalt2 by Wes Bos