ApplyCompass

A comprehensive web application platform for graduate school applications, designed to help students search, filter, compare programs, and manage their application timeline with ease.

📋 Project Overview

ApplyCompass is a full-stack web application developed as part of COMP3421 Web Application Design and Development course at The Hong Kong Polytechnic University. This project provides a centralized platform for students to discover and manage graduate program applications, specifically focusing on Master's programs offered by the eight major universities in Hong Kong for Fall 2026 intake.

🎯 Project Purpose

This application serves as a practical demonstration of modern web development technologies and best practices, covering both frontend and backend development, database design, user authentication, and API integration.

✨ Key Features

User Management

• User Registration & Authentication: Secure registration and login system with session management
• Session Management: Cookie-based sessions with 30-minute inactivity timeout
• User Profiles: Comprehensive profile management with personal information and resume sections

Program Discovery

• Program Search: Advanced search and filtering capabilities for Master's programs
• Filter Options: Filter by country, discipline, degree type, language policy, and tuition range
• Program Details: Detailed information for each program including requirements, deadlines, and fees
• Database: Pre-loaded with programs from all 8 major Hong Kong universities

Application Management

• Application Checklist: Track application deadlines and status for multiple programs
• Status Tracking: Monitor application progress (not-started, in-progress, completed)
• Program Comparison: Compare multiple programs side-by-side

Resume & Profile

• Resume Builder: Manage six resume sections (Score, Language, Honor, Project, Experience, Skill)
• Personal Information: Store and manage personal details, education background, and avatar
• Profile Scoring: Automatic profile score calculation based on resume completeness

🏛️ Supported Universities

The application includes programs from all 8 major universities in Hong Kong:

1. The University of Hong Kong (HKU)
2. The Chinese University of Hong Kong (CUHK)
3. The Hong Kong University of Science and Technology (HKUST)
4. The Hong Kong Polytechnic University (PolyU)
5. City University of Hong Kong (CityU)
6. Hong Kong Baptist University (HKBU)
7. Lingnan University
8. The Education University of Hong Kong (EdUHK)

🛠️ Technology Stack

Frontend

• Framework: Vue 3 with Composition API
• Routing: Vue Router
• State Management: Vuex
• Build Tool: Vite
• Styling: CSS3 with CSS Variables
• Language: TypeScript/JavaScript

Backend

• Framework: Flask (Python)
• Database: MySQL 9.5
• Authentication: JWT tokens with Cookie-based sessions
• Password Security: bcrypt for password hashing
• CORS: Enabled for cross-origin requests
• File Upload: Support for avatar image uploads

Database

• RDBMS: MySQL 9.5
• Tables: Users, Personal Info, Resume Sections, Programs, Checklist, Compare List, Sessions

📁 Project Structure

ApplyCompass/
├── Back_end/                 # Backend API server
│   ├── app.py                # Flask application and API endpoints
│   ├── init_db.py            # Database initialization script
│   ├── import_programs.py    # Program data import script
│   ├── requirements.txt      # Python dependencies
│   └── README.md             # Backend documentation
│
├── Front_end/                # Frontend Vue application
│   ├── src/
│   │   ├── components/       # Vue components
│   │   │   ├── views/        # Page components
│   │   │   ├── router/       # Vue Router configuration
│   │   │   └── store/        # Vuex store
│   │   ├── assets/           # CSS and static assets
│   │   └── main.js           # Application entry point
│   ├── package.json          # Node.js dependencies
│   └── README.md             # Frontend documentation
│
└── README.md                 # This file

🚀 Getting Started

Prerequisites

• Python 3.7+
• Node.js 16+ and npm
• MySQL 9.5
• pip (Python package manager)

Installation Steps

1. Clone the Repository

git clone https://github.com/JerryKongzzZ/ApplyCompass
cd ApplyCompass

2. Backend Setup

cd Back_end

# Install Python dependencies
pip install -r requirements.txt

# Initialize database (creates tables and imports sample programs)
python init_db.py

# Start the API server
python app.py

The backend server will start at http://localhost:5000

3. Frontend Setup

cd Front_end

# Install Node.js dependencies
npm install

# Start the development server
npm run dev

The frontend application will start at http://localhost:5173 (or the port shown in terminal)

Database Configuration

Default database configuration (can be modified in init_db.py and app.py):

• Host: localhost
• Port: 3306
• User: root
• Password:
• Database:

📚 API Documentation

Complete API documentation is available in Front_end/COMPLETE_API_DESIGN.md. The API includes:

• Authentication: /auth/register, /auth/login, /auth/logout
• User Profile: /users/:userid/profile
• Resume Management: /users/:userid/resume
• Program Search: /programs, /programs/:id
• Checklist: /users/:userid/checklist
• Compare: /users/:userid/compare

🔐 Security Features

• Password Hashing: bcrypt for secure password storage
• Session Management: HttpOnly cookies with automatic expiration
• JWT Tokens: Token-based authentication (backward compatible)
• Route Guards: Protected routes requiring authentication
• CORS Configuration: Secure cross-origin request handling

📊 Database Schema

The application uses the following main tables:

• users: User accounts and credentials
• personal_info: User personal information
• resume_sections: Resume data in JSON format
• programs: Master's program information
• checklist: User application checklist items
• compare_list: Programs for comparison
• sessions: Active user sessions

🎓 Course Information

• Course: COMP3421 Web Application Design and Development
• Institution: The Hong Kong Polytechnic University
• Academic Level: Year 4 (Final Year)
• Project Type: Full-stack Web Application

👥 Development Team

This project was developed by KONG Zirui (22103493D, For Front-end) and LIU Yuyang (22100394D, For Backend) who enrolled in COMP3421 at The Hong Kong Polytechnic University.

📝 Features in Detail

Search & Filter

• Real-time search across program names and institutions
• Multi-criteria filtering (country, discipline, degree type, language, tuition)
• Pagination support for large result sets
• Responsive design for mobile and desktop

Application Tracking

• Add programs to personal checklist
• Track application deadlines
• Update application status
• Visual indicators for overdue deadlines

Profile Management

• Comprehensive resume builder with 6 categories
• Status indicators (Good/Medium/Poor) for each category
• Automatic profile score calculation
• Avatar upload and management

🔄 Data Management

Program Data

• Pre-loaded with 20+ Master's programs from Hong Kong universities
• Includes program details, requirements, deadlines, and fees
• Data can be updated via import_programs.py script

User Data

• Secure storage of user credentials
• Personal information management
• Resume data stored in JSON format for flexibility

🛡️ Error Handling

• Comprehensive error handling on both frontend and backend
• User-friendly error messages
• Graceful fallbacks for failed API requests
• Input validation on all forms

📱 Responsive Design

The application is fully responsive and works seamlessly on:

• Desktop computers
• Tablets
• Mobile devices

🚧 Future Enhancements

Potential improvements for future development:

• Email notifications for application deadlines
• PDF resume export functionality
• Advanced analytics and statistics
• Integration with university application portals
• Multi-language support

📄 License

This project is developed for educational purposes as part of COMP3421 course requirements.

🙏 Acknowledgments

• The Hong Kong Polytechnic University - COMP3421 Course
• All 8 major universities in Hong Kong for providing program information
• Vue.js and Flask communities for excellent documentation

📞 Support

For questions or issues related to this project, please refer to the course instructor or teaching assistants.

---

Note: This application is developed for educational purposes. For actual graduate program applications, please refer to the official websites of the respective universities for the most up-to-date information.