CMS PORTAL - Mini Project

A complete Company Management System built as a modular dynamic web application, linking structured relational MySQL data to an intuitive RESTful API endpoint mapping for a dynamic HTML5 interface.

Project Overview

The CMS Portal is designed to handle core organizational data natively. This system centralizes employee records, monitors daily attendance patterns, allows teams to visually coordinate via an interactive Kanban Task Board, and provides administrators with high-level real-time business intelligence using dynamic metrics tracking generated by customized Chart.js components.

All interfaces pull active live updates from the Node.js/Express.js secure backend server leveraging JSON Web Tokens (JWT) for authentication management.

Features

• Authentication Module: Secure registration, token validation via bcryptjs, and robust middleware routing for private endpoint access.
• Employee Directory: Full suite of CRUD (Create, Read, Update, Delete) data operations managing dynamic worker profiles hooked to specific database tables.
• Attendance Tracker: Automated event logging converting worker states (Present, Leave, Late, WFH) into calendar events preventing duplication collisions.
• Task Kanban Board: Draggable priority assignments translating status categories (todo, in_progress, review, completed) visually.
• Real-Time Analytics Dashboard: Complex MySQL queries aggregated and translated seamlessly to Chart.js displays highlighting distribution allocations over revenue margins.
• Tailwind Component UI: Fluid, responsive front-end elements built heavily without reliance on massive bloated JavaScript UI frameworks.

Technology Stack

Front-End

• Semantic HTML5 natively interacting heavily with DOM elements.
• CSS Styling heavily supported via dynamic TailwindCSS (CDN).
• Vanilla (Modern) JavaScript structure calling standard fetch().
• Data Chart plotting imported natively from Chart.js.
• Google Material Symbols for modern UI aesthetics.

Back-End

• JavaScript engine powered heavily by standard Node.js.
• RESTful structure framework governed structurally by Express.js.
• Relational schema engine leveraging robust MySQL 8 connected via mysql2 prepared statements explicitly stopping SQL injections.

Project Architecture

The architecture consists strictly of decoupled environments:

• /frontend contains the static presentation UI arrays pointing HTTP headers at port 5000.
• /backend contains the server execution logic heavily abstracted into decoupled routing files (server.js -> routes/ -> controllers/).
• /database houses the root SQL logic definitions mapped out to structure relationships logically (schema.sql).

Database Schema

# Core Tables in the cms_portal Database map exactly to standard relational practices.
- users: Houses authentication endpoints tracking (username, hashed passwords, explicit role).
- employees: Holds raw tracking fields mapping back to email and department strings.
- tasks: Maps structural priority relationships back functionally to `employee_id` constraints via foreign keys.
- attendance: Handles strict compound primary identifiers mapped back uniquely preventing double logging per `date`. 

Installation Instructions

Ensure you have both Node.js (v18+) and MySQL (v8+) fully installed and active.

1. Database Setup

# Enter your MySQL root account
mysql -u root -p

Once inside your terminal CLI for MySQL, build your environment running the base SQL construct from inside your terminal:

-- Inject standard SQL setup
source database/schema.sql;

2. Backend Setup

Load an internal terminal tracking purely the root backend API space.

# Inside the root folder, download package.json elements sequentially
npm install

# Connect to database logic
# Please ensure you modify /backend/db/connection.js explicitly changing user matching "root" and password fields matching your setup structure.

# Connect your live server natively to listen to requests structurally on port 5000:
npm run dev

# For silent operation logic, use:
npm start

3. Frontend Setup

Because the UI files run completely decoupled using standard modern web conventions natively running standard XML HTTP Fetch API logic, there are absolutely no compiled build folders needed.

# Open any CLI command tool mapped correctly inside the /frontend directory structure:
# Ensure you are actively pinging backend connections using:
npx serve frontend

(Alternatively, simply Double-Click opening frontend/index.html locally into any modern Chrome or Firefox viewport browser rendering the logic seamlessly!)

Future Improvements

• Fully convert the REST interactions adding automated payload validation schema engines effectively restricting payload injections securely before it hits middleware routing engines.
• Add fully structured Login UI components fully storing encrypted Tokens inside memory preventing cookie mapping hacks.
• Real-time Socket.io notifications alerting HR elements instantly upon Leave Request actions executing.
• Granular RBAC configurations mapping back exactly structurally preventing Employee endpoints wiping structural database tables dynamically.