Coder Social home page Coder Social logo

parduccinward / qr-ticket-management-system Goto Github PK

View Code? Open in Web Editor NEW
18.0 1.0 8.0 927 KB

This repository contains an application to manage events and control the entry of customers through encrypted QR codes. This app is under improvement. Feel free to clone this repository.

License: MIT License

JavaScript 87.36% HTML 0.77% CSS 11.88%
cloudinary expressjs javascript jwt nodejs qrcode reactjs pern-stack postgresql party-apps ticket-management ticket-system

qr-ticket-management-system's Introduction

Logo of the project

Event QR ticket management system · Build Status npm PRs Welcome GitHub license

Description

This administration system allows you to manage the information about your events, salespersons and clients (CRUD). Also, you can create a unique link for each salesperson to sell tickets and generate a secure QR ticket for each client (npm crypto and qrcode). I applied the PERN stack to carry out this project, creating a rest API with Nodejs-Express and a client with Reactjs. I chose these technologies to meet the requirements and apply a relational database with PostgreSQL. Finally, I use Cloudinary to store payment receipts in the cloud.

Live demo

login as user admin

username: admin
password: 12345

login as user security guard

username: security
password: 12345

Project main process

Customer process flow

This image describes the process of a customer going to an event.

Getting Started

Built With

  • node: 16.15.0
  • npm: 8.5.5
  • express: 4.18.1
  • react: 18.2.0
  • pg: 8.7.3

Prerequisites

  1. Download and install Node.js
  2. Download and install PostgreSQL
  3. Download and install Postman

Installation

First clone the repository with the following commands:

git clone https://github.com/parduccinward/qr-ticket-management-system.git
cd qr-ticket-management-system/
code .

Then start the application by installing npm on both the project root folder and the frontend folder, using the following commands:

Backend Start

npm i
npm run dev

The node server.js should start listening on port 4000.

Frontend Start

npm i
npm start

The client should start in the browser at port 3000.

Database Creation

Depending on the operating system you are using, follow the following guidelines to enter PostgreSQL:

Once inside the psql command line, we create the database by executing the create-database.sql file contained in the models folder. Again, this is done depending on the operating system as follows:

Linux

postgres=# \i /yourpath/qr-ticket-management-system/models/create-database.sql

Windows

postgres=# \i 'C:/yourpath/qr-ticket-management-system/models/create-database.sql'

After running this command, you should get this response:

CREATE DATABASE
You are now connected to database "ticketmanagement" as user "youruser"
CREATE TABLE
CREATE TABLE
CREATE TABLE
CREATE TABLE

To check that all the tables were created correctly we can use the command \dt

User Creation

To create different users, use Postman to consume the /api/auth/register API endpoint, sending a JSON body:

Create admin user

Admin users can be created with the role 5150.

{
    "username": "admin",
    "password": "12345",
    "role": "5150"
}

Create security guard user

Security guards users can be created with the role 2001.

{
    "username": "security",
    "password": "12345",
    "role": "2001"
}

Make sure to momentarily disable the verify JWT middleware while creating users, in ./routes/users.js as follows:

// from this
router.post("/register", verifyJWT, registerUser);

// to this
router.post("/register", registerUser);

Create Cloudinary account and get keys

In order for customers to securely upload their payment receipts, we use Cloudinary as a cloud repository. I highly recommend this approach because is free and secure.

Create an account on the official Cloudinary registration page. Then go to your dashboard and copy the following credentials:

  • Cloud Name
  • API Key
  • API Secret

cloudinary-keys

Create environment variables

To complete the installation, we need to create an .env file in the root directory and enter the following credentials:

FRONTEND_ORIGIN="http://localhost:3000"
PORT=4000

PGHOST="localhost"
PGUSER=postgres
PGDATABASE=ticketmanagement
PGPASSWORD=*yourpostgrespwd
PGPORT=5432

ACCESS_TOKEN_SECRET=*youraccesstoken
REFRESH_TOKEN_SECRET=*yourrefreshtoken

CLOUDINARY_CLOUD_NAME=*yourcloudname
CLOUDINARY_API_KEY=*yourcloudinaryapikey
CLOUDINARY_API_SECRET=*yourcloudinaryapisecret
  • The PG variables are the credentials you have in the PostgreSQL installation.
  • The Cloudinary variables are the ones we copied in the previous step.
  • Tokens are created using the following code one at a time for each token.

We enter node by typing node in a terminal an then:

require("crypto").randomBytes(64).toString("hex");

Database

The following image corresponds to the entity relationship model of the project:

ERM Ticket System

ToDo List

  • Create secure QRs
  • Auth using JWT
  • Create private routes
  • Responsive design
  • Validate fields on backend
  • Show number of clients for each Salesperson

Licensing

This project uses the MIT license, please see the LICENSE file for more information.

Acknowledgements

qr-ticket-management-system's People

Contributors

parduccinward avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.