EPFBook is a web-based social networking platform created as a project for the MDE Web Programming course with Node.js, Express and MongoDB.

• Installation
  • Pre-requisites
  • Setup
• Usage
  • Development mode
  • Production mode
  • Deploy EPFBOOK on a server
• Features
  • API
    • GET requests
    • POST requests
    • PUT requests
  • Website
    • Home page
    • From CSV database
    • From MongoDB database
    • Data visualization page
    • Student details / Update student's data
  • Other features
    • ESLint
    • Responsive
    • Handle the scenario where the id parameter does not match any student in the details view
    • Basic Authentification
• Rick and Morty API Example
  • Documentation Reference
  • The request
  • The result

Before you begin, ensure you have met the following requirements:

• Git (v2.34.1 or higher)
• Nvm (v0.39.7 or higher)
• Docker (v25.0.3 or higher)

To install EPFBook, follow these steps:

1. Clone the repository:

   git clone [email protected]:EPF-MDE/MMMDE4IN19-24-EPFBOOK-burdinat-theo.git

   or

   git clone https://github.com/EPF-MDE/MMMDE4IN19-24-EPFBOOK-burdinat-theo.git

2. Navigate to the project directory:

   cd MMMDE4IN19-24-EPFBOOK-burdinat-theo

3. Install node (v21.6.2):

   nvm install

4. Install dependencies:

   npm install

EPFBook is now ready to run

To run EPFBook in development mode (Nodemon), follow these steps:

1. Create or start the MongoDB server:

   npm run docker_create #If it has never been created before

   npm run docker_start #If you just want to start the server

2. Run the application:

   npm run dev

3. Open a web browser and navigate to http://localhost:3000 to access the application.

4. Access to the app with admin IDs:

   Username: admin

   Password: admin

5. To exit MongoDB server:

   npm run docker_stop

The server will restart automatically on code update. You can stop the server using Ctrl+C.

To run EPFBook in production mode (PM2), follow these steps:

1. Dowload PM2 (only the first time):

   npm i --save --global pm2

2. Create or start the MongoDB server:

   npm run docker_create #If it has never been created before

   npm run docker_start #If you just want to start the server

3. Run the application:

   npm run pm2_start

4. Open a web browser and navigate to http://localhost:3000 to access the application.

5. Access to the app with admin IDs:

   Username: admin

   Password: admin

6. You can stop the app using:

   npm run pm2_stop

7. To exit MongoDB server:

   npm run docker_stop

The server will restart automatically in case of unexpected crash.

First 1 to 3 are to do only the first time.

1. Install NGINX - it will permits to set up a reverse proxy:

   sudo apt-get install nginx

2. Update NGINX configuration to redirect HTTP requests on port 80 to port 3000:

   sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.backupsudo 
   nano /etc/nginx/sites-available/default

   Content to update:

   server {
   	listen 80; 
   	server_name p3000; 
   	location / { 
   		proxy_pass http://0.0.0.0:3000; 
   		include /etc/nginx/proxy_params; 
   	}
   }
   

3. Restart NGINX:

   sudo systemctl restart nginx

4. Then you can run the app following dev or prod modes, and connect you to the app using the IP address of your server.

GET http://localhost:3000/api/students

GET http://localhost:3000/api/students/from-db

GET http://localhost:3000/api/students/:id

In this section you should use json format to input student's data :

{"name": "Théo BURDINAT", "school": "EPF"}

POST http://localhost:3000/api/students/create

POST http://localhost:3000/api/students/create-in-db

POST http://localhost:3000/api/students/:id

POST http://localhost:3000/api/login

PUT http://localhost:3000/api/students/:id

http://localhost:3000/

This page provide a nice homepage with a header that display a menu to navigate through the app. This menu is available from all the different pages.

http://localhost:3000/students

This page display all the students stored in the CSV file. You can click on a student name to go to his details page, or click on the button at the end of the list to add new students.

http://localhost:3000/students/create

This page is a student creation form. You can type information about the student you want to add to the CSV database, then click on the "Add" button. A popup will tell you if everything worked well.

http://localhost:3000/students/from-db

This page display all the students stored in the MongoDB database. You can click on the button at the end of the list to add new students.

http://localhost:3000/students/create-in-db

This page is a student creation form. You can type information about the student you want to add to the MongoDB database, then click on the "Add" button. A popup will tell you if everything worked well.

http://localhost:3000/students/data

This page allows you to display some interesting plots about students' stress busters and try to show the best stress busters to avoid health issues during the lockdown (The top one seems to be online gaming).

http://localhost:3000/students/:id

This page display all the data of the id's student. On this page, you can update the profile of the student using the form, pre-filled with student's information and clicking on the update button. This method is using a POST request.

If you prefere to use a PUT request, you can click on the button "Update with PUT method", that will redirect you to the next page:

http://localhost:3000/students/:id/update

On this page, you have an update form prefilled with student's information. When you click on the "Update" button, data of the student will be updated using a PUT request.

This project use ESLint to maintain a good code quality. You can check the code quality using the following command:

npm run eslint

The application is responsive and can be used on mobile devices. All not essential long paragraphs are removed on the mobile version, and the menu and the different forms will adapt to the size of your device.

If you try to access a student's details page for a non-existing id, you will be redirected to a "Student not found" page.

The app is using basic authentification on all its pages. You can use the app using the following credentials right after the setup:

You can add new users to the app by adding them in the users.csv file. As passwords are encrypted you have to encrypt your password before adding it to the file. To do so, run the hashPassword script:

./scripts/hashPassword.js

To connect on the API, you have to use a basic authentification Authorizer header. To know what you have to put inside, run these line and copy the result:

node //Switch to node terminal
> "Basic " + Buffer.from("username:password").toString("base64");

This example demonstrates how to perform a basic API GET request to retrieve information about a specific character from the Rick and Morty API. We'll find out details about the character with ID 5.

The detailed documentation of Rick and Morty API is available here.

To fetch details about the character with ID 5, we need to execute a GET request to the following URL:

GET https://rickandmortyapi.com/api/character/5

I recommend you use Insomnia to easily make your API requests.

We found that the character with ID 5 is Jerry Smith !

{
 "id": 5,
 "name": "Jerry Smith",
 "status": "Alive",
 "species": "Human",
 "type": "",
 "gender": "Male",
 "origin": {
 	"name": "Earth (Replacement Dimension)",
 	"url": "https://rickandmortyapi.com/api/location/20"
 },
 "location": {
 	"name": "Earth (Replacement Dimension)",
 	"url": "https://rickandmortyapi.com/api/location/20"
 },
 "image": "https://rickandmortyapi.com/api/character/avatar/5.jpeg",
 "episode": [
 	"https://rickandmortyapi.com/api/episode/6",
 	"https://rickandmortyapi.com/api/episode/7",
 	"https://rickandmortyapi.com/api/episode/8",
 	"https://rickandmortyapi.com/api/episode/9",
 	"https://rickandmortyapi.com/api/episode/10",
 	"https://rickandmortyapi.com/api/episode/11",
 	"https://rickandmortyapi.com/api/episode/12",
 	"https://rickandmortyapi.com/api/episode/13",
 	"https://rickandmortyapi.com/api/episode/14",
 	"https://rickandmortyapi.com/api/episode/15",
 	"https://rickandmortyapi.com/api/episode/16",
 	"https://rickandmortyapi.com/api/episode/18",
 	"https://rickandmortyapi.com/api/episode/19",
 	"https://rickandmortyapi.com/api/episode/20",
 	"https://rickandmortyapi.com/api/episode/21",
 	"https://rickandmortyapi.com/api/episode/22",
 	"https://rickandmortyapi.com/api/episode/23",
 	"https://rickandmortyapi.com/api/episode/26",
 	"https://rickandmortyapi.com/api/episode/29",
 	"https://rickandmortyapi.com/api/episode/30",
 	"https://rickandmortyapi.com/api/episode/31",
 	"https://rickandmortyapi.com/api/episode/32",
 	"https://rickandmortyapi.com/api/episode/33",
 	"https://rickandmortyapi.com/api/episode/35",
 	"https://rickandmortyapi.com/api/episode/36",
 	"https://rickandmortyapi.com/api/episode/38",
 	"https://rickandmortyapi.com/api/episode/39",
 	"https://rickandmortyapi.com/api/episode/40",
 	"https://rickandmortyapi.com/api/episode/41",
 	"https://rickandmortyapi.com/api/episode/42",
 	"https://rickandmortyapi.com/api/episode/43",
 	"https://rickandmortyapi.com/api/episode/44",
 	"https://rickandmortyapi.com/api/episode/45",
 	"https://rickandmortyapi.com/api/episode/46",
 	"https://rickandmortyapi.com/api/episode/47",
 	"https://rickandmortyapi.com/api/episode/48",
 	"https://rickandmortyapi.com/api/episode/49",
 	"https://rickandmortyapi.com/api/episode/50",
 	"https://rickandmortyapi.com/api/episode/51"
 ],
 "url": "https://rickandmortyapi.com/api/character/5",
 "created": "2017-11-04T19:26:56.301Z"
}