StudentBook

StudentBook is an educational social platform for students, faculty, alumni, staff, and recruiters. It combines campus-style social networking with posts, comments, profiles, announcements, articles, job posts, resource discovery, dark mode, image uploads, and an integrated campus Video Portal.

Features

• Role-aware student, faculty, and staff accounts backed by MySQL.
• Login and registration with hashed passwords and cookie-based authentication.
• Social feed with posts, likes, comments, image uploads, and profile pages.
• Search for users and student CGPA metadata.
• Announcement, article, and job boards.
• Integrated DB-backed Video Portal at /videos where signed-in users can publish, browse, feature, and delete their own YouTube video posts.
• Profile editing with cover and profile image uploads.
• Dark mode support across app shell, auth screens, forms, cards, and modals.
• Responsive desktop, tablet, and mobile layouts with a dedicated mobile primary navigation.
• Route-level lazy loading for main client pages.
• Separate standalone video portal prototype remains available in client/VideoPortal.

Tech Stack

Area	Technology
Main frontend	React 19, Vite 8, React Router 7, React Query 5
UI and styling	SCSS, Tailwind CSS 4, MUI 9, Heroicons, React Toastify
API	Node.js, Express 5, MySQL2, Multer, JSON Web Token, bcrypt
Database	MySQL
Video portal	Main app DB-backed portal, plus standalone React 19/Vite prototype
Tooling	Docker Compose, ESLint 10, npm lockfiles, GitHub Actions

Repository Layout

StudentBook/
  api/                 Express API and MySQL access
  client/              Main Vite React application
  client/VideoPortal/  Separate Vite React video portal prototype
  docker-compose.yml   Docker Compose app stack
  schema/              MySQL schema export
  img/                 README screenshots and diagrams
  .github/workflows/   Release automation

Requirements

• Node.js 22 or newer. The upgraded Vite and ESLint toolchain expects a modern Node runtime.
• npm 11 or newer.
• MySQL 8 or compatible.
• Docker Desktop or Docker Engine with Compose, if you want to run the full stack in containers.

Setup

Clone the repository:

git clone https://github.com/FahimFBA/StudentBook.git
cd StudentBook

Install API dependencies:

cd api
npm ci

Create the API environment file:

Copy-Item .env.example .env

Edit api/.env with your local MySQL credentials:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=studentbookdb
DB_CONNECTION_LIMIT=10

Import the database schema from schema/studentbookdb.sql. If you already have an existing StudentBook database, apply schema/add_videotable.sql to add the Video Portal table without reimporting the full dump.

If you want to use the sample password from older setup notes, run this in MySQL as an admin user:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '1234';
FLUSH PRIVILEGES;

Install the main frontend:

cd ..\client
npm ci

Install the video portal when you need it:

cd VideoPortal
npm ci

Running Locally

Start the API:

cd api
npm start

The API runs on http://localhost:8800.

Start the main frontend in another terminal:

cd client
npm run dev

Open http://localhost:5173/login.

The main app routes include:

Route	Purpose
/login	Sign in
/register	Create an account
/	Social feed
/profile/:id	Profile details and posts
/articles	Article board
/announcements	Announcement board
/jobs	Job portal
/videos	DB-backed Video Portal for user-submitted YouTube videos
/something	Campus Hub overview

Start the video portal prototype in another terminal when needed:

cd client\VideoPortal
npm run dev

Running With Docker

Build and start the full app stack from the repository root:

docker compose up --build

Docker Compose starts:

Service	URL	Notes
Main frontend	http://localhost:5173	Built Vite app served by nginx
API	http://localhost:8800/api/health	Express API, also proxied through the frontend at /api
MySQL	internal Docker network only	Initialized from schema/studentbookdb.sql on first run

The Compose stack builds the frontend with VITE_API_BASE_URL=/api/, so browser requests go through nginx and keep authentication cookies on the same origin.

The Docker database uses the mysql-data volume, so the schema import runs only when that volume is first created. To reset the Docker database and import the schema again:

docker compose down -v
docker compose up --build

Uploaded files are stored in the uploads volume and served by the frontend container from /upload/....

Useful Commands

Location	Command	Purpose
api	npm start	Start the Express API with Nodemon
api	npm audit	Check API dependency advisories
client	npm run dev	Start the main frontend
client	npm run build	Build the main frontend
client	npm run build:demo	Build the static GitHub Pages demo with mocked browser data
client	npm run lint	Run ESLint
client	npm audit	Check main frontend dependency advisories
client/VideoPortal	npm run dev	Start the video portal
client/VideoPortal	npm run build	Build the video portal
client/VideoPortal	npm audit	Check video portal dependency advisories
repository root	docker compose up --build	Start MySQL, API, and frontend containers

Static Demo on GitHub Pages

The repository includes a GitHub Pages workflow at .github/workflows/deploy-pages.yml. It builds the Vite client with npm run build:demo, so the published site does not connect to MySQL or the Express API. Demo posts, likes, comments, profiles, articles, jobs, announcements, and videos are served from seeded browser data and any changes are saved only in the visitor's local storage.

To publish it:

1. Push the repository to GitHub.
2. In the GitHub repository settings, open Pages.
3. Set Build and deployment to GitHub Actions.
4. Push to main or master, or run Deploy static demo to GitHub Pages manually from the Actions tab.

The deployed app uses hash routes, so demo pages open under URLs like:

https://<your-github-user>.github.io/<repo-name>/#/

Test Accounts

These accounts are available when the sample database has been imported:

Type	Username	Password
Student	Jane	1212
Student	R2	1212
Student	Mou	1212
Faculty	Israt	1212
Staff	Anisul	1212

Release Process

Releases are driven by CHANGELOG.md.

1. Add a new version section at the top of CHANGELOG.md.
2. Use this heading format:

## [2.6.0] - 2026-06-13

3. Commit and push the changelog change to main or master.
4. The Release from changelog workflow creates a matching version tag and publishes a GitHub Release using that changelog section as the release notes.

If the release already exists, the workflow exits without changing it.

Screenshots

The UI has been redesigned since the original screenshots were captured. The checked-in screenshots remain useful as historical feature references, but the current app now uses the updated responsive shell, mobile primary navigation, DB-backed Video Portal, route-level loading, and full dark-mode-aware surfaces.

Before and After Demo

Login

Register

Home

Profile

Articles

Announcements

Jobs

Team

• Md. Fahim Bin Amin, Team Leader
• Israt Jahan Khan, Database Designer
• Sadia Afrin Mou, Database Designer and Poster Designer
• Abtahi Arifeen, Extra Supportive Member

License

This project is licensed under the MIT License. See LICENSE.