TaskMate – Student Assignment Tracker

TaskMate is a full-stack student assignment management web application built with React, PHP (MVC Architecture), and MySQL.

Tech Stack

• Frontend: React (JavaScript) + Vite + Vanilla CSS
• Backend: PHP 8.x (MVC Pattern - Models, Controllers, Routes, Configuration)
• Database: MySQL (schema.sql included)
• Web Technologies: HTML5, CSS3, ES6+ JavaScript
• Version Control: Git / GitHub

---

Project Structure

taskmate-student-assignment-tracker/
├── backend/                  # PHP MVC REST API
│   ├── config/
│   │   ├── Database.php      # PDO MySQL Connection Wrapper
│   │   └── cors.php          # CORS headers helper
│   ├── controllers/
│   │   └── AssignmentController.php  # API Controller
│   ├── models/
│   │   └── Assignment.php    # Data access model
│   ├── routes/
│   │   └── api.php           # REST API routing
│   ├── db/
│   │   └── schema.sql        # Database table schema and seed data
│   └── index.php             # Main entry point for PHP backend
├── frontend/                 # React Frontend (Vite)
│   ├── public/               # Static public assets
│   ├── src/
│   │   ├── components/       # UI components (Navbar, Dashboard)
│   │   ├── pages/            # Page layouts (AssignmentsPage)
│   │   ├── services/         # API HTTP fetch service (api.js)
│   │   ├── App.jsx           # Root layout and tab navigation
│   │   ├── main.jsx          # React DOM mounting entry point
│   │   └── index.css         # Modern Vanilla CSS design system
│   ├── index.html            # HTML entry shell
│   ├── package.json          # React dependencies
│   └── vite.config.js        # Vite dev server & backend proxy config
├── .gitignore                # Node modules and build ignore rules
└── README.md                 # Project documentation

---

Folder & Component Responsibilities

Directory / File	Purpose
backend/models/Assignment.php	Handles data operations and SQL queries via PDO.
backend/controllers/AssignmentController.php	Processes HTTP requests, executes business logic, formats JSON response.
backend/routes/api.php	Intercepts incoming URLs and routes GET/POST/PUT/DELETE requests to controller actions.
backend/config/Database.php	Provides database connection singleton configured for MySQL.
backend/db/schema.sql	Contains database schema creation SQL script and initial test seed data.
frontend/src/services/api.js	Abstracted API layer making fetch calls to backend endpoints (/api/assignments).
frontend/vite.config.js	Proxies /api calls from Vite dev server to PHP CLI server at http://localhost:8000.
frontend/src/index.css	Comprehensive CSS variables, glassmorphism UI, badges, and responsive design system.

---

How React Frontend and PHP Backend Communicate

1. Development Proxy: Vite runs on port 5173. When React components execute API calls via frontend/src/services/api.js (e.g. fetch('/api/assignments')), Vite's dev proxy forwards these requests to http://localhost:8000/api/assignments.
2. CORS & Response: The PHP entry point (backend/index.php) triggers backend/config/cors.php to set cross-origin headers (Access-Control-Allow-Origin: *) and return JSON encoded responses (Content-Type: application/json).
3. Data Flow: React UI $\rightarrow$ api.js $\rightarrow$ Vite Proxy $\rightarrow$ PHP index.php $\rightarrow$ routes/api.php $\rightarrow$ AssignmentController.php $\rightarrow$ Assignment.php (PDO) $\rightarrow$ MySQL DB

---

How to Run & Verify Phase 1

Prerequisites

• Node.js (v18+)
• PHP (v8.0+)
• MySQL Server (XAMPP, WAMP, or standalone MySQL)

Step 1: Install Frontend Dependencies

cd frontend
npm install

Step 2: Start PHP Backend Server

In a terminal window from the project root:

php -S localhost:8000 -t backend

Step 3: Start React Frontend Server

In a second terminal window:

cd frontend
npm run dev

Step 4: Verify in Browser

• Open http://localhost:5173/ in your web browser.
• Verify the TaskMate header displays "PHP MVC Backend Connected".
• Verify the Dashboard overview statistics and Assignments cards populate.
• Test the API endpoint directly in browser or curl: http://localhost:8000/api/status or http://localhost:8000/api/assignments.