Frontend
Admin UI + Candidate Chat
10-Hour Project-Based Class
Build a Hosted AI Interview Platform From Frontend to Backend
Students build a real AI-powered interview system with admin login, candidate links, AI chat interviews, prompt-based role selection, automatic reviews, database storage, and cloud hosting.
AI + Full Stack
Supabase + Cloudflare
Beginner Friendly
Portfolio Ready
Built for real product understanding: this is not a simple chatbot demo. Students learn how
AI fits into databases, APIs, auth, prompts, reviews, and deployment.
Best suited for college students, beginner developers, and early builders who want one serious AI project they can explain in interviews.
Scroll the Stack
What Students Learn End-to-End
Each layer of the hosted project is built in class, connected live, and explained as part of one working product.
Live Architecture Map
Frontend
Auth
Login + Access Codes
APIs
Requests + JSON
Database
Supabase PostgreSQL
AI Layer
Prompts + Review
Hosting
Cloudflare + GitHub
Active Layer
Frontend
Admin dashboard, candidate chat UI, forms, state, and clean user flows.
admin.form -> candidate.chat -> ui.stateBuild screens that behave like a real product
Students build the admin console, candidate interview screen, forms, validation, state, and clean UI flows.
- Admin dashboard
- Candidate chat interface
- Frontend state and form handling
Understand authentication and access control
They learn why real applications need admin login, candidate access codes, signed sessions, and protected flows.
- Supabase Auth
- Candidate interview codes
- Session-based access
Connect frontend actions to backend logic
Every button click becomes a request, every request has validation, and every response moves the product forward.
- REST API structure
- JSON request and response flow
- Error handling and business logic
Connect and use a real database
Students see how users, interviews, prompts, messages, transcripts, and reviews are stored in connected tables.
- Supabase PostgreSQL
- Tables and relationships
- Persistent product data
Add AI inside an actual app
They learn how prompts, chat history, role tracks, AI interviews, automatic reviews, and scoring fit into software.
- System prompts vs user messages
- Role-based prompt templates
- AI review and evaluation logic
Host the full project online
The final product is pushed through GitHub and hosted using Cloudflare Pages, Functions, Supabase, and secrets.
- GitHub deployment workflow
- Cloudflare Pages and Functions
- Environment variables and API keys
What Students Build
A Real AI Product, Not a Toy Demo
Every major screen and workflow connects to something students will later see in real engineering teams.
Admin Dashboard
Create interviews, choose job roles, set experience level, select topics, and manage interview records.
Candidate Interview Links
Generate unique links and access codes so candidates can enter the interview flow securely.
AI Chat Interviewer
Use selected prompt tracks to conduct timed interviews for different roles and skill levels.
Automatic Review Module
Submit transcripts to AI for scoring, summaries, strengths, gaps, and final evaluation.
Database Storage
Store users, interviews, prompts, messages, transcripts, and review results in Supabase PostgreSQL.
Cloud Deployment
Host the finished project online with GitHub, Cloudflare Pages, Cloudflare Functions, and Supabase.
Learning Outcomes
What Students Understand by the End
They leave knowing how modern AI applications are assembled from moving parts.
Product Architecture
How frontend screens, backend APIs, database tables, auth rules, and AI services fit together.
AI Integration
How to use system prompts, user messages, prompt templates, role selection, and AI evaluation flows.
Security Basics
How to handle API keys, environment variables, signed session tokens, candidate codes, and authorization.
Deployment Confidence
How to push code with GitHub and host a full-stack project using Cloudflare and Supabase.
Concepts Covered
The Full Stack Behind an AI Product
Students touch the exact layers they need to build and explain practical AI software.
HTML
CSS
JavaScript
Frontend State
Forms
REST APIs
JSON Data Flow
Supabase PostgreSQL
Supabase Auth
Authorization
Candidate Codes
Signed Session Tokens
Prompt Engineering
System Prompts
AI Interviewer Design
AI Review Logic
Cloudflare Pages
Cloudflare Functions
Environment Variables
GitHub Deployment
10-Hour Structure
From Product Walkthrough to Hosted App
A compact build plan that moves from architecture to implementation, deployment, and final polish.
Product Walkthrough and Architecture
Understand the admin journey, candidate journey, data model, and AI responsibilities.
Frontend UI and User Flows
Build forms, dashboards, interview screens, loading states, and transcript views.
Database Design with Supabase
Create tables for users, interviews, prompts, messages, reviews, and relationships.
Auth, Access Codes, and APIs
Connect admin login, candidate codes, backend endpoints, and protected workflows.
AI Interviewer and Review Engine
Set up prompt templates, conduct chat interviews, evaluate transcripts, and store scores.
Hosting, Testing, and Improvements
Deploy with GitHub, Cloudflare, and Supabase, then test edge cases and improve the product.
Placement Value
Why This Helps in Interviews
This project gives students a concrete, hosted product to discuss with recruiters and interviewers. They can explain architecture, database design, API design, auth decisions, prompt strategy, AI review logic, and deployment tradeoffs from one coherent build.
Portfolio Project
A real hosted link and GitHub project that goes beyond clone apps and basic chatbot demos.
Interview Talking Points
Clear stories around product flow, API design, prompt design, data modeling, security, and deployment.
Job-Relevant Skills
Frontend, backend, database, auth, cloud hosting, and AI integration in one practical project.
Enroll
Build Your First Serious AI Product
Join the 10-hour project class and leave with a hosted AI interview platform plus the confidence to explain how it works end to end.
FAQ
Common Questions
Is this suitable for beginners?
Yes. The class is designed for beginners who know the basics and want to understand how AI is added into a real software product.
Will students build a complete hosted project?
Yes. The goal is to leave with a working AI interview system hosted online using Cloudflare and Supabase.
Is this only about calling an AI API?
No. Students learn the full product flow: frontend, backend, database, auth, prompts, reviews, storage, and deployment.
Who is this best for?
College students, beginner developers, and early-stage builders who want a practical AI project they can show and explain.