Lesson 1: Breaking Down the TodoList App

Goal:

Understand what we are building, why we are building it, and how the specified technologies fit into the project.

1. Learning Objectives

By the end of this lesson, students will:

• Understand the full scope of the TodoList app and its functionalities.
• Analyze how each feature maps to the app's technologies.
• Visualize the app workflow, including backend API interactions and frontend UI design.
• Gain clarity on what the AI integration entails.

2. App Overview

We are creating a TodoList Application with the following core functionalities:

1. Creating a Todo: Users can add tasks to their list.

2. Viewing Tasks: Tasks will be displayed in two columns:

   • Incomplete Tasks
   • Completed Tasks
3. Deleting Tasks: Users can remove tasks from either column.

4. AI-Assisted Features:

   • Generate a task description using AI during task creation.
   • Generate a task schedule based on user time input and task durations.
   • Suggest subtasks required to complete a main task.

3. Key Technologies

Here is a breakdown of the technologies we will use and their roles:

Languages:

• JavaScript: Base programming language for this project.
• TypeScript: Adds static typing, making the app more robust and maintainable.

Frontend:

1. React: Component-based UI framework for building the user interface.
2. TanStack/React Query: Manages server-state data (e.g., fetching, caching, and synchronizing backend data).
3. TanStack/React Router: Provides routing for page navigation and deep links.
4. Radix UI: Provides accessible and customizable UI components to save development time.
5. Phosphor Icons: Icon library for enhancing the app’s user interface.

Backend:

1. MongoDB: NoSQL database for storing todo items.
2. Mongoose: ODM (Object Document Mapper) for MongoDB, making database interactions easier.
3. Express: Backend server framework to handle API requests and integrate with MongoDB.
4. OpenAI API: Provides AI-powered features such as task descriptions, schedules, and subtasks.

Testing:

• Jest: Unit testing framework for JavaScript and TypeScript.
• Supertest: Used to test HTTP endpoints.
• MongoMemoryServer: Allows in-memory MongoDB testing for speed and isolation.

4. App Architecture

We will break the project into two main parts:

Backend

• Server: Built using Express and Mongoose to handle the API.
• OpenAI Integration: Connected to provide AI-generated content.

Frontend

• React Components: UI components built with Radix UI and Phosphor Icons.
• State Management: Handled using TanStack/React Query.
• Routing: Managed using TanStack/React Router.

Data Flow

The diagram below maps out the app's data flow between the Frontend, Backend, and OpenAI API:

[Frontend] --> User Inputs --> [Backend API] --> Save to MongoDB
[Frontend] <-- Fetch Todos <-- [Backend API] <-- MongoDB

AI Integration:
[Frontend] --> Request AI Features --> [Backend API] --> OpenAI API
[Frontend] <-- Receive AI Response <-- [Backend API]

5. Feature Breakdown

6. Homework Assignment

Goal: Analyze the requirements of the TodoList App.

1. Write down a step-by-step flow of how a user will interact with the app.
2. Create a diagram of the app architecture based on the explanation.
3. List all the technologies and briefly explain their role in the app.
4. Describe the AI features in your own words and how they improve the app.