Time Table Selector - Frontend

A platform where students can experiment with the possible combination of schedule options they can pick at the start of the semester

A platform to students build their schedules.
Made with ❤️ by NIAEFEUP.

Installation

In order to run this project, you need to have Docker.

Brief explanation of used vite commands

npm run dev

This is the command that should be used if you do not want to use docker and want to run a development server.

Before running this you should have previously ran npm install.

npm run build

It builds the react application by generating static files that would be a lot like what a website would look like if no frameworks were used.

It greatly minifies the files and reduces the number of them, making a way better experience for the user.

Before running this you should have previously ran npm install.

npm run preview

This allows us to preview what the production build will look like but Vite does not recommend at all using this in the production image at all.

Running the project

In local development, after you run the project you can access it at localhost:3100/tts. If you just go to localhost:3100/ you will be greeted by a blank screen.

Docker

This is the recommended approach since it uniformizes the way the application behaves since the developers do not have the same computer hardware nor the same operating system.

Development

Firstly, you have to create an .env file in order for the app to receive environment variables.

cp .env.example .env

Then, to build the application run:

./build.sh dev

Or directly with Docker (although build.sh also uses docker)

docker compose build tts-frontend

After build, run to execute:

./dev.sh

If the script is not able to be executed you may have to change its permissions in order for you to have execution permission (x).

chmod u+x ./dev.sh

To stop the container:

docker-compose down

After executing the application, open your browser at: localhost:3100

Production

In order to run the production build, we need to use the tts-frontend-prod container instead of the tts-frontend one.

In the production build we are serving a static page with minified html, css and javascript files, greatly reducing the load of the page.

Firstly, you have to create an .env file in order for the app to receive environment variables.

cp .env.example .env

Internally, when the production build runs with vite, it creates an .env.production file from the .env file to be used by the vite build command. This was done to ease the development process, since running ./dev.sh complained that the .env.production was not found.

To build the application run:

./build.sh prod

Or directly with Docker (although build.sh also uses docker)

docker compose build tts-frontend-prod

After build, run to execute:

./prod.sh

If the script is not able to be executed you may have to change its permissions in order for you to have execution permission (x).

chmod u+x ./prod.sh

To stop the container:

docker-compose down

Baremetal with npm

npm install
npm run dev

In case you have problems with this commands you may run

rm -rf node_modules
rm package-lock.json

And then try the previous commands (npm install and npm run dev again).

In case you want to preview the production build you can run

npm run preview