DEV Community

Cover image for --- title: From Concept to Classroom: "AI-Human Collaboration" tags: webdev, education, ai, beginners ---
Khin Soe
Khin Soe

Posted on

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

**Figure: Full functional videoplayer**## 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:

  1. Secure Storage: Large video files (MP4) and documents (PDF) are streamed securely from Supabase Storage.
  2. Admin Security: A hard-coded entry system (secret_code) protects the upload interface from unauthorized public access.
  3. 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 Final Deployment**
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.

Also published on medium.com.

Top comments (0)