Kantin Kejujuran PERN Stack Website

Kantin Kejujuran PERN Stack Website is a responsive website created to fulfill COMPFEST Software Engineering Academy selection task.

SD SEA Sentosa has a special corner named “Kantin Kejujuran”. It consists of some items for sale by students and a box to store all the purchased money. Everyone is free to look around, sell, and buy items there. There is no shopkeeper there so everyone is also free to add or withdraw the money in the box. Let’s digitalize the feature!

Deployment

Client: Vercel

Server: Heroku

Database: Heroku

Local Setup

1. Clone this repository
2. Go to the root directory and install packages with npm i or yarn i
3. Import PostgreSQL script file psql -h localhost -U postgres -f database.sql
4. Set a new .env file in root directory and add the following variables. ACCESS_TOKEN_SECRET can be set to anything and represent the JWT Token Secret

PG_USER=postgres
PG_PASSWORD={ user password }
PG_HOST=localhost
PG_PORT=5432
PG_DATABASE=kantin_db

ACCESS_TOKEN_SECRET={ anything }

5. Run npm start to start the server side
6. Go to client folder and install packages with npm i or yarn i
7. Set a new .env file in the same folder and add the following variables

REACT_APP_SERVER_URL="http://localhost:8000"

8. Run npm run start to start the client side

Website Feature

User Authentication and Authorization

When user first register to the website, student ID and password will be validated first on the client side before sending it to the server. Server then will check the user database to see if the student ID has been registered or not. On the server, password will be hashed first using bcryptjs before sending it to the user database along with the student ID.

Every time user make a request to the website, user will be authenticated first by using JWT (Jason Web Token) stored in user's local storage.

The Store Page

• Unauthorized and authorized user can view all items in store page
• User can sort items by the date created or the name of the items in descending or ascending order. Items are sort by date created in descending order by default
• User can search items by the name
• Only authorized user can buy and add items to the store
• Authorized user can edit and remove items that they sell while it's still in the store

The Balance Box Page

• Only authorized user can access the balance box page and see the canteen's current balance
• Authorized user can top up in Rupiah with no limit
• Authorized user can withdraw money in Rupiah. The maximum amount can be withdrawn is the canteen’s current balance

The My Items Page

Authorized user can view their own sold items, on sale items, and bought items. This page is created to help user keeping track of their sold, on sale, and bought items. User can sort items by the date created or the name of the items in descending or ascending order. Items are sort by date created in descending order by default.

Technologies Used

ReactJS (with Tailwind CSS)

Website frontend (client) was built using ReactJS, a free and open-source front-end JavaScript library for building user interfaces based on UI components, with helps from tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

NodeJS

Website backend (server) was built using NodeJS, an open-source, cross-platform, back-end JavaScript.

ExpressJS

ExpressJS is a back end web application framework for NodeJS that manage the servers and routes of the application.

PostgreSQL Database

Website database is stored in PostgreSQL, a free and open-source relational database management system. Website database consist of 3 tables;

1. user, used to store user credentials. user table consist of 3 column;
   • id, an id generated by postgreSQL automatically,
   • student_id,
   • password (hashed)
2. item, used to store item details. item table consist of 9 column;
   • id, an id generated by postgreSQL automatically,
   • created_timestamp, the timestamp of when the item is created including the timezone,
   • name, the name of the item with 45 characters maximum,
   • price, the price of the item,
   • image, the image URL of the item,
   • description, the description of the item with 500 characters maximum,
   • sold, boolean represent wether the item has been sold or not,
   • seller_id, the student id of the seller,
   • buyer_id, the student id of the buyer
3. balance_box, used to store the canteen's balance. balance_box column consist of 1 column and 1 row
   • balance, the canteen's balance, only consist of 1 row

Picture 1 Entity Relationship of Database

Environment Variable

This website used 3 environment variables

• REACT_APP_SERVER_URL, to store the URL of the server for the client
• ACCESS_TOKEN_SECRET, to store the access token secret of JWT
• DATABASE_URL, to store the URL of the database in production mode

Graphic Used

Figma plugins: Blush

• Shiny Happy by Brendon Mendoza
• Tech Life by Karthik Srinivas