Academic Planning Dashboard

Full-stack prototype for managing academic plans, reports and file uploads through a responsive dashboard.

The project explores how an academic planning workflow could be centralized in a web application. It currently includes a React frontend, an Express API, simulated authentication and in-memory data management.

Overview

Academic Planning Dashboard was designed to simplify the consultation and management of academic planning records.

Users can sign in to a simulated account, navigate through the dashboard and access planning history, reports and configuration sections.

The current version is a functional prototype. Database persistence, real authentication and OCR processing are planned improvements and are not yet implemented.

Implemented features

Frontend

Simulated login screen
Responsive dashboard layout
Sidebar navigation
Academic planning history
Reports and statistics interface
System configuration page
File upload interface
Reusable React components
Responsive styling with Tailwind CSS

Backend

Express REST API
Simulated session authentication
Academic planning CRUD endpoints
File upload endpoint
Request error handling
CORS configuration
Protected prototype routes

Technology stack

Area	Technologies
Frontend	React 18, Vite, Tailwind CSS
Backend	Node.js, Express.js
Communication	Fetch API, REST
Development	JavaScript, npm, Git

Architecture

academic-planning-dashboard/
├── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── server/
│   ├── controllers/
│   ├── middleware/
│   ├── routes/
│   ├── app.js
│   └── package.json
├── assets/
│   └── images/
│       └── dashboard-preview.png
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── .env.example
└── README.md

Getting started

Requirements

Install the following software before running the project:

Node.js
npm
Git

Installation

Clone the repository:

git clone https://github.com/frannnkkyy/academic-planning-dashboard.git

Open the project:

cd academic-planning-dashboard

Install the frontend dependencies:

npm install

Install the backend dependencies:

cd server
npm install
cd ..

Environment configuration

Create your local environment file from the example:

cp .env.example .env

Only add variables that are actually read by the project. Never commit .env or real credentials.

Run the frontend

npm run dev

Frontend:

http://localhost:5173

Run the backend

Open another terminal:

cd server
npm run dev

API:

http://localhost:3001

Health endpoint:

http://localhost:3001/api/health

For more detailed installation instructions, read QUICK_START.md.

Local demo accounts

The following accounts are hard-coded for local demonstration purposes only:

Role	Username	Password
Administrator	`admin`	`admin123`
Teacher	`docente`	`docente123`

These are not production credentials. Authentication is currently simulated and must not be used in a production environment.

API endpoints

Authentication

Method	Endpoint	Description
POST	`/api/auth/login`	Start a simulated session
POST	`/api/auth/logout`	End the simulated session