🎓Web-Based Graduate Document Credentials Verification System for Bonga University

A full-stack web-based graduate verification system with national ID verification built with the MERN stack. This system allows external users (employers, institutions) to verify the authenticity of graduate certificates, while providing internal administrators secure tools for managing, uploading, and tracking graduate data.

System Features

This project is a comprehensive, secure, and user-friendly platform for graduate credential verification, user management, and real-time communication. Below are the key features of the system:

🌗 Theme Support

Light/Dark Theme:
Users can switch between light and dark modes for a comfortable and personalized experience.

📝 User Registration & Authentication

Multi-step Signup:
- Begins with National ID (FAN) input and real-time data fetch from the National ID (Fayda) system.
- Phone number confirmation (must match National ID record).
- Email and password setup.
- Email verification with code sent to the user's email.
Secure Login:
- JWT-based authentication.
- Rate limiting and lockout after repeated failed attempts.
Forgot Password:
- Users can request a password reset link/code via email.
- Secure password reset workflow.

🆔 National ID Integration

Fayda (National ID) API Integration:
- Real-time validation and retrieval of user identity data.
- Ensures only legitimate users can register and verify credentials.
- Phone number cross-check for added security.

📄 Graduate Credential Verification

Step-by-step Verification:
- Input graduate FAN to fetch and display personal info (read-only).
- Enter academic details (CGPA, program, program type, graduation year, department).
- System searches Bonga University graduate database.
- If found, user can view and download their certificate.
- If not found, user is notified.
Automatic Admin Notification:
- Every verification attempt (success or failure) is sent to the system admin for review and audit.

🖼️ Document QR Code

QR Code on Certificates:
- Each downloadable certificate includes a unique QR code.
- Scanning the QR code verifies the authenticity of the document and links back to the system for validation.

📧 Email Notifications

Signup Verification:
- Verification code sent during registration.
Password Reset:
- Email with reset instructions.
Verification Status:
- Users receive notifications about the status of their graduate verification.
Admin Alerts:
- Admins are notified of all verification attempts and system events.

🔔 In-app Notifications

Real-time Notifications:
- Users and admins receive instant notifications for important events (verification results, chat messages, etc.).

💬 Real-time Chat

Live Chat:
- Users can chat directly with system admins for support.
- Powered by Socket.IO for instant messaging.
Typing Indicators & Read Receipts:
- Enhanced chat experience with real-time feedback.

👤 User Profile Management

Profile Customization:
- Users can update their profile photo, email, and password.
- View non-editable personal information fetched from National ID (Fayda).

🛡️ Security

Helmet.js:
- Sets secure HTTP headers.
CORS:
- Restricts API access to trusted origins.
JWT Authentication:
- Secure, stateless user sessions.
Rate Limiting:
- Prevents brute-force attacks on login and API endpoints.
Audit Logging:
- All sensitive actions and verification attempts are logged for security and compliance.

📱 Responsive Design

Mobile-friendly:
- Fully responsive UI for seamless experience on desktop, tablet, and mobile devices.

🏛️ Role-based Access Control

Admin, Registrar, User Roles:
- Different dashboards and permissions for each role.
- Only authorized users can access sensitive features.

🗃️ Modular Microservice Architecture

Separation of Concerns:
- Main backend, frontend, and national ID API run as independent services for scalability and maintainability.

Summary Table

Feature	Description
Theme Support	Light/Dark mode toggle for all users
Multi-step Signup	National ID, phone, email, and email verification
Forgot Password	Secure email-based password reset
National ID Integration	Real-time identity validation and phone cross-check
Graduate Verification	Step-by-step process, document download, QR code, admin notification
Document QR Code	Verifiable QR code on each certificate
Email Notifications	Signup, password reset, verification status, admin alerts
In-app Notifications	Real-time updates for users and admins
Real-time Chat	Live messaging with admins, typing/read indicators
Profile Management	Update photo, email, password; view non-editable ID info
Security	Helmet.js, CORS, JWT, rate limiting, audit logging
Responsive Design	Works on all devices
Role-based Access	Admin, registrar, and user dashboards and permissions
Microservice Architecture	Scalable, maintainable separation of backend, frontend, and national ID API

This system is designed for security, reliability, and a seamless user experience, making graduate verification and support fast, trustworthy, and easy to use.

frontend: React-based ExternalUser/registrar/admin dashboard and chat UI

backend: Express.js REST API for user management, authentication, and chat (with Socket.IO)

nationalidapi: Microservice for national ID verification

Landing Page in Dark Theme

Landing Page in Light Theme

Project Structure

FINALPROJECT/
│
├── backend/           # Main backend API (Nodejs, Express, MongoDB, Socket.IO)
│   ├── api/
│   ├── config/
│   ├── controllers/
│   ├── data/
│   ├── image/
│   ├── middleware/
│   ├── models/
│   ├── public/
│   ├── routes/
│   ├── uploads/
│   ├── utils/
│   ├── .env
│   ├── package.json
│   └── server.js
│
├── frontend/          # React frontend (Vite, Tailwindcss, Framer Motion)
│   ├── src/
│   │   ├── admin/
│   │   ├── assets/
│   │   ├── chat/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── registrar/
│   │   └── user/
│   ├── public/
│   ├── .env
│   ├── package.json
│   └── ...
│
├── nationalidapi/     # Microservice for national ID verification
│   ├── config/
│   ├── controllers/
│   ├── data/
│   ├── models/
│   ├── routes/
│   ├── uploads/
│   ├── utils/
│   ├── .env
│   ├── idServer.js
│   └── package.json
│
└── .gitignore

Live URLs (Development)

Frontend: http://localhost:5173
Backend: http://localhost:5000
National ID API: http://localhost:7000

📌 Features

Role-based Access (admin, registrar, user)

What System Admin Do

Admin Login with rate limiting and lockout after failed attempts

After successful logging in:, Admin Dashboard in Dark theme

- Upload new Graduates using Exel file (when admin uploading bulk file simply using .xlxs, .xls, .cvs file)

Real-time Chat (Socket.IO) between users and admins in Light theme

User Management (CRUD, search, edit, delete, photo upload)
National ID Verification using graduate national id FAN (Fayda Alias Number), it must be 16 digit,

What External User Must Have Do

Signup

External User Signup & Verification Process

This system uses a multi-step signup process to ensure user authenticity by integrating with the National ID (Fayda) system.

Step 1: Enter National ID Number (FAN)

The user starts the signup process by entering their Fayda Alias Number (FAN) (National ID number).
The system sends a request to the nationalidapi microservice to fetch personal information.
If the FAN is valid, the following details are displayed (read-only):
- First Name
- Middle Name
- Last Name
- Gender

After Clicking "Verify National Id" button

Step 2: Phone Number Confirmation

The user is prompted to enter their phone number.
The system checks if the entered phone number matches the one registered with the National ID (Fayda) information.
If the phone number matches, the user proceeds to the next step.
If not, an error message is shown and the user must try again.

Step 3: Signup with Email & Password

The user provides:
- Email address
- Password
The system creates a new user account in a pending state.

Step 4: Email Verification

The system sends a verification code to the provided email address.
The user enters the verification code in the signup form.
If the code is correct, the account is activated and the user is redirected to their dashboard.
If the code is incorrect, the user is prompted to try again

Step 5: Access Dashboard

Upon successful verification, the user is logged in and navigated to their personal dashboard.

Summary Table

Step	Action	System Response
1	Enter FAN	Display personal info (read-only)
2	Enter phone number	Check match with National ID info
3	Provide email & password	Create account, send verification email
4	Enter verification code	Activate account, redirect to dashboard
5	Access dashboard	User can use system features

Security Notes:

All steps are validated server-side.
National ID and phone number must match official records.
Email verification is required for account activation.
Responsive UI with Tailwind CSS and Framer Motion
Security: Helmet.js, CORS, JWT authentication, express-rate-limit

External User Dashboard Features

After successful signup and login, an external user can:

Customize Account
- Update profile photo, email, and password.
- View non-editable personal information fetched from the National ID (Fayda) system.
Live Chat with System Admin
- Access real-time chat to communicate directly with system administrators for support or inquiries.
Graduate Credential Verification
- Step 1: Enter Graduate National ID Number (FAN)
  - The user inputs their FAN.
  - The system fetches and displays personal information (read-only) from the National ID system.

Step 2: Enter Academic Information
- The user provides:
  - CGPA
  - Program
  - Program Type
  - Graduation Year
  - Department

Step 3: Search Graduate Record
- The system checks the Bonga University graduate database for a matching record.
- If graduate exists:
  - The user sees a link to view the full document information.
  - The user can open the link and download their graduation certificate

Downloadable document

 - **If graduate does not exist:**
   - The system notifies the user that no matching record was found.

Step 4: Admin Notification
- Regardless of the result (verified or failed), the graduate's National ID information and verification status are automatically sent to the system admin.
- The admin receives a message indicating whether the verification was successful or failed.

When i click in one notification

Summary Table

Feature	Description
Customize Account	Update profile photo, email, password; view personal info
Live Chat	Real-time messaging with system admin
Graduate Credential Verify	Multi-step process: FAN input → Academic info → Search → Download certificate or get notified if not found; admin is always notified of the result

Security & Audit:

All verification attempts are logged.
Only verified users can access graduate verification and chat features.
Admins are notified of every verification attempt and its outcome.

Tech Stack

Frontend: React, Vite, Tailwind CSS, Framer Motion, Axios, SweetAlert2
Backend: Node.js, Express, MongoDB (Mongoose), Socket.IO
National ID API: Node.js, Express, MongoDB
Security: Helmet.js, express-rate-limit, CORS, JWT

Environment Variables

Frontend (`frontend/.env`)

VITE_ADMIN_ROUTE=http://localhost:5000/api/admin
VITE_NATIONAL_ID_ROUTE=http://localhost:7000/api/national-ids
VITE_AUTH_ROUTE=http://localhost:5000/api/auth
VITE_CHAT_ROUTE=http://localhost:5000/api/chat

Backend (`backend/.env`)

MONGO_URI=your_mongodb_url, like "mongodb+srv://<mongoDB_user_name>:<password>@cluster0.s4fepks.mongodb.net/nationalIdInfo?retryWrites=true&w=majority&appName=Cluster0
PORT=5000
JWT_SECRET=your_secret_key

ADMIN_EMAIL=madishamadiso00@gmail.com

EMAIL_SERVICE=Gmail
EMAIL_USER=madishamadiso00@gmail.com
EMAIL_PASSWORD=@urim asqp wnfs faah

JWT_EXPIRE=7d

National ID API (`nationalidapi/.env`)

MONGODB_NATIONAL_ID_URI=your_mongodb_url, like "mongodb+srv://<mongoDB_user_name>:<password>@cluster0.s4fepks.mongodb.net/nationalIdInfo?retryWrites=true&w=majority&appName=Cluster0
PORT=7000
JWT_SECRET=your_secret_key
CLIENT_URL=http://localhost:5173

Setup & Installation

Frontend

cd frontend
npm install
npm run dev
# Runs on http://localhost:5173

Backend

cd backend
npm install
npm run dev
# Runs on http://localhost:5000

National ID API

cd nationalidapi
npm install
npm run dev
# Runs on http://localhost:7000

Security

Helmet.js: Sets HTTP headers for security.
CORS: Only allows requests from whitelisted origins.
JWT: Used for authentication and authorization.
express-rate-limit: Protects against brute-force attacks.
Rate Limiting:
- Global: 100 requests per 15 minutes per IP.
- Admin Login: 5 attempts per minute per IP. After 5 failed attempts, login is locked for 1 minute.

Troubleshooting

CORS errors: Ensure backend CORS middleware is at the top and origins are correct.
MongoDB connection issues: Check your MONGO_URI in .env.
Rate limit lockout: Wait for 1 minute after 5 failed login attempts.
Socket.IO issues: Make sure the frontend and backend use the same allowed origins and credentials.

License

This project is for educational purposes.
See LICENSE for details.

👨‍💻 Author & Contact

Developed & Maintained by:
Madiso Melese

📧 Email: madishamadiso00@gmail.com
🌐 LinkedIn: linkedin.com/in/madiso-melese
🏛️ Institution: Bonga University

For questions, feedback, or collaboration opportunities,
please feel free to reach out via email.

Name		Name	Last commit message	Last commit date
Latest commit History 382 Commits
backend		backend
frontend		frontend
nationalidapi		nationalidapi
.gitignore		.gitignore
README.md		README.md

MadisoMelese/My-Graduation-project

Folders and files

Latest commit

History

Repository files navigation

🎓Web-Based Graduate Document Credentials Verification System for Bonga University

System Features

🌗 Theme Support

📝 User Registration & Authentication

🆔 National ID Integration

📄 Graduate Credential Verification

🖼️ Document QR Code

📧 Email Notifications

🔔 In-app Notifications

💬 Real-time Chat

👤 User Profile Management

🛡️ Security

📱 Responsive Design

🏛️ Role-based Access Control

🗃️ Modular Microservice Architecture

Summary Table

frontend: React-based ExternalUser/registrar/admin dashboard and chat UI

backend: Express.js REST API for user management, authentication, and chat (with Socket.IO)

nationalidapi: Microservice for national ID verification

Landing Page in Dark Theme

Landing Page in Light Theme

Project Structure

Live URLs (Development)

📌 Features

Role-based Access (admin, registrar, user)

What System Admin Do

What External User Must Have Do

Signup

External User Signup & Verification Process

Step 1: Enter National ID Number (FAN)

After Clicking "Verify National Id" button

Step 2: Phone Number Confirmation

Step 3: Signup with Email & Password

Step 4: Email Verification

Step 5: Access Dashboard

External User Dashboard Features

Tech Stack

Environment Variables

Frontend (frontend/.env)

Backend (backend/.env)

National ID API (nationalidapi/.env)

Setup & Installation

Frontend

Backend

National ID API

Security

Troubleshooting

License

👨‍💻 Author & Contact

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Frontend (`frontend/.env`)

Backend (`backend/.env`)

National ID API (`nationalidapi/.env`)

Packages