Skip to content

NTUCourse-Neo/ncn-frontend

Repository files navigation

ncn-frontend

The frontend of NTUCourse Neo.

GitHub branches GitHub branches GitHub branches GitHub branches

GitHub branches Better Uptime Badge

🛠 Deployment

🐋 Docker (Recommended)

  1. Clone the repository

    git clone https://github.com/NTUCourse-Neo/ncn-frontend.git
    cd ncn-frontend
  2. Prepare your .env file

    Run command below to create a .env file

    cp .env.defaults .env

    Then paste your keys into the file. Please refer to the table below.
    Reminder: Make sure you follow the environment variable file format of Docker.

    KEY Description Default Value
    REACT_APP_API_ENDPOINT Backend API Endpoint URL http://localhost:5000/api/
    REACT_APP_API_VERSION Backend API Endpoint Version v1
    REACT_APP_AUTH0_DOMAIN Auth0 Domain N/A
    REACT_APP_AUTH0_CLIENT_ID Auth0 Single Page Application Client ID N/A
    REACT_APP_SELF_API_AUDIENCE NTUCourse-Neo API Identifier N/A
    REACT_APP_RECAPTCHA_CLIENT_KEY reCAPTCHA Service Client Key N/A
    REACT_APP_GA_TRACKING_ID Google Analytics Tracking ID (Started with UA-) N/A
  3. Install Docker on your device.

    Please refer to this guide.

  4. Build docker image

    docker build -f Dockerfile -t ncn-frontend .
  5. Run the built image in container

    docker run --env-file .env -p 3000:3000 ncn-frontend
  6. Open the browser and go to http://localhost:3000/ and you should see the website running.

  7. Have fun! 🎉

💻 Run in local

  1. Clone the repository

    git clone https://github.com/NTUCourse-Neo/ncn-frontend.git
    cd ncn-frontend
  2. Prepare your .env file

    Run command below to create a .env file

    cp .env.defaults .env

    Then paste your keys into the file. Please refer to the table below.

    KEY Description Default Value
    REACT_APP_API_ENDPOINT Backend API Endpoint URL http://localhost:5000/api/
    REACT_APP_API_VERSION Backend API Endpoint Version v1
    REACT_APP_AUTH0_DOMAIN Auth0 Domain
    REACT_APP_AUTH0_CLIENT_ID Auth0 Single Page Application Client ID
    REACT_APP_SELF_API_AUDIENCE NTUCourse-Neo API Identifier
    REACT_APP_RECAPTCHA_CLIENT_KEY reCAPTCHA Service Client Key
    REACT_APP_GA_TRACKING_ID Google Analytics Tracking ID (Started with UA-)
  3. Install required dependencies

    yarn
  4. Run the server

    yarn start
  5. Open the browser and go to http://localhost:3000/

    and you should see the website running.

  6. Have fun! 🎉

📦 Packages

  • babel
  • dotenv-defaults
  • chakra-ui/react
  • react-icons
  • react-router-dom
  • Redux
  • axios
  • react-ga
  • array-move
  • react-sortable-hoc
  • auth0-react
  • react-spinners
  • react-table-drag-select
  • react-scroll
  • react-focus-lock
  • react-google-recaptcha
  • react-countdown-hook
  • color-hash
  • randomcolor