Skip to content

Student-Smart-Printing-Service-HCMUT/ssps-fe

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SSPS Front-end

SIZE FILE LANG formatter: prettier CI CD

About the Project

This is front-end of Student Smart Printing Service HCMUT. See HCMUT_SSPS Organization for more details about our project.

Technical stacks

  • ReactJS
  • ViteJS
  • TailwindCSS
  • Material Tailwind
  • Zustand
  • Docker

Prerequisites

  • node v18.15.0
  • yarn v1.22.19

or if you installed Docker Engine:

  • docker v23.0.1
  • docker compose v2.16.0

NOTE: Fill in .env file (use template from .env.example) before installing.

Installation with yarn

  1. Install dependencies
yarn install
  1. Start project:
yarn start

Installation with docker

  1. Pull image:
docker pull ghcr.io/ticklabvn/ssps-fe:latest
  1. Run container:
docker compose up -d ssps-fe

Project structure

📦src
 ┣ 📂assets                     # All assets such as jpg, svg, icon ... goes here
 ┣ 📂components                 # Reusable components across the web page
 ┣ 📂constants                  # Constants and routes name
 ┣ 📂hooks                      # Contain all custom hooks
 ┣ 📂interfaces                 # Interfaces of class, function ...
 ┣ 📂layouts                    # Contain different layouts of project
 ┣ 📂pages                      # Screen components
 ┣ 📂services                   # Action to call api from server
 ┣ 📂states                     # Global states
 ┣ 📂types                      # Types for variables, objects ...
 ┣ 📂utils                      # connect to URL server
 ┣ 📜App.tsx                    # App component
 ┗ 📜main.tsx                   # Program entry
 ┗ 📜index.css                  # config tailwindcss

Project configurations

Code linting & formating

We use eslint to find and fix problem in code, such as:

  • Unused variables
  • Use var declaration
  • Loosely comparation using ==
  • ...

You can run this command to test eslint script:

yarn lint

To maintain only one style coding across members, we use prettier. Try:

yarn format

You don't need to run these scripts regularly or before commiting code. They are run automatically before git commit command by setting as a precommit script. In some circumstances, precommit script is not enabled by default, just type two commands below to fix it:

chmod ug+x .husky/*
chmod ug+x .git/hooks/*

Barrelsby & Path alias

With configurations in .barrelsby.json, barrelsby can import your entire code base in a specific folder, and re-export them in index.ts file.
Try this:

yarn barrels

To avoid using many .. in relative path, config path alias in tsconfig.json. See the guideline here.

Git working culture

  • For every updates, DO NOT push directly to main branch. Create a new branch, commit, publish branch and create a pull request (PR) instead.
  • A branch should have prefix feature/ for a feature update, prefix hotfix/ for a hotfix, test/ for a testing ...
  • A PR should be small enough to review. To split a large PR, use stacked PRs.

About

Web UI for Smart Student Printing Service

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.8%
  • Other 1.2%