A campus community platform for students to share discoveries, join island communities, comment, chat live, and play a daily Wordle.
🎥 Click here to watch our Video Presentation 🎥
Campus life generates a constant flow of information — announcements, academic discussions, group collaborations, and social interactions — that is typically fragmented across messaging apps, bulletin boards, and separate platforms. Campusaurus was developed to centralize this experience into a single, student-facing web application tailored to the structure and culture of a Philippine university campus.
Students lack a unified digital space to:
- Receive official announcements in real time
- Organize discussions by college or interest group
- Engage with peers through posts and comments
- Access campus-specific features (like a shared daily game) in a familiar environment
Existing general-purpose platforms (Facebook groups, group chats) offer no structure, moderation control, or campus-specific organization.
Included:
- User registration and session-based authentication
- Campus announcements (admin-managed)
- Posts organized by Islands (colleges) and Nests (sub-communities)
- Inline commenting on posts
- Live chat (polling-based, refreshes every 5 seconds)
- User profiles with avatar, department, and year level
- Daily Wordle mini-game
- Admin privilege system
Not included:
- Real-time WebSocket communication
- Mobile application
- File/image upload in posts
- Private messaging between users
- Email verification or password reset
| User Type | Description |
|---|---|
| Students | Primary users — browse posts, join nests, comment, chat, and play Wordle |
| Administrators | Faculty or staff — post announcements, moderate content |
| Guests | Unauthenticated visitors — read-only access to the feed |
To develop a full-stack web application that serves as a centralized campus community platform, enabling students and administrators to interact, share information, and engage with campus-specific content.
- Database Connectivity — Establish a stable and persistent connection to a MySQL database via SQLAlchemy ORM, with automatic table creation and session management.
- User Interface — Deliver a visually consistent, responsive UI using a shared CSS design system with dark-mode theming, CSS variables, and micro-animations.
- Data Management — Implement full CRUD operations for posts, comments, announcements, nests, and chat messages with proper validation and authorization.
- Search Functionality — Enable real-time client-side search and island-based filtering on the post feed without additional server requests.
- Passwords are hashed using Werkzeug's
generate_password_hash(PBKDF2-SHA256); plaintext passwords are never stored. - Sessions are managed server-side via Flask's signed cookie session (
SECRET_KEY). - A user is considered "logged in" if
session['user_id']is present and resolves to a valid user record. - Usernames and email addresses must be unique across all accounts.
- The application connects to MySQL using PyMySQL via SQLAlchemy's
create_engine. - Connection settings are loaded from environment variables (
.env) — never hardcoded. db.create_all()runs on application startup to ensure all tables exist.
- Create:
titleandcategoryIdare required for posts;titleandbodyfor announcements;contentfor comments. - Update (PATCH): Only the authenticated author or an admin may update a post or announcement.
- Delete: Only the authenticated author or an admin may delete a post. Any logged-in user may add a comment; only admins may remove others' comments.
- Empty strings after stripping whitespace are rejected with a
400error.
- All string inputs are stripped of leading/trailing whitespace before processing.
- Empty required fields return
400 Bad Requestwith a descriptive error message. - Invalid or non-existent resource IDs return
404 Not Found. - Unauthorized operations return
401(not logged in) or403(forbidden).
| Level | Who | Permissions |
|---|---|---|
| Guest | Unauthenticated | Read posts, announcements |
| Student | Authenticated user | All of above + create posts, comment, chat, create nests |
| Admin | Email in admins table |
All of above + edit/delete any post or announcement |
- Requires XAMPP (Apache + MySQL) running locally on port
3306. - Python 3.9 or higher is required.
- The application serves on
localhost:8080only; no HTTPS in the current scope. - The
adminstable uses email as the primary key — admin rights are granted by inserting a row directly into the database. __pycache__and.envare excluded from version control via.gitignore.
- A valid session cookie must exist for all write operations (POST, PATCH, DELETE).
- The database server must be running before the Flask application starts.
- If the
userstable is inaccessible at startup, the application logs a warning and falls back gracefully rather than crashing. - Chat messages are refreshed via client-side polling every 5 seconds — no persistent connection is maintained.
Entities and Relationships:
- A User can create many Posts, Announcements, Comments, Nests, and ChatMessages.
- A Post belongs to one Nest (via
category_id) and can have many Comments. - A Nest belongs to one Island (stored as a string identifier) and is created by one User.
- An Admin record (email only) grants elevated privileges to a User with a matching email.
| Table | Attributes |
|---|---|
users |
id (PK), username, email, password_hash, avatar_url, bio, age, gender, dept, year_level, created_at |
admins |
email (PK) |
announcements |
id (PK), title, body, author_id (FK → users), created_at |
posts |
id (PK), category_id, title, content, author_id (FK → users), likes, comments, created_at |
comments |
id (PK), post_id (FK → posts), author_id (FK → users), content, created_at |
nests |
id (PK), island_id, name, description, creator_id (FK → users), created_at |
chat_messages |
id (PK), user_id (FK → users), message, created_at |
Campusaurus follows a client-server architecture with a clear separation of concerns:
Browser (HTML/CSS/JS)
│
│ HTTP (REST API)
▼
Flask Application (src/app.py)
│
│ SQLAlchemy ORM
▼
MySQL Database (XAMPP)
The backend loosely follows MVC:
- Model —
src/models.py(SQLAlchemy ORM classes) - View —
public/(static HTML/CSS/JS pages served by Flask) - Controller —
src/app.py(Flask route handlers)
| Component | Location | Responsibility |
|---|---|---|
| Flask App | src/app.py |
Route definitions, auth, request handling |
| ORM Models | src/models.py |
Database table definitions and relationships |
| Store Modules | src/*_store.py |
Encapsulated DB queries per feature |
| Design System | public/base.css |
Global CSS variables, nav, breadcrumbs, toasts |
| API Client | public/api.js |
Centralized fetch wrapper for all frontend pages |
| Toast Module | public/toast.js |
Shared notification utility (replaces alert()) |
| Page Scripts | public/*/script.js |
Per-page logic as ES modules |
- Python 3.9+
- XAMPP (Apache + MySQL) — https://www.apachefriends.org/
- Git
- A modern web browser (Chrome, Firefox, Edge)
git clone https://github.com/jksalcedo/campusaurus.git
cd campusauruspython -m venv .venv
source .venv/bin/activate # Linux/macOS
.venv\Scripts\activate # Windowspip install -r requirements.txt- Open XAMPP Control Panel and start Apache and MySQL
- Open phpMyAdmin at http://localhost/phpmyadmin
- Create a new database named
campusaurus - Import
schema.sql— this creates all tables and inserts sample data
Copy .env.example to .env and fill in your values:
cp .env.example .envDB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_NAME=campusaurus
SECRET_KEY=your-secret-key-herepython server.py| Name | Role | Responsibilities |
|---|---|---|
| Jaressen Kyle Salcedo | Backend Developer | Flask routes, database models, API design |
| Kurt Rainier Aquino | Frontend Developer | HTML/CSS pages, JavaScript, UI/UX |
| Chris Jerico Francisco | Frontend Developer | HTML/CSS pages, JavaScript, UI/UX |
| Package | Version | Purpose |
|---|---|---|
| Flask | 3.0.3 | Web framework and routing |
| Flask-SQLAlchemy | 3.1.1 | ORM for database models |
| flask-cors | 4.0.0 | Cross-Origin Resource Sharing |
| PyMySQL | 1.1.0 | MySQL database driver |
| python-dotenv | 1.0.0 | Load environment variables from .env |
| blinker | 1.9.0 | Flask signal support (Flask dependency) |
| Werkzeug | (via Flask) | Password hashing, request utilities |
| Requirement | Minimum Version |
|---|---|
| Operating System | Windows 10 / macOS 12 / Ubuntu 20.04 |
| Python | 3.9+ |
| MySQL | 5.7+ (via XAMPP) |
| XAMPP | 8.x |
| Browser | Chrome 110+ / Firefox 110+ / Edge 110+ |
| Git | 2.x |
- Open XAMPP Control Panel → Start Apache and MySQL
- Activate the virtual environment:
source .venv/bin/activate # Linux/macOS .venv\Scripts\activate # Windows
- Run the server:
python server.py
- Open http://localhost:8080 in your browser
- Press
Ctrl + Cin the terminal to stop Flask - Stop Apache and MySQL in XAMPP Control Panel
| Role | Password | |
|---|---|---|
| Student | student1@example.com |
(see schema.sql — hashed, use Register) |
| Admin | kurtaquino49@gmail.com |
(set during registration) |
For a live demo, register a new account via
/register/— it takes under 30 seconds.
| Page | URL | Description |
|---|---|---|
| Base Camp (Feed) | / |
Main post feed with search and island filter |
| Announcements | /announcements/ |
Campus-wide announcements board |
| Islands | /islands/ |
College island overview with stats |
| Nests | /nest/?island=ccs |
Sub-community nests for a specific island |
| Create Post | /create/ |
Log a new discovery (post or announcement) |
| Profile | /profile/ |
View and edit your user profile |
| Login | /login/ |
Sign in to your account |
| Register | /register/ |
Create a new student account |
| Wordle | /wordle/ |
Daily Wordle mini-game |