Lesson 2: Introduction to Project Technologies with Code Demos

Goal

Understand how each technology works with brief explanations and demo code examples. These examples are for understanding the concepts; you won’t build the app yet.

1. Learning Objectives

By the end of this lesson, students will:

Understand the role of each technology in the app.
Learn fundamental syntax and examples for:
- JavaScript → TypeScript
- Express → MongoDB (Backend)
- React → React Router → React Query → Radix UI (Frontend).
Gain clarity on the OpenAI API integration basics.

2. Technology Deep Dive and Code Examples

2.1. JavaScript vs. TypeScript

JavaScript is a dynamic, loosely typed language.
TypeScript is JavaScript with static typing, making large apps easier to maintain.

Key TypeScript Features:

Static Types
Interfaces
Generics
Type Inference

Example: Converting JavaScript to TypeScript

JavaScript:

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5

TypeScript:

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(2, 3)); // 5

Explanation:

a: number and b: number → Define parameter types.
: number → Ensures the return type is a number.

2.2. Express and MongoDB

Express is a lightweight framework for building backend APIs.
MongoDB is a NoSQL database for flexible, JSON-like storage.

Setup Express

Install Dependencies:

npm install express mongoose dotenv

Basic Express Server:

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
app.use(express.json()); // Middleware for JSON body parsing

const PORT = process.env.PORT || 5000;

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/todolist')
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.error(err));

// Routes
app.get('/', (req, res) => res.send('API is running'));

// Start Server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2.3. React

React creates interactive UIs with reusable components.

Basic React Component

import React from 'react';

type TodoProps = {
  title: string;
  completed: boolean;
};

const TodoItem: React.FC<TodoProps> = ({ title, completed }) => {
  return (
    <div>
      <h3>{title}</h3>
      <p>{completed ? 'Completed' : 'Not Completed'}</p>
    </div>
  );
};

export default TodoItem;

2.4. TanStack/React Router

React Router allows navigation between pages.

Setup React Router

Install React Router:

npm install @tanstack/react-router

Create Routes:

import { RouterProvider, createBrowserRouter } from '@tanstack/react-router';
import ReactDOM from 'react-dom/client';
import React from 'react';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

2.5. TanStack/React Query

React Query handles data fetching, caching, and state management.

Fetching Todos with React Query

Install React Query:

npm install @tanstack/react-query

Code Example:

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchTodos = async () => {
  const { data } = await axios.get('/api/todos');
  return data;
};

const TodoList = () => {
  const { data, isLoading, error } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading todos</p>;

  return (
    <ul>
      {data.map((todo: any) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

2.6. Radix UI and Phosphor Icons

Radix UI simplifies building accessible UI components.
Phosphor Icons adds icons to enhance the interface.

Install Dependencies:

npm install @radix-ui/react-icons phosphor-react

Example: Button Component with an Icon

import { Button } from '@radix-ui/react-button';
import { Plus } from 'phosphor-react';

const AddButton = () => (
  <Button>
    <Plus /> Add Task
  </Button>
);

export default AddButton;

2.7. OpenAI API Integration

OpenAI API allows us to add AI features like task descriptions and subtasks.

Install OpenAI SDK:

npm install openai

Example Integration in Express:

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

app.post('/api/generate-description', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await openai.createCompletion({
      model: 'text-davinci-003',
      prompt: `Write a todo description: ${prompt}`,
      max_tokens: 100,
    });

    res.json({ description: response.data.choices[0].text });
  } catch (error) {
    res.status(500).send(error.message);
  }
});

3. Key Takeaways

TypeScript adds static typing to JavaScript.
Express and MongoDB handle backend APIs and database storage.
React, React Query, and React Router power the frontend UI and data management.
OpenAI API brings AI-driven functionality.

Homework Assignment

Install the Dependencies:
- Node.js, npm, and libraries (Express, MongoDB, React, OpenAI).
Write a TypeScript Function that adds two numbers and returns the sum.
Create a Simple Express Server with a single route / that returns “Hello World.”
Set Up a React App with a basic App.tsx that displays “Todo App.”