CSCI3100 project

This is an online secondhand book reselling platform project by

Name	SID
Cheng Mo	1155144832
Rabindar KUMAR	1155129207
Yerarslan Shayakhmetov	1155133650
Manuchehr Tursunov	1155118876
Leung Wan Yin	1155149789

Collaboration

• Main branch is for deployment.
• Create a new branch whenever you want to add a new feature/debug/refactor/etc. This is a recommended format for branch names

build/changes-on-the-deployment
docs/write-some-documentation
feat/add-a-new-feature
fix/fix-a-bug
refactor/rename-a-file-or-folder
test/test-some-functions

you may also want to use these formats in your commit comments

• Create pull request when ever you want to merge things to the main branch.
• Commit your code after you have tested it.
• Prettier will be run in the pre-commit stage.
• Cite code reference in the "References" section below.

Deployment

This project is deployed to Heroku here

• Main branch commits will be deployed to Heroku automatically
• Deployment will use the build version of both frontend and backend
• environment variables are stored in Heroku

Development

1. install node.js
2. clone this repo
3. cd to this project and install modules by typing : npm install
4. start the dev server by typing: npm run-script dev:start
5. start editing!

Prettier setup with VScode

1. Install Prettier extension
2. Set prettier as default formatter (ctrl + shift + p ">format document" and choose prettier as default fomatter)

File structure

react-template/
.                             # Root
├── common                    # Common files that might share between both frontend & backend
│   └── ...
├── public                    # Public files used on the frontend
│   └── ...
├── server                    # Integrated server (API & Web server)
│   └── ...                   # See details in server/README.md
├── src                       # Frontend SPA
│   ├── components            # Common UI components shared between different views
│   │   └── ...
│   ├── views                 # UI views
│   │   └── ...
│   ├── formIntegrity.tsx     # Common form integrity checking functions
│   ├── hot-routes.tsx        # Bridge of `react-hot-loader` and routes
│   ├── index.tsx             # Entry of frontend
│   ├── layout.tsx            # Layout settings
│   ├── react-app-env-d-ts    # Generated by `create-react-app` with typescript template
│   ├── routes.tsx            # Routing of different views
│   ├── styling.tsx           # General styles of the frontend
│   ├── utils.ts           # Common utility functions
│   └── ...
├── .eslintrc.js              # Eslint configs
├── .prettierignore           # Prettier ignore files
├── .prettierrc.js            # Prettier configs
├── config-overrides.js       # Webpack configs
├── package.json              # Node project configs
├── tsconfig.json             # Typescript configs
├── tsconfig.paths.json       # Path abbreviation settings
└── ...

UI libraries used (mainly used)

• styled-components for creating highly customized css-in-js componenets
• material ui for creating material-styled components

Dev packages used (mainly used)

• react-router-dom( component routing )
• react-hot-loader( enables hot reload which facilitate development )
• react-app-rewired/react-app-rewire-hot-reloader( tweak webpack config without ejecting )
• react-loadable( dynamic import which enalbes code-spliting in route level )
• prettier/eslint( keeping coding style consistency )

References

• Spectrum a nice-written react project
• toptal-rest-series an example of express API with typescript