Build an AI Study Buddy Chatbot with Python and React

Built by

hieumessideptrai

Computer Science

Build an AI Study Buddy Chatbot with Python and React

Bridge your JavaScript and React skills to build an intelligent study assistant backend with Python, FastAPI, and prompt engineering, complete with a live frontend.

4 modules10 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

Follow the path module by module. The layout keeps the lesson count, your progress, and the module description in one scan.

Python for JavaScript Developers

2 lessons

Port your TypeScript skills over to Python. Learn basic syntax, variables, and control flow by building a local command-line interface chatbot.

Prompt Engineering with Gemini API

3 lessons

Integrate Google's free Gemini API to act as your core AI brain, and use prompt engineering to force it to adopt a supportive tutor persona.

Building the Python Web Server

3 lessons

Expose your Python chatbot code to the web by building a high-performance REST API with FastAPI, using your Express and Zod experience as a guide.

Connecting the React Chat Interface

2 lessons

Leverage your React state and styling knowledge to build a clean web interface that talks directly to your custom Python backend.

Public lesson

Python Syntax through the Lens of TypeScript

Since you already have experience with TypeScript, learning Python isn't about learning how to program all over again—it's just about translating the mental models you already have into a slightly different syntax.

Let's compare the two directly so you can start writing Python right away.

Step 1: Declaring Variables and Type Hints

In TypeScript, you use const or let to declare variables, and you specify types using a colon:

const username: string = "Alex";
let attempts: number = 3;

const username: string = "Alex";
let attempts: number = 3;

Python does away with declaration keywords like const and let entirely. You simply write the variable name.

Python also supports type hints, which look incredibly similar to TypeScript, with a few small spelling differences:

string becomes str
number becomes int (for whole numbers) or float (for decimals)
No semicolons at the end of lines

username: str = "Alex"
attempts: int = 3

username: str = "Alex"
attempts: int = 3

Tasks

Let's write your first Python script. Create a file named variables.py and write a setup to hold some movie data.

Fill in the missing parts of this skeleton to declare a movie title and its release year using Python type hints, then run it.

# Declare a string variable named title
title: str = # ... your value here ...

# Declare an integer variable named release_year with its type hint
release_year: # ... add type hint and value ...

print(title)
print(release_year)

# Declare a string variable named title
title: str = # ... your value here ...

# Declare an integer variable named release_year with its type hint
release_year: # ... add type hint and value ...

print(title)
print(release_year)

Tasks

How to check your work: Run the file in your terminal:

python variables.py

python variables.py

If you see your movie title and year printed to the console, it worked.

Step 2: Dynamic Typing (The Catch)

In TypeScript, the compiler stops you if you try to reassign a variable to a different type:

let score = 10;
score = "ten"; // Error: Type 'string' is not assignable to type 'number'.

let score = 10;
score = "ten"; // Error: Type 'string' is not assignable to type 'number'.

Python is dynamically typed. Type hints are purely for you and your code editor to catch bugs early; the Python runtime engine ignores them completely.

Tasks

Let's see this in action. Create a new file called types_demo.py and write the following code:

points: int = 50
print(type(points))

# Reassign points to a string
points = "fifty"
print(type(points))

points: int = 50
print(type(points))

# Reassign points to a string
points = "fifty"
print(type(points))

Tasks

How to check your work: Run the script:

python types_demo.py

python types_demo.py

Look closely at the output. Python will happily change the type of points from <class 'int'> to <class 'str'> at runtime without raising an error.

This is why paying attention to your types is even more critical in Python than in TypeScript—the language won't force you to play by the rules at runtime.

Step 3: Functions and String Formatting

Let's compare how both languages define a function that processes data.

Here is a TypeScript function:

function calculateTotal(price: number, tax: number): number {
    return price + tax;
}

function calculateTotal(price: number, tax: number): number {
    return price + tax;
}

And here is the exact same function in Python:

def calculate_total(price: float, tax: float) -> float:
    return price + tax

def calculate_total(price: float, tax: float) -> float:
    return price + tax

Notice the structural shifts:

function becomes def (short for define).
The return type is defined using -> instead of a colon before the body.
Python doesn't use curly braces {}. Instead, it uses a colon : and strict indentation (usually 4 spaces) to mark where the function body starts and ends.
Python style conventions use snake_case instead of camelCase for function and variable names.

To output variables inside strings, TypeScript uses template literals with backticks: `User: ${name}`. Python uses f-strings (formatted string literals), which prefix the string with an f and use simple curly braces: f"User: {name}".

Tasks

Let's build a function that formats a profile description. Create a file named profile.py. Complete the function below so that it returns a single formatted string.

def format_profile(username: str, age: int) -> str:
    # Use an f-string to return a message like "Alice is 25 years old."
    return f"# ... complete the string ... "

# Test the function
message = format_profile("Jordan", 30)
print(message)

def format_profile(username: str, age: int) -> str:
    # Use an f-string to return a message like "Alice is 25 years old."
    return f"# ... complete the string ... "

# Test the function
message = format_profile("Jordan", 30)
print(message)

Tasks

How to check your work: Run your script:

python profile.py

python profile.py

If your console outputs Jordan is 30 years old., your function and string formatting are fully functional.

Course Outline

4 modules · 10 lessons

Python for JavaScript Developers

Prompt Engineering with Gemini API

Building the Python Web Server

Connecting the React Chat Interface

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.