NIJobs - FrontEnd

A platform for companies to advertise their job opportunities to the students

Made with ❤️ by NIAEFEUP.

Installation

Prerequisites

• Docker
• Docker Compose

Installing Docker

The best approach to install docker is to follow the offical guide here.

Please follow the steps in Install using the repository section.

Next, follow these steps to configure docker access with non sudo permissions in the Manage Docker as a non-root user section.

Installing Docker Compose

The best approach to install docker-compose is to follow the offical guide here.

Usage

Development

To start developing, you must create a file .env with environment variables, which are explained in more detail below.

After creating the .env file, you must build a dev server.

docker-compose build

If you have already built the images/containers before you can simply run:

docker-compose up

If you are developing in VS Code, ESLint (the linter and formatter used in this project) might flag an error in /src/components/RulesPage/rules.js. If that happens you should add the following line to your settings.json file: "eslint.nodeEnv": "development"

Using custom API Backends

In order to test something before merging a Pull Request, for example, in the NIJobs Devtools toolbar, you can specify the API host for the application to call. This is useful since in Netlify it doesn't have direct access to your localhost backend.

NIJobs Devtools are only available in non-production environments or if otherwise specified via REACT_APP_ALLOW_DEV_TOOLS=true env variable

For it to work, you must serve a backend through some server accessible on the internet. An easy way to do it is using ngrok.

After starting your server on localhost, you can create a tunnel from that localhost server to the internet with ngrok with the following command:

ngrok http https://localhost:8087 --region eu # chage port if not using default 8087

That will give you two hosts, one for http, another for https. Use the https one in the NIJobs Devtools.

Remember that the backend server must allow the host making the requests (the Netlify origin (i.e. https://deploy-preview-66--nijobs.netlify.app/), or your localhost (i.e. https://localhost:3000), depending on the use-case).

Also, since the development backend uses a self-signed certificate, your browser might block it by default. To fix this, simply visit an endpoint and allow it (e.g. https://localhost:8087).

This can also be useful if you don't want to run the server on your local machine, since you are only developing the frontend. In that case, you can use the staging deployment at https:/ni.fe.up.pt/st4g1ng/nijobs/api, but beware that CORS will block your localhost by default, so you must talk with a project maintainer to discuss permissions.

A dev.sh file is available in the project's root folder to run these commands on linux environments (simply run ./dev.sh [--build])

This will create a development server with hot reloading which will listen on https://localhost:<HOST_PORT>.

Env File Specification

• HOST_PORT= The port where you will access the dev server in your machine (https://localhost:<HOST_PORT>)

Project Details

This project uses React.js with Redux for the state management. The visual framework used is MaterialUI.

Project Structure

.
├── public :: Generated Website ends up here
└── src
    ├── actions :: Redux Actions
    ├── components :: General React Components
    │   └── HomePage :: Example folder for components used in specific page
    ├── pages :: Page Components
    └── reducers :: Redux Reducers

License

GNU General Public License v3.0