🎓 TrainLink

A multi-role web platform that connects students, universities, and companies around cooperative training placements — covering opportunity postings, applications, supervision visits, attendance, reports, and performance ratings, each behind a role-specific dashboard.

🌐 Live Website

Visit TrainLink Website

Experience the TrainLink platform live and explore its cooperative training features.

🖼️ Project Poster

Overview

TrainLink coordinates the full lifecycle of a cooperative training (internship) program across four distinct roles: students browse and apply to opportunities, track their schedule, and submit reports; training supervisors (companies) post opportunities, review applications, and evaluate student performance; academic supervisors track assigned students, schedule visits, and review submissions; and university administrators manage student rosters, synchronization, and program-wide statistics and reporting.

I designed and built the system architecture, backend, frontend, and database for this project.

Key Features

• Role-based dashboards for students, training supervisors, academic supervisors, and university administrators, each with its own scoped views and permissions
• Opportunity management — companies post training opportunities with requirements, goals, and learning outcomes; students browse and apply
• Application workflow — pending / interview / accepted / rejected states with per-application notes
• Attendance and reporting — weekly, midterm, and final report submission with evaluator scoring and feedback
• Supervision visits — academic supervisors schedule and track visits to training sites
• Performance ratings — students rate companies on quality, support, and environment; supervisors evaluate student reports
• Notifications — in-app notifications for account and workflow events, surfaced in a live topbar dropdown on every dashboard
• Student synchronization & statistics — university-level tools to sync student records and view program-wide reports

Design & UI

The interface was rebuilt on a single, self-contained design system (no framework, no build step):

• Design tokens & components in src/css/trainlink-ui.css — brand palette expanded from the original TrainLink teal (#1C4A64), a type scale, and reusable buttons, cards, badges, forms, tables, empty/error states, and toasts.
• Vanilla-JS interactions in src/js/trainlink-ui.js — scroll-reveal, count-up, sticky nav, toasts, a mobile sidebar drawer, and the notification dropdown. No jQuery dependency for the new code.
• Public site — redesigned hero with an animated SVG "connection" diagram (src/includes/network_svg.php), landing sections, a "How it works" timeline, redesigned company and opportunity cards, split-screen auth pages, and branded 404 / 403 pages.
• Authenticated dashboards — a shared shell (src/includes/dash.php) renders a role-aware sidebar, a sticky topbar with the live notification dropdown, and a calm page background for all four roles. Each role also has a real data-driven overview page (src/<role>/index.php).
• Responsive — tables collapse into stacked cards on phones; the sidebar becomes an off-canvas drawer; no horizontal overflow. prefers-reduced-motion is respected.
• Real data only — every statistic on every dashboard comes from a live COUNT() / query; there are no hardcoded figures.

Technologies Used

Category	Technology
Backend	PHP 8 (PDO for database access)
Database	MySQL / MariaDB
Frontend	HTML, CSS, vanilla JavaScript; Bootstrap 4 + Owl Carousel retained from the original template

Project Structure

trainlink/
├── src/                             # Application source (deploy this as the web root)
│   ├── index.php, about.php, ...     # Public pages (home, about, companies, opportunities, auth)
│   ├── 404.php, 403.php, .htaccess   # Branded error pages
│   ├── student/                      # Student dashboard & workflows (+ index.php overview)
│   ├── trainning_supervisor/        # Company / training-entity dashboard (+ index.php overview)
│   ├── academic_supervisor/         # Academic supervisor dashboard (+ index.php overview)
│   ├── university/                   # University administration dashboard (+ index.php overview)
│   ├── includes/
│   │   ├── header.php, footer.php    # Public site chrome
│   │   ├── dash.php                  # Shared dashboard shell (sidebar, topbar, notifications)
│   │   └── network_svg.php           # Animated hero connection diagram
│   ├── css/
│   │   ├── trainlink-ui.css          # Design system (tokens + components + dashboard layer)
│   │   └── style.css, owl.carousel.min.css   # Original template styles
│   ├── js/
│   │   ├── trainlink-ui.js           # Interactions (vanilla)
│   │   └── main.js, *.min.js         # Original template scripts
│   ├── img/                          # Static images + logo-placeholder.svg
│   ├── uploads/                      # Runtime uploads (git-ignored except the demo brand logos)
│   └── database/
│       ├── db.php                    # PDO connection (reads db.local.php / env — no secrets committed)
│       └── db.local.example.php      # Template to copy to db.local.php
├── database/
│   ├── trainlink_db.sql             # Schema + fictional demo seed data
│   ├── update_companies.sql         # One-time migration: demo companies -> fictional training entities
│   └── erd.jpg / erd.svg / erd.pdf   # Entity-relationship diagram
├── diagrams/                        # Use-case diagrams (per role) + source .drawio file
├── poster/                          # Project poster (PNG/PDF)
├── docs/                            # Written documentation
├── LICENSE
└── README.md

Installation

Prerequisites: PHP 8+, MySQL/MariaDB, a local server stack (XAMPP, WAMP, Laragon, etc.).

1. Clone the repository and serve src/ as your web root.
2. Create a database named trainlink_db and import the schema:

   mysql -u root -p trainlink_db < database/trainlink_db.sql

3. Configure database credentials without committing them:

   cp src/database/db.local.example.php src/database/db.local.php
   # then edit src/database/db.local.php with your host / db / user / pass

   db.local.php is git-ignored. Alternatively, set the TRAINLINK_DB_HOST, TRAINLINK_DB_NAME, TRAINLINK_DB_USER, TRAINLINK_DB_PASS environment variables. With no config at all, db.php falls back to localhost / root / empty password for a default local stack.
4. (Optional) If you imported an older dump, apply database/update_companies.sql once in phpMyAdmin to switch the demo companies to the fictional training entities used by the current UI.
5. Open the site through your local server (e.g. http://localhost/trainlink/src/).

Note on demo data: trainlink_db.sql contains fictitious seed accounts and fictional training entities (Vertex Digital, CoreLink Technologies, Orbit Systems Group) for demonstration only. The password_hash values are shared placeholders and are not valid credentials; create real accounts through the sign-up flow.

Usage

• Visit the homepage to sign up as a student or sign in with an existing role account.
• Students browse opportunities, apply, track their schedule and supervisor visits, and submit reports from their dashboard.
• Training supervisors post opportunities, review applications, and evaluate student reports.
• Academic supervisors view assigned students, schedule visits, and review submissions.
• University administrators manage student records, approve training entities, run graduate synchronization, and view program-wide analytics.

Future Improvements

• Add automated tests for the application and evaluation workflows
• Add file-upload validation and size limits for report/CV submissions
• Server-side pagination and filtering on the opportunity and student listings
• Consolidate the remaining Bootstrap modals onto the design system's own modal component

License

Released under the MIT License.