maxwaiyaki/zabo-front-reactjs

Image and Poster Advertising Service @ KAIST

ZABO with modern JS, designed and developed by SPARCS
Go to ZABO

About

ZABO helps KAIST students based individuals or clubs advertising themselves via web based platform. While this service is open for public, only approved groups are able to post images. Please submit your request in order to create a new group via our website.

This Project is being maintained by SPARCS KAIST

We're expecting our users post there recruiting announcements, performance schedules, and any other events advertisments. However, there's no strict restrictions on contents that users upload.

Please contact us to get more detailed information.

If you're looking for backend codes, you can find it in here

Previews

Table of Contents

• Prerequisites
• Getting Started
  • Running Development Server
    • Using npm
    • Using yarn
  • Available Scripts
    • Storybook
    • Generate Component
    • Post Build
    • Pre-Commit
  • Get Ready for Production
    • Using npm
    • Using yarn
• Proxy API Requests
• Authentication
• Built With
• Folder Structure
• Deployment
• Authors
• Contributing
• License
• Acknowledgements

Prerequisites

You’ll need to have Node 8.10.0 or local development and production machine. You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects. Node.js. That's all you need.

node -v // v10.16.3

Getting Started

Running Development Server

npm

Run webpack dev server

npm install // Installing dependencied with node js package manager
npm start // Refer to react-scripts(https://www.npmjs.com/package/react-scripts) to learn more about this.
// Follow the instructions on terminal

yarn

Run server

yarn // Installing dependencied with node js package manager
yarn start // Refer to react-scripts(https://www.npmjs.com/package/react-scripts) to learn more about this.
// Follow the instructions on terminal

Available Scripts

Storybook

yarn storybook

Generate Component

Using React hook, this script is no longer used.

yarn generate [% component_architecture %] [% component_name %] "[% options %]"

• component_architecture : One of [atoms, molecules, organisms, templates, pages]
• component_name : Captitalized first character is recommended (ex: HomePage)
• options (optional) : Combination of characters (r : react component, s : styled component, y : storybook, c : redux container) or '*' for all. Options must be captured inside quotes (" or '). Default option is "rsy"

Post Build

yarn postbuild

Helper script, making Front-end deployment graceful.

Automatically triggered after build command finishes.

Pre-Commit

yarn precommit

Lint and rewrite staged files.

Automatically triggered before commit.

Get Ready for Production

npm

Build static files with webpack

npm install // Installing dependencied with node js package manager
npm run build  // Refer to react-scripts(https://www.npmjs.com/package/react-scripts) to learn more about this.
server -s deploy // or serve static files located in /deploy with whatever you like!
// I recommend you to set up production server with nginx. Please refer to [Deployment](#deployment) section for more.

yarn

Build static files with webpack

yarn // Installing dependencied with node js package manager
yarn build  // Refer to react-scripts(https://www.npmjs.com/package/react-scripts) to learn more about this.
server -s deploy // or serve static files located in /deploy with whatever you like!
// I recommend you to set up production server with nginx. Please refer to [Deployment](#deployment) section for more.

Proxy API Requests

Using http-proxy-middleware, all requests are proxied to localhost:6001 on which our API server is located.

Authentication

All requests sent from client are intercepted by an axios instance located in axios.js.

Axios request interceptor attaches authentication token into request header.

Built with

• Atomic Web Design
• Create React App - Easy set up for react project
• Redux - In-memory data structure store.

Folder Structure

zabo-front
├── README.md
├── LICENSE.md
├── deploy
├── public
├── node_modules
├── package.json
├── .gitignore
├── tools
│   ├── generate-component.py
│   └── moveBuildFolder.sh
├── src
│   ├── index.js - Entry point
│   ├── App.js
│   ├── boot.js - Ran before rendering app
│   │
│   ├── components - All React Components
│   │   ├── container
│   │   ├── atoms
│   │   ├── molecules
│   │   ├── organisms
│   │   ├── templates
│   │   └── pages - Please refer to atomic web design (http://bradfrost.com/blog/post/atomic-web-design/)
│   │
│   ├── lib - Libraries and utility functions
│   ├── hoc - Higher order components (https://reactjs.org/docs/higher-order-components.html)
│   ├── locales - Translation files /en, /kr
│   ├── static - Static files such as images
│   └── store - Redux files
└── index.js  - Entry point

Deployment

First, build static files with webpack regarding to Get Ready for Production And then follow zabo-server-nodejs deployment guide-line

Contributing

Please checkout CONTRIBUTING.md for more.

Authors

• Cookie - Cookie
• Youns - Youns
• Hubo - bhanghj3094
• Hou - Sanghou
• Parang - pa-rang
• Paco - pacokwon
• Sniperj - sni-j
• LuLu-jun - lulu-jun

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

We're renewing following projects.

Zabo-WEB and Zabo-API