DEV Community: Khin Soe

--- From Concept to Classroom: How a Physiology Professor Built a Full-Stack Web App with AI ---

Khin Soe — Thu, 29 Jan 2026 02:29:13 +0000

Abstract
This case study details the development of "PhysioLearn," a custom educational platform for dental students, built by a domain expert with limited coding experience using an AI thought partner (Gemini) as a technical co-pilot. The project demonstrates how modern AI tools can bridge the gap between pedagogical needs and technical implementation, allowing educators to build bespoke teaching tools rather than relying on generic software.

Update (v2): This paper now includes the implementation of a Clinical Case Report engine (PDF handling) and the final UI/UX polish for institutional deployment.

The Spark: A Simple Prompt Every software project begins with a requirement. In this case, the need was specific: a secure, online repository for Dental Physiology lectures, case reports, and quizzes that I could manage myself.

The journey began not with a line of code, but with a simple conversation. I asked the AI:

"I want to upload my physiology lectures, case reports, MCQ quizzes online by using supabase backend. which application should I use as frontend?"

The AI suggested a Next.js + Supabase stack:

Next.js (Frontend): For a fast, interactive user interface hosted on Vercel.

Supabase (Backend): For the database and file storage (PostgreSQL).

This combination provided professional-grade performance without the need to manage physical servers.

The Architecture We established a folder structure that mirrored the dental curriculum:

Library (/library): A dynamic list of lectures fetching real-time data from the database.

Case Reports (/case-reports): A secure reader for clinical PDFs, allowing students to study real-world scenarios.

Upload Portal (/upload): A "Gatekeeper" protected page allowing only the administrator to upload content directly to the cloud.

Quiz Engine (/quizzes): An interactive testing module linked to the database for instant student assessment.

The "Co-Coding" Process & The Learning Curve The development process was iterative. I acted as the "Architect" (defining what needed to be built) and "Quality Assurance Lead" (testing the output), while the AI acted as the "Senior Developer" (writing the syntax and debugging).

This project became a crash course in the realities of software engineering. We encountered and solved three major technical hurdles:

Challenge A: The "Zombie Folder" (Git Sync Issues)
We encountered a persistent 404 Not Found error caused by a capitalization mismatch between Windows (Lectures) and Linux servers (lectures).

The Fix: We performed a "Nuclear Rename," changing the directory entirely to library to force the server to recognize the new path.

Challenge B: Database Integrity
During the testing of the Upload feature, we faced a "Duplicate Key" error when re-uploading a file.

The Fix: We learned that databases require unique identifiers. We used SQL scripts to "reset the ID counter," allowing uploads to flow smoothly again.

Challenge C: The "Refused to Connect" PDF Error
When embedding clinical PDFs, we discovered that some external hosts block embedding.

The Fix: We built a dedicated "Case Report Reader" that streams the PDF directly from our own secure Supabase storage, bypassing external restrictions.

Results: "PhysioLearn" Goes Live In less than 72 hours, the platform went from a concept to a live URL (https://physio-platform.vercel.app/).

Key Features Delivered:

Secure Storage: Large video files (MP4) and documents (PDF) are streamed securely from Supabase Storage.

Admin Security: A hard-coded entry system (secret_code) protects the upload interface from unauthorized public access.

Interactive Learning: Students can take quizzes with instant feedback, a feature built from scratch using SQL and React.

Example Figures

Figure 1: The Deployment Struggle Early development showed the importance of precise routing. The "404 Error" taught us how the folder structure in VS Code maps directly to the URL bar.

"/>
Figure 2: The Security Implementation The "Gatekeeper" screen on the Upload page. This simple React state logic prevents students from accidentally accessing the teacher's dashboard.

Figure 3: The Video Player The fully functional Video Player rendering a Lung Physiology animation, pulled directly from the Supabase cloud storage.

The Polish: From Prototype to Platform The final phase focused on establishing institutional authority. A student platform must not only function; it must feel trustworthy.

We implemented a Unified Upload Manager capable of distinguishing between Video Lectures and PDF Case Reports. This required complex logic in the "Backend" to route files to the correct database tables automatically.

Finally, we overhauled the User Interface (UI) to include the University's branding and a "Meet the Faculty" section. This transition from a generic template to a personalized portal signals to students that this is an official educational resource.

Figure 4: The "All-in-One" Upload Manager. The Admin Portal was upgraded to handle multiple file types (MP4 and PDF) from a single interface.

Figure 5: The Professional Identity.

Figure 6: Establishing the platform's academic credibility.

Figure 7: The final landing page featuring the Faculty Profile

Conclusion Building "PhysioLearn" proved that domain expertise (Physiology) combined with AI assistance can produce professional-grade software. The AI did not just "write code"; it explained the logic behind the errors (like "Ghost States" in Git), effectively teaching the principles of Full Stack Development along the way.

For other educators hesitant to build their own tools: the barrier to entry has never been lower. You do not need to memorize every syntax rule; you just need a clear vision and a willingness to iterate.

"Originally published on Medium."

--- title: From Concept to Classroom: "AI-Human Collaboration" tags: webdev, education, ai, beginners ---

Khin Soe — Wed, 28 Jan 2026 10:48:14 +0000

## Abstract

This case study details the development of "PhysioLearn," a custom educational platform for dental students, built by a domain expert with limited coding experience using an AI thought partner (Gemini) as a technical co-pilot. The project demonstrates how modern AI tools can bridge the gap between pedagogical needs and technical implementation, allowing educators to build bespoke teaching tools rather than relying on generic software.

1. The Spark: A Simple Prompt

Every software project begins with a requirement. In this case, the need was specific: a secure, online repository for Dental Physiology lectures, case reports, and quizzes that I could manage myself.

The journey began not with a line of code, but with a simple conversation. I asked the AI:

"I want to upload my physiology lectures, case reports, MCQ quizzes online by using supabase backend. which application should I use as frontend?"

The AI suggested a Next.js + Supabase stack:

Next.js (Frontend): For a fast, interactive user interface hosted on Vercel.
Supabase (Backend): For the database and file storage (PostgreSQL).

This combination provided professional-grade performance without the need to manage physical servers.

2. The Architecture

We established a folder structure that mirrored the dental curriculum:

Library (/library): A dynamic list of lectures fetching real-time data from the database.
Player (/library/[id]): A dynamic route capable of rendering both PDFs and MP4 videos on demand.
Upload Portal (/upload): A "Gatekeeper" protected page allowing only the administrator to upload content directly to the cloud.
Quiz Engine (/quizzes): An interactive testing module linked to the database for instant student assessment.

3. The "Co-Coding" Process & The Learning Curve

The development process was iterative. I acted as the "Architect" (defining what needed to be built) and "Quality Assurance Lead" (testing the output), while the AI acted as the "Senior Developer" (writing the syntax and debugging).

This project became a crash course in the realities of software engineering. We encountered and solved three major technical hurdles:

Challenge A: The "Zombie Folder" (Git Sync Issues)

We encountered a persistent 404 Not Found error caused by a capitalization mismatch between Windows (Lectures) and Linux servers (lectures).

The Fix: We performed a "Nuclear Rename," changing the directory entirely to library to force the server to recognize the new path.
Lesson: Servers are strict about case-sensitivity, even if local machines are forgiving.

Challenge B: Database Integrity

During the testing of the Upload feature, we faced a "Duplicate Key" error when re-uploading a file.

The Fix: We learned that databases require unique identifiers. We used SQL scripts to "reset the ID counter," allowing uploads to flow smoothly again.

Challenge C: The "Frankenstein" Data

Our first quiz accidentally combined questions about the heart with answers about the lungs due to a logical error in our data insertion script.

The Fix: We wrote a "Clean Slate" SQL script to truncate the tables and re-insert structured data, ensuring data integrity.

4. Results: "PhysioLearn" Goes Live

In less than 48 hours, the platform went from a concept to a live URL. (https://physio-platform.vercel.app)

Key Features Delivered:

Secure Storage: Large video files (MP4) and documents (PDF) are streamed securely from Supabase Storage.
Admin Security: A hard-coded entry system (secret_code) protects the upload interface from unauthorized public access.
Interactive Learning: Students can take quizzes with instant feedback, a feature built from scratch using SQL and React.

Example Figures

Early development showed the importance of precise routing. The "404 Error" taught us how the folder structure in VS Code maps directly to the URL bar.

The "Gatekeeper" screen on the Upload page. This simple React state logic prevents students from accidentally accessing the teacher's dashboard.

The fully functional Video Player rendering a Lung Physiology animation, pulled directly from the Supabase cloud storage.

5. Conclusion

Building "PhysioLearn" proved that domain expertise (Physiology) combined with AI assistance can produce professional-grade software. The AI did not just "write code"; it explained the logic behind the errors (like "Ghost States" in Git), effectively teaching the principles of Full Stack Development along the way.

For other educators hesitant to build their own tools: the barrier to entry has never been lower. You do not need to memorize every syntax rule; you just need a clear vision and a willingness to iterate.

DEV Community: Khin Soe

--- From Concept to Classroom: How a Physiology Professor Built a Full-Stack Web App with AI ---

Update (v2): This paper now includes the implementation of a Clinical Case Report engine (PDF handling) and the final UI/UX polish for institutional deployment.

The Fix: We built a dedicated "Case Report Reader" that streams the PDF directly from our own secure Supabase storage, bypassing external restrictions.

Example Figures

--- title: From Concept to Classroom: "AI-Human Collaboration" tags: webdev, education, ai, beginners ---

1. The Spark: A Simple Prompt

2. The Architecture

3. The "Co-Coding" Process & The Learning Curve

Challenge A: The "Zombie Folder" (Git Sync Issues)

Challenge B: Database Integrity

Challenge C: The "Frankenstein" Data

4. Results: "PhysioLearn" Goes Live

Example Figures

5. Conclusion

Also published on medium.com.