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!
Client: Vercel
- Clone this repository
- Go to the root directory and install packages with
npm i
oryarn i
- Import PostgreSQL script file
psql -h localhost -U postgres -f database.sql
- 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 }
- Run
npm start
to start the server side - Go to client folder and install packages with
npm i
oryarn i
- Set a new
.env
file in the same folder and add the following variables
REACT_APP_SERVER_URL="http://localhost:8000"
- Run
npm run start
to start the client side
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.
- 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
- 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
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.
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.
Website backend (server) was built using NodeJS, an open-source, cross-platform, back-end JavaScript.
ExpressJS is a back end web application framework for NodeJS that manage the servers and routes of the application.
Website database is stored in PostgreSQL, a free and open-source relational database management system. Website database consist of 3 tables;
- user, used to store user credentials. user table consist of 3 column;
- id, an id generated by postgreSQL automatically,
- student_id,
- password (hashed)
- 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
- 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
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
Figma plugins: Blush
- Shiny Happy by Brendon Mendoza
- Tech Life by Karthik Srinivas