Remix

Make your own version of DTI Admissions Hub

Edit the prompt below and generate a customized version in seconds.

Original by Hello There

Describe your app

Build a polished, modern DTI Digital Admission Management System as a frontend-only Next.js application for Descon Technical Institute (DTI): https://www.dti.edu.pk/

Technology & Scope

Use:

Next.js, React, TypeScript
Tailwind CSS or equivalent modern styling
Responsive desktop, tablet, and mobile UI

No backend: no database, API, server actions, real authentication, email service, cloud storage, or server-side functionality. Use mock/static data, client-side state, simulated uploads/interactions, mock charts, and mock records. Do not label features as fake/demo in the UI.

The platform should feel like a complete future-ready admission management system that can later connect to a real backend without redesigning the frontend.

Design

Create a professional educational SaaS/admin interface using:

White/light backgrounds
Neutral professional colors
Subtle borders and shadows
Clean cards, typography, tables, spacing
Clear status badges

Avoid excessive gradients, animations, illustrations, and decorative effects.

Public Website

Navigation:

Home
Courses
How to Apply
Apply Online
Contact

Primary CTA: Apply Online

Home

Include:

DTI introduction and description
Featured courses
Admission process
Why choose DTI
Basic statistics
Apply CTA
Contact section

Admission process:

Select Course
Complete Application
Upload Documents
Submit Application
Application Review
Courses

Create 10–15 realistic courses across:
QHSE, Automation, Welding, Fabrication, Electrical, Civil, Millwright, Carpentry.

Each card shows:

Course name
Department
Duration
Description
Status
Apply Now

Apply Now opens the application with that course preselected.

Online Application

Create a polished multi-step form.

Step 1 — Course & Location

Required:

Course
City
Campus

Cities:
Lahore, Sadiqabad, Islamabad, Rawalpindi, Karachi, Faisalabad, Multan, Gujranwala, Sialkot, Peshawar, Quetta, Other.

Campuses:

Lahore Campus
Sadiqabad Campus
Applicant Information
Full Name
Father's Name
Date of Birth
CNIC
Gender
Mobile
Email
Address
City
Province
Postal Address

Visually validate required fields.

Education & Experience
Highest Qualification
Education Level
Institution
Year of Completion
Relevant Experience
Current Occupation
Documents

Upload UI for:

CNIC
Photograph
Educational Documents
Certificates
Other Supporting Documents

Show filename, file type, upload status, and Remove action. Simulate uploads client-side.

Course-Specific Fields

Fields must dynamically change based on course selection. Examples:

Qualification + Experience
Certification + Previous Training
Review

Before submission show:

Applicant information
Course/location/campus
Education
Documents
Course-specific information

Buttons:
Edit Application / Submit Application

After submission:
Application Submitted Successfully

Generate an ID such as DTI-2026-00125.

Admin System

Create a separate professional admin layout with collapsible sidebar.

Sidebar

MAIN

Dashboard
Applications
Students
Courses

MANAGEMENT

Staff Management
Email & Notifications
Reports & Analytics

SYSTEM

Settings

Bottom:

Admin Profile
Logout
Roles
Super Admin

Full access to dashboard, applications, students, courses, staff, email, reports, settings, and system configuration.

Staff Member

Access:

Dashboard
Applications
Students
Courses
Reports

No access to:

Staff Management
Critical Settings
Super Admin configuration

Simulate role selection/login entirely on the frontend.

Super Admin Dashboard

Make this the strongest part of the product.

KPI Cards
Total Applications: 2,486 (+12.8%)
New Applications: 342
Approved: 1,420
Under Review: 386
Rejected: 118
Total Students: 5,840
Charts

Applications Overview

7 Days / 30 Days / 90 Days
Line/area chart

Applications by Course
Example:

Welding Inspector — 320
NEBOSH IGC — 285
Industrial Electrician — 240
PLC / SCADA — 195
AutoCAD — 170

Applications by City
Lahore, Sadiqabad, Islamabad, Karachi, Faisalabad, Multan.

Application Status
New, Under Review, Approved, Rejected using donut/pie chart.

Trending Courses

Show:

Most Applied course, e.g. Welding Inspector — 245 this month, +18%
Growing course, e.g. PLC with HMI & SCADA — +32%
Period Comparison

Show:

This Week vs Last Week
This Month vs Last Month

Examples:
“18% more applications than last week.”
“Welding applications increased 24% this month.”

Recent Applications

Table with:

Application ID
Applicant
Course
City
Date
Status

Show 5–10 records and View All Applications.

Quick Actions
Review Applications
Add Course
Add Staff
Send Email
View Reports
Admission Settings
Recent Activity

Examples:

Applicant submitted an application
Staff changed application status
New course added
Email sent
Super Admin added staff
Applications

Create a complete application-management page.

Columns:

Application ID
Applicant Name
CNIC
Phone
Email
Course
City
Campus
Application Date
Status
Actions

Actions:

View
Edit
Change Status

Include pagination.

Advanced Filters

Filters must work together.

Search by:
Name, CNIC, Email, Phone, Application ID.

Filters:

Course: single/multi-select
City: single/multi-select
Campus: single/multi-select
Status: New, Under Review, Approved, Rejected
Date

Quick dates:
Today, Yesterday, Last 7 Days, Last 30 Days, This Month, Previous Month, This Year.

Custom:

From Date
To Date

Example: 01/08/2026–23/08/2026.

Provide:
Apply Filters / Clear Filters

Show matching count, e.g. “48 applications found”.

Combined filters such as Course = Welding + City = Lahore + Status = Under Review + Last 30 Days must work correctly.

Application Detail

Sections:

Application Details: ID, Date, Status, Course, Department, City, Campus
Personal Information
Education
Experience
Documents
Application History

Show status timeline:
Submitted → New → Under Review → Approved

Allow status changes.

Students

Table:

Student ID
Name
CNIC
Course
City
Campus
Enrollment Date
Status

Include search, course/city/status filters, and student detail view.

Course Management

Table:

Course name
Department
Duration
Applications
Active/Inactive
Actions

Actions:

Add Course
Edit
Activate/Deactivate

Course form:

Course Name
Department
Description
Duration
Fee
Status

Use client-side state so changes immediately update the UI.

Staff Management — Super Admin Only

Table:

Name
Email
Phone
Role
Department
Status
Last Active
Actions

Roles:

Super Admin
Admissions Staff
Course Staff
Reporting Staff

Allow:

Add Staff
Edit
Activate/Deactivate
Change Role
View Details

Add Staff modal/form:

Full Name
Email
Phone
Role
Department
Status

All changes use frontend state.

Email & Notifications

Create a major showcase section with an email composer.

Fields:

Subject
Large message/rich-text-style editor

Recipient options:

All Staff Members
All Registered Students
Students of a Specific Course
Students of a Specific City
Selected Recipients

For course/city targeting, show the selector and dynamically calculate recipient count.

Example:
“245 students will receive this email.”

Buttons:
Preview Email / Send Email

Simulate sending and show:
“Email sent successfully to 245 recipients.”

Email History

Columns:

Subject
Sent By
Recipient Group
Recipients
Date
Status

Include at least 5 records.

Reports & Analytics

Create:

Application Reports
By date
By course
By city
By campus
By status
Student Reports
Total students
New students
By course
By city
Course Performance
Most applied
Fast-growing
Least applied

Date filters:

Last 7 Days
Last 30 Days
Last 90 Days
Custom From/To

Include charts, summary cards, and Export Report with simulated CSV/Excel frontend export.

Settings

Use clean tabs/sections.

General
Institute Name
Contact Email
Contact Phone
Website
Address
Admission
Open/Closed
Start Date
End Date
Application ID Prefix
Campus

Manage Lahore, Sadiqabad, and other campuses.

Application

Configure:

Required documents
Allowed file types
Maximum upload size
Application fields
Notifications
Email notifications
Application submission notifications
Status change notifications
Appearance
Logo
Basic interface preferences

No complex theme builder.

Notification Center

Add a notification bell to admin navigation with a clickable panel.

Example notifications:

12 new applications
5 applications require review
Admission deadline approaching
New staff member added
Course applications increased 20%
Admin Profile

Profile page/dropdown showing:

Name
Email
Role
Department
Last login

Actions:

Edit Profile
Change Password
Logout

Frontend-only interactions.

Mock Data & State

Provide realistic mock data:

25–40 applications
20+ students
10–15 courses
5+ staff members
5+ email history records
8+ notifications

Vary courses, cities, campuses, dates, and statuses so tables, filters, charts, analytics, and statistics feel realistic.

Frontend Interactions

Everything should be functional on the client side:

Search
Combined filters
Pagination
Form validation
Dynamic course-specific fields
Simulated document uploads
Application submission and ID generation
Status updates
Add/edit courses
Add/edit staff
Email recipient counts and sending simulation
Dashboard statistics/charts
Date-based analytics
Notification interactions
Sidebar navigation
Modals
Role-based navigation/access
Report export simulation

Do not implement APIs, databases, backend authentication, server actions, real email delivery, cloud storage, or real file storage.

Final Product
Public

Home, Courses, How to Apply, Apply Online, Contact.

Admin

Dashboard, Applications, Students, Courses, Staff Management, Email & Notifications, Reports & Analytics, Settings, Profile.

Prioritize visual polish and UX on:

Super Admin Dashboard
Applications Management
Advanced Filters
Application Detail
Staff Management
Email & Notifications
Reports & Analytics
Settings
Student Application Form

The final result should feel like a polished, scalable DTI Digital Admission Management Platform ready to be connected to a future backend/API/database.

Free to use. No credit card required.