Free for teachers

4-Week Course: Build AI
Tutoring Apps with Next.js

A 4-week async course for teachers transitioning to edtech

Async · Learn at your pace
20 lessons total
Free to join

4

Weeks

20

Lessons

1

Deployed App

$0

Free to join

Full curriculum

Build AI Tutoring Apps with Next.js

1
1
Week 1Web foundations

From Classroom Skills to Web Foundations

Goal: By end of week, student will have a working first Next.js page that explains their tutoring app idea and uses basic HTML, CSS, and JavaScript concepts.

D1Day 1

How the Web Works for Builders

Translate familiar teaching ideas into web terms by learning what browsers do, how pages are delivered, and why HTML is the starting point for every app.

browser and server rolesweb page structuresemantic HTMLthinking like a builder instead of only a user
Deliverable

A one-page outline of the sections and content for an AI tutor homepage.

D2Day 2

Make a Page Readable with HTML and CSS

Build confidence with the core tags and styling rules that make a page clear, organized, and friendly for students and families.

headings, paragraphs, lists, and buttonsclass names and reusable stylesspacing, color, and typography basicsaccessibility through clear structure
Deliverable

A static mockup of the tutoring app homepage with readable layout and styling.

D3Day 3

JavaScript for Small Helpful Interactions

Learn just enough JavaScript to understand variables, functions, and events so your page can respond when a learner clicks or types.

variables and stringsfunctionsclick eventschanging text on the page
Deliverable

A basic interactive element that changes page content when the user clicks a button.

D4Day 4

Meet Next.js and the App Router

See how Next.js organizes files for you, why it is helpful for modern web apps, and how it lets you build step by step without managing everything from scratch.

what Next.js adds on top of ReactApp Router mindsetpages and layoutsdeveloper workflow with local preview
Deliverable

A personalized Next.js starter page with updated copy and clear notes on what each core file does.

D5Day 5

Publish Your First Real Page

Pull the week's ideas together by building a simple first page in Next.js that communicates who the app helps, what it teaches, and why it matters.

editing `app/page.tsx`combining structure, style, and contentpreviewing changes locallyiterating in small steps
Deliverable

A working first Next.js page for an AI tutoring app concept.

Week 1 Project

Build a polished homepage for an AI tutoring app concept that introduces the learner audience, subject focus, and core learning promise.

2
2
Week 2React and Next.js

Build with Components and Routes

Goal: By end of week, student will have a small multi-page tutoring app that uses reusable React components, props, and routing.

D1Day 1

Think in Components

Break a page into smaller teaching-friendly building blocks so your app becomes easier to edit, reuse, and expand over time.

components as reusable UI piecesseparating concernsreading JSXnaming components clearly
Deliverable

A homepage refactored into reusable React components.

D2Day 2

Use Props to Personalize Learning Experiences

Pass information into components the same way teachers adapt a lesson for different students, subjects, or support levels.

propscomponent inputsreusing one component with different contentdescriptive data structures
Deliverable

A set of reusable cards or sections powered by props.

D3Day 3

Add Navigation with Routes

Create separate pages so your app can move beyond a landing page and begin to feel like a real product with clear destinations.

file-based routing in Next.jscreating new pages in the `app` directorylinks and navigationplanning learner flow
Deliverable

A multi-page tutoring app shell with working navigation.

D4Day 4

Handle Learner Input

Introduce basic interactivity so the app can respond to what a learner selects, types, or wants help with.

form inputsbasic stateevent handlerscapturing user choices
Deliverable

A working form that collects learner input inside the app.

D5Day 5

Assemble Your First Tutoring App

Combine reusable components, routing, and learner input into a simple but coherent app experience you can keep improving.

composing features into a productconsistency across pagesreviewing user flowiterative app building
Deliverable

A first complete tutoring app prototype without AI yet.

Week 2 Project

Build a multi-page tutoring app prototype with reusable components, route-based navigation, and a learner question form.

3
3
Week 3AI integration

Add AI Tutoring Features

Goal: By end of week, student will have an AI-powered tutoring chatbot that accepts learner questions and returns supportive, education-focused responses.

D1Day 1

Understand the OpenAI API Flow

Learn how your app talks to an AI model, why API keys must stay secure, and how server routes protect private credentials.

API requests and responsesenvironment variablesserver-side routeskeeping secrets out of the browser
Deliverable

A clear diagram or notes explaining the app-to-AI request flow plus a starter API route.

D2Day 2

Create Your First Tutor Response

Connect the app to the OpenAI API so a learner's question produces a real response inside your tutoring interface.

sending messages to a modelparsing JSON responsesloading and error statestesting with simple prompts
Deliverable

A working end-to-end tutoring response powered by the OpenAI API.

D3Day 3

Prompt Engineering for Teachers

Use your instructional expertise to design prompts that make the AI act like a calm, supportive tutor instead of a generic chatbot.

system instructionsrole and toneage-appropriate explanationsscaffolding instead of giving away answers
Deliverable

A refined tutoring prompt template tailored to a target learner group.

D4Day 4

Design Safe and Useful Tutoring Conversations

Strengthen the experience by setting boundaries, handling confusing inputs, and making the chatbot feel reliable for classroom-style use cases.

guardrailsfallback responsesbias and accuracy awarenessuser experience for educational support
Deliverable

An AI tutor flow with basic safeguards and clearer support messages.

D5Day 5

Turn the Prototype into a Real Tutor

Bring the pieces together into a focused AI tutoring app that reflects both your growing technical skills and your educator judgment.

chat-style interaction designiteration through user testingmatching UI with tutoring intentshipping a meaningful feature
Deliverable

A functional AI tutoring chatbot for one subject or learner scenario.

Week 3 Project

Build an AI tutoring chatbot that accepts student questions, uses a teacher-designed prompt, and returns supportive responses through a clean app interface.

4
4
Week 4Ship it

Ship a Job-Ready Edtech Project

Goal: By end of week, student will have a deployed AI tutoring app, a concise portfolio case study, and a job-ready project they can discuss with confidence.

D1Day 1

Polish the Learner Experience

Improve copy, layout, and flow so the app feels intentional and easier for another person to understand and test.

user-centered polishclear calls to actionconsistency in labels and spacingteacher empathy applied to product design
Deliverable

A cleaner, more understandable tutoring app interface.

D2Day 2

Deploy with Vercel

Learn the practical steps to move your app from local development to a live URL you can share with peers, mentors, and hiring teams.

deployment workflowenvironment variable setupbuild and runtime checkssharing a live project
Deliverable

A publicly accessible deployed version of the AI tutoring app.

D3Day 3

Write the Story Behind the Build

Turn your project into a portfolio artifact by explaining the problem, audience, design choices, and what you learned while building it.

portfolio storytellingproblem-solution framingshowing transferable teaching skillswriting for hiring managers
Deliverable

A one-page portfolio case study for the tutoring app.

D4Day 4

Prepare for Demo and Interview Conversations

Practice explaining your technical choices in plain language so you can speak confidently about the project even if you are early in your coding journey.

demo narrativetalking through tradeoffsdescribing AI responsiblyconnecting classroom experience to product work
Deliverable

A concise demo script or recording outline for the project.

D5Day 5

Launch Your Job-Ready Project

Wrap the course by reviewing your growth, identifying next improvements, and packaging the project so it supports your transition into edtech roles.

reflective iterationproject packagingportfolio readinessnext-step roadmap
Deliverable

A complete job-ready project package with live app, portfolio summary, and future roadmap.

Week 4 Project

Ship the AI tutoring app to Vercel and package it as a portfolio-ready edtech project with a case study and demo narrative.

Limited spots available

Ready to start?

Join thousands of teachers building their edtech future.

Join the waitlist to start

No credit card required · 100% free · Async learning