Prog Web - Client & Server side : Development of a collaborative platform for exchanging audio plugins 🎵 🎶 ❤️
In this document, you will find:
- Student names
- How to run the projet and tests
- How to use implemented features
- Aourinmouche Chihabeddine 😇 Back-end & Font-end
- Aourinmouche Soufiane 😈 Back-end & front-end
- Humbert Alix 😆 Mainly front-end and few back-end
- Larabi Walid 😎 Mainly back-end
- Install Docker with docker-compose version >= 3.2 (Recommended version 3.2)
- Install Node version >= 8
- Install Mongodb version >= 3.4
The app is made out of 2 different modules : Back-end and Front-end. They are both containerized, with required dependencies, in Docker container that allows to execute all the environment with one command. The goal for using Docker is to make the app independent from the environment and the machine where it runs. The provided Dockerfile does install required dependencies, copies the /build folder in the virtual environment, exposes the right ports and serves /build. The two modules can be runned separately without using Docker.
If you don’t have Docker installed, please do the following commands in the root :
To run the backend :
cd back-end
npm install
npm start
it will run on : localhost:4000
To run the front, in a new terminal window :
cd front-end
npm install
npm start
it will run on : localhost:3000
If you have Docker installed, please do the following steps :
In the root directory of this code, use the following commands:
docker-compose build - to build the project
docker-compose up - to run the project
Note: You may need to run with the root permission if Docker is installed via root user. like: sudo docker-compose up
These command runs the following services using docker-compose.yml
services will run on :
frontend: http://localhost:5000/home
backend: http://localhost:4000
back service will run and create container called demo-back-end.
back service is our service layer running on top of mongodb. The default port at which this service is running is 5000 which can be changed by setting the environment variable
Note: You need to open port 4000 from the server configurations to make it avaiable for demo server. If you want to change/customize the port you can change the outisde port from the back service of docker-compose.yml file. Like if you want to configure port 4001 then you need to replace the following lines:
ports:
- '4000:4000'
with the following lines:
ports:
- '4001:4000'
front service will run and create container called demo-front-end. It needs back services to intract with the database that is why it will run after back service image.
When running the app, the home page is opened. It lists all plugins that have been published and stored in our MongoDB database. Information about each plugin is represented in a card. We can find information below :
In order to display a plugin details, you need to click in its name. A window is opened displaying the same component we can see in the picture above, with its description. To close the window, click on "Escape" button or on the plugin name, or even outside the window.
It is possible to login the app. To do so, click on "CONNEXION" button in top right of the navigation bar. Write you logins : 📧 email= soufiane@aouri.com and 🛂 password= 000000 then click on "CONNEXION" button. Otherwise, you can also use the app without login. To do so, click on "Continuer en tant que visiteur". This will reduce features you can use in the app ! Once you're logged in, you have access to more features. When you come back to the home page, you can add a comment or rate a plugin by going on its details panel like described above.
In order to upload a new plugin, there is a dedicated button "Publier un plugin" in the navigation bar. You have access to it only if you're logged in ! Clicking on it will redirect you to Upload page. The upload can be made in 2 or 3 steps :
--> First step : Fill the form with name, version, URL video, URL image ... All fields are required except Tags.
You can add up to 5 tag at maximum. To add a tag, type it "tag1 bla bla.." then press OK, this will add "tag1 bla bla.." in the list, then you can do the same to add a second one ... The submit button is disabled till the required fields are filled. Required fields are marked with (*).
When you toggle on "open source" button, the second step "Upload zip" is enabled and a button "submit" become "next". Click on "Charger l'archive du plugin" and choose plugin zip then click "submit". A confirmation message appears. Returning to the home page, you can see you're new uploaded plugin in the top of the list as they are sorted by upload date (this choice has been taked for demonstration purpose, thus we can see easily the uploaded plugin without looking for it ampng the list items) ! Congrats. 👏
to run tests, please do following command :
npm test
if somme dependencies are missing, please install them with following commands :
npm install --save chai
npm install --save supertest