🌐 CEID-WEB-PROJECT-2023

This project was made for the 7th semester undergraduate course "Web Programming & Systems" of the Computer Engineering & Informatics Department (CEID), University of Patras.

The project is about designing a small website from scratch, by implementing both the frontend (pure HTML/CSS/Javascript) and the backend (Node.js). The website is a platform for coordinating volunteers during natural disasters, where citizens can donate or request first aid equipment. Because the citizens are unable to get around, the organization's rescuers use trucks to take up tasks (offers and requests) in the affected areas. Additionally, there is a base in the area, where excess goods are gathered, allowing rescuers to load and unload items. The website is managed by admins, who post announcement about goods in need, monitor all tasks and rescuers in an interactive map and manage the inventory by adding, removing and editing items.

▶ Map icons by OpenMoji

Features

• A frontend made with only pure HTML/CSS/JavaScript. Zero frameworks!
• A backend made entirely in Node.js, using only the built-in http module.
• Log into the system, and it will remember you the next time you come back, as long as it is within 15 days. All user passwords are salted and hashed for extra security. Citizens can also register on their own, whereas new rescuers can only be added by an admin.
• All users have maps in their front pages, displaying information that is relevant to them. Each map comes with a set of filters.
• Admins can post announcements in their front page about items that are most in need. Click on any announcement to see the items.
• Admins can initialize the items in the database with a local JSON file. Additionally, data can be pulled from the public repository at http://usidas.ceid.upatras.gr/web/2023/ that was maintained during the duration of the project. That is why some of the first aid items are actually just energy drinks.
• Admins can edit the details of any item through a simple and intuitive interface.
• Admins can see usage statistics, such as number of completed offers and requests in a time period.
• Citizens can create new offers and requests. A rescuer will come to their location, which they specify by clicking on the map.
• Rescuers can accept or cancel tasks, or exchange items with the organization's base. A rescuer's page must also work on phones!
• Cookies (😋) keep track of user sessions, allow users to stay logged-in for long periods of time and enforce authorized access to every file, database table and endpoint.
• Caching of all resources using the Cache-Control header (disabled by default - enable it in config.js)
• Reusable functions on the client-side by allowing JavaScript files to be "included"/ merged in the server before sending.

Database Schema

Screenshots

📸 Screenshots (click to expand)

Login – Welcome.

Admin: Main Page – Announcements and map with filters. Map updates every 20 seconds.

Admin: Inventory – Select an item from the inventory and edit its details.

Citizen: Request – Filter items by category, choose your location on the map and submit request.

Citizen: Offer – Open an announcement and donate the requested goods.

Rescuer – Load and unload items.

Rescuer – The rescuer's page also has ✨ responsiveness ✨.

How to Run

First, clone this repository and enter the directory:

git clone [email protected]:PKalozoumis/CEID-WEB-PROJECT-2023.git

cd CEID-WEB-PROJECT-2023

Installing Node.js

The server is written in Javascript and requires the Node.js runtime environment to run. To check if it's installed, run the following:

node -v

You should see a version number. If not, then it isn't installed.

If you're on Windows, go to the official Node.js website and scroll down, where you can easily download a prebuilt version of Node.js

On Linux, the best way to install it is through nvm (Node version manager). Please follow the instructions under "Installing and Updating". The command you have to run looks something like this, but do check the actual page in case a newer version exists:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Then, install the latest Node.js version with

nvm install node

In both cases, verify the installation with node -v

Setting Up the Database

The easiest way to create and populate the database is to load the database dump directly. First, go to the data directory:

cd data

Here, the export.sql file is located. To load it, first make sure you have access to your mysql server. Then, connect to the server and source the file. This will automatically create the database, with all the tables and records:

SOURCE export.sql

While in the server, create a new user who will be used by the server/ backend to connect the database. This step is optional, as you can use an already existing user. The following mysql command will create a user named web_project_2023_user with a high-security password:

CREATE USER 'web_project_2023_user'@'localhost' IDENTIFIED BY 'password';

Grant the user permissions to the new database:

GRANT ALL PRIVILEGES ON web_project_2023.* TO 'web_project_2023_user'@'localhost' WITH GRANT OPTION;

FLUSH PRIVILEGES;

Exit the server. Back in the base directory, edit the config.js file with your database credentials:

module.exports = {
    serverHost: "localhost",
    serverPort: 8080,

    dbHost: "localhost",
    user: "web_project_2023_user",
    password: "password",
    database: "web_project_2023",
    dbPort: "3306"
}

Alternative Database Population

Another way to populate the database is to create it using the scripts under data/sql/, create a new user like before and then run the server/init.js script, which will fill the database with data.

Running the App

From the base directory, go to the server directory:

cd server

Install the required dependencies. The server needs the mysql2 package to interface with the database and the bcryptjs package to hash user passwords:

npm install

Run the app with the following command:

npm start

The default address is "localhost:8080", which you can write directly in the browser to access the website.

⚠ IMPORTANT: If you want to access the website from another device in your local network, make sure to change the serverHost from localhost to your local IP, as localhost only allows your device to enter.

In the login screen, choose any one of the users to log-in as. There are three types of users, with completely different pages they can access:

Username	Password
Admin	Password_1
Citizen	Password_1
Rescuer	Password_1