Browse Curated Developer Resources on the Best Tools

React

Next.js

TypeScript

JavaScript

Remix

Redux

Supabase

Angular

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Tomasz Ducin

course

Scalable Signals Angular Architecture with NGRX Signal Store

Get started with Bootstrap by building a professional landing page.

Lucas Minter

Create Professional Responsive Websites using Bootstrap

Write TypeScript that will keep up with your application as it grows.

Domain Data Modeling using TypeScript Aliases, Brand Types and Value Objects

You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

Shadid Haque

Build a Real-time Next.js 14 Chat App with Fauna 

Learn the fundamentals of React Query (a.k.a TanStack Query) by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Learn how the latest JavaScript features can help you improve your codebase.

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

Compose 3D scenes, models, and animations using familiar Vue components and directives, without having to dive into the complexities of Three.js.


Alvaro Saburido

Create Interactive 3D Experiences with TresJS

Learn everything you need to know to take advantage of signals and be prepared for signal-based components

Modernize State Management in Angular with Signals

Quickly get Supabase running on your machine and keep it in sync with a remote.

Ben Patton

Getting Started with Supabase Local Dev

Create the common types of builds for iOS and Android on EAS. Development builds for local development, Preview builds for internal testing, and Production builds for release.

Kadi Kraman

Build and Deploy React Native Apps with Expo EAS

Quickly develop your pages and components in isolation with Storybook

Michael Chan

A Beginner’s Guide to Storybook 7 with React

Master React Testing Library: Render components, enhance UI querying, optimize testing flow, handle events, & eliminate 'not wrapped in act' warnings.

Daniel Afonso

An Introduction to the React Testing Library

Build full stack applications with AWS CDK powered by TypeScript

Tomasz Łakomy

Full Stack TypeScript with AWS Cloud Development Kit v2

Learn how you can leverage the web platform to build dynamic, modern web apps with Astro while minimizing the JavaScript you send to the client.

Lazar Nikolov

Build a Full Stack Blog with Astro

Jumbotron

Home Page

Get started with MongoDB and Docker really quick 🔥 even if you have no backend/fullstack experience.

This lesson guides you through installing Docker Desktop and setting up a MongoDB image.

We explain Docker images and containers, and their roles in providing isolated software environments.

We run a MongoDB image in 2 ways: using the terminal and Docker Desktop

We demonstrates configuring port settings for a container and accessing the MongoDB shell (`mongosh`) to interact with the database.

We learn how to manage Docker containers, configure settings, and run commands inside the container.

Grab the CLI command: 🔥 `docker run --name some-mongo -d mongo:latest` 🔥

Install Docker to run local MongoDB Container

Learn to install Docker Desktop, set up a MongoDB image, and manage containers. Configure ports and access the Mongo shell

[https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main](https://github.com/johnlindquist/mcp-cursor-tool-starter/tree/main)

Cursor's AI is powerful, but it can't do everything. What if you could give it the ability to interact with your specific workflows, tools, and data? This lesson shows you how to do exactly that by building a custom MCP tool – and we'll do it in under two minutes!

We'll leverage the Model Context Protocol (MCP), an open standard that bridges the gap between AI agents (like Cursor's Composer) and your custom code. By creating an MCP tool, you're essentially giving Cursor a new skill.

Here's the breakdown:

Understanding MCP: We'll briefly cover what the Model Context Protocol (MCP) is and why it's the key to extending Cursor's functionality. In short, it enables communication between the AI and your tools in a standardized way.

Fast Track Setup: We'll use a ready-made starter project (a single TypeScript file and package.json) to skip the boilerplate and get straight to the core concepts.

Step-by-Step Integration: We'll walk through the simple process of:

Cloning the starter project.

Installing dependencies with pnpm install.

Running the starter server.

Adding the tool to Cursor's MCP settings (under Features > MCP).

Verifying that your tool is working

Real-World Example: We'll demonstrate the tool in action, using Cursor's Composer to create a new GitHub issue using the gh CLI, all driven by our custom MCP tool.

This lesson is about more than just building one tool; it's about understanding how to extend Cursor's capabilities to fit your unique development needs. You'll learn the foundational steps to create a whole ecosystem of AI-powered tools.

Build Your First MCP Tool in Cursor in Just 2 Minutes

Displaying data in tables has been notoriously hard to implement. Naive implementations of data tables will leave your app slow and janky and many table libraries out there are restricted to a few select UI frameworks they use or aren't very customizable.

Tanstack Table is a 'headless' option meaning you have complete control of the presentation while taking advantage of the data side of the equation.

You'll be able to fetch and display remote data, handle pagination, and implement row virtualization for better performance.

Once you've implemented basic functionality you can take your tables to the next level customizing cells with your own JSX components, adding features like toggling column visibility, and ensuring your table is mobile-friendly with CSS pseudo-elements.

By the end, you'll have the skills to create efficient, user-friendly tables that elevate your applications. You can take what you learn here (using React) to any of the popular modern UI frameworks that fit your project requirements.

Ian Jones

Headless, Mobile-friendly Data Tables with Tanstack Table and React

Learn to display, paginate, and virtualize data effectively in a table with Tanstack table and React 19.

Install `ghx` with `npm i -g @johnlindquist/ghx`

https://github.com/johnlindquist/ghx

You've copied and pasted code, set up your project, and... *error*.  "Stream is not readable."  Sound familiar?  Generic Google searches and outdated Stack Overflow answers often leave you more confused than when you started.  You need more than just documentation; you need *context*.  You need to see how real developers solve this *exact* problem.

This lesson shows you a better way to debug, using real-world GitHub examples and the power of Cursor's Composer.

Here's the workflow we'll cover:

1.  **Identify the Error:** You've already done this!  You have a specific error message ("Stream is not readable") and the code that's causing it.
2.  **Find Real-World Solutions with `ghx`:** We'll use `ghx`, a tool for searching GitHub, to find *actual projects* that have encountered (and solved!) this same issue.  No more generic advice – you'll see working code.
3.  **Consolidate and Analyze:**  `ghx` brings those relevant code snippets into a single, easy-to-read file.
4.  **Leverage Cursor's Composer:** We'll use Cursor's Composer to directly interact with the examples and your problematic code.  Paste in your error, reference the `ghx`-generated file, and ask targeted questions like:
    *   "Based on these examples, how should I modify my code to fix the 'stream is not readable' error?"
    *   "What's the common cause of this error in the context of an MCP server?"
    *   "Show me the specific lines in the examples that handle stream readability correctly."
5. **Fix the Error:** Implement the solution using this workflow.

Instead of guessing, you'll learn directly from proven solutions.  You'll gain a deeper understanding of your issue and how to troubleshoot it effectively.  This approach transforms debugging from a frustrating hunt into a targeted learning experience.

Fix Real-World Coding Errors with GitHub Context through ghx and Cursor Composer

Learn how to test custom ESLint rules with Vitest and RuleTester.

In the [previous video](https://egghead.io/set-up-a-custom-es-lint-rule~kq49h), we created a custom eslint rule that gives us a warning when some of the class names don’t start with a lowercase letter.

Here, I'll show you how to test this or any other custom ESLint rule using unit tests without manually restarting the ESLint server or modifying production code to check if the rules work correctly. We'll look at the structure in which correct and incorrect code samples should be specific to RuleTester.

We'll also learn how to make our rule fixable and verify that the applied fix works as expected.

Test Custom ESLint Rules with Vitest and RuleTester

Learn to test a Custom ESLint Rule using Vitest and RuleTester.

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

How to Work with AI-Generated Code You Don't Understand with ghx and Gemini

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

In this lesson we'll use a few predefined schemas which will serve as constituents to create union and intersection schemas.

Three room booking schemas are defined: _single_, _double_, and _suite_. Each schema has slight differences in the structure.

The `z.union` utility is used to create a union of these schemas, allowing for validation against any of them. Type inference (using `z.infer`) for the room booking schema produces a union of object literals, exactly like in TypeScript.

We also create an intersection using `z.intersection`, combining room booking details with discount information.

These techniques enhance data validation and allow to make `zod` aligned even more with `TypeScript`.


Define Unions and Intersections with Zod

implement unions and intersections in Zod schemas for example domain related objects, enhancing TypeScript validation with clear examples

Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

This lesson demonstrates how to provide runtime type-safety for arrays in TypeScript applications.

First we need to understand the challenges behind ensuring array type-safety in TypeScript. We explain how TypeScript infers arrays with an undefined length, making it difficult to guarantee that array accesses are safe.

Zod schemas provide the `z.array` to define arrays of various element types. 

We compare how utilities such as `.min`, `.max` and `.nonempty` get reflected in inferred TypeScript types, and how zod processes the validation.


Declare Precise Array Types within Zod Schemas

Provide array type safety in TypeScript using Zod schemas, including handling non-empty arrays for better validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make string-based schemas more specific using Zod in TypeScript. We focus on defining allowed values for a room type, showing how to use literals and enums effectively.

Zod's `z.literal` method allows us to specify a single allowed value for a string schema. For example, if we want to define a room type as `"premium"` and make it backward-type-safe in TypeScript, we can use `z.literal("premium")` to ensure that only this value is valid.

`z.enum` lets us define a set of allowed string values. This is useful when we have multiple options for room types, like `"standard",` `"premium"` or `"childrenFriendly"`. 

`z.enum` creates a union of TypeScript-compatible string literals, making it easy to validate against multiple values. Zod enums can be used to extract or exclude specific values from the enum.

Finally, zod's `z.nativeEnum` a native enum creates an equivalent of TypeScript's native `enum` ("real enums", we could say).

We can validate against all these values just like we do with literals and enums.


Work with Zod Literals and Enums Effectively

Use Zod for string schemas in TypeScript, including literals, enums, and native enums for room type validation

In this lesson, we dive into the Zod's `refine` utility, allowing defining more complex schema validation **on top of existing schemas and utilities**.

Sometimes, we need special validation rules for our applications to work correctly. The `refine` utility lets developers create their own validation rules. This method's uses a callback to check if the input is valid. We also create meaningful messages when something doesn’t meet the validation rules.

We use a practical example involving a room booking schemawith `dueDate` and `price` property refinement.


Apply Schema Custom Refinement with Zod

Enhance your TypeScript validation skills with Zod's refine utility for custom room booking schemas, focusing on date and price validation.


In this episode of What's Good, Joel Hooks sits down with Dev Agrawal, a member of the SolidJS core team, to discuss the evolving landscape of web development, AI-assisted coding, and modern framework architecture.

## Episode Highlights

### SolidJS and Modern Framework Architecture
- Detailed comparison between SolidJS and React, highlighting key advantages
- Deep dive into Suspense implementation and reactive state management
- Overview of Dev's work on cross-boundary reactivity in SolidJS
- Discussion of his $7,000 Solid Hack competition winning project
- Exploration of stateful server components with WebSocket updates

### AI-Assisted Development
- Discussion of AI agents managing tasks and grooming backlogs during meetings
- Exploration of using AI tools like Cursor for development
- Joel shares his experience building [JoelFit](https://joelfit.app), a full-stack application developed primarily through AI prompting
- Analysis of AI's current limitations and the importance of human guidance in development

### Emerging Technologies and Trends
- Analysis of React Server Components and their impact on the ecosystem
- Discussion of Cloudflare Durable Objects as individual compute units
- Introduction to Zero Sync and its implications for local-first applications
- Exploration of incremental view maintenance and its performance benefits
- Overview of Vite 6's improvements for server components and meta frameworks

### Featured Projects and Resources
- [JoelFit (code)](https://github.com/joelhooks/joelfit) - Joel's AI-assisted development project on github
- [Solid Suspense Demo v2](https://github.com/devagrawal09/solid-suspense-demo-v2) - Dev's demo showcasing Solid's advantages
- [Building Asynchronous UIs Without the Hassle](https://youtube.com/watch?v=pX5r_jTLbvw) - Dev's conference talk

## Key Takeaways
- SolidJS offers built-in support for async operations without React's bailout issues
- The entire Solid ecosystem was built with suspense support from v1
- Durable Objects are often misunderstood - they're individual compute units rather than just shared state
- Zero Sync's incremental view maintenance pairs particularly well with Solid's architecture
- React has moved away from traditional SPA towards full-stack architecture
- Framework choices continue to evolve with different approaches to reactivity and state management

## Connect with Dev
- Watch Dev's talk on [Building Asynchronous UIs Without the Hassle](https://youtube.com/watch?v=pX5r_jTLbvw)
- Check out his [Solid Suspense Demo](https://github.com/devagrawal09/solid-suspense-demo-v2)

---

*Note: This episode was recorded in January 2024 and discusses emerging technologies and trends in web development.*

Full-Stack Signals in Solid, AI Development, and the Future of Web Frameworks

A deep dive into AI-assisted development, modern web framework architecture, and emerging technologies like full-stack Solid signals and local-first databases.

TypeScript v5.8 ships with the new `erasableSyntaxOnly` compiler flag.

It disallows using the TS features which emit additional JavaScript output, due to being outside of official [ECMAScript specification](https://ecma-international.org/publications-and-standards/standards/ecma-262/).

In this lesson we'll see what TypeScript features get affected and why exactly.

Check out the [playground link with the code](https://www.typescriptlang.org/play/?erasableSyntaxOnly=true&isolatedModules=true&ts=5.8.0-dev.20250129#code/DYUwLgBA9gRgVgLggbwgOwIYFsRIM5gBOAlmgOYQC+EAvCgFATra4QDkAUlABZoQAiUEG3qV69EGgCuWCAFkQAE2IBjDMADKABxAri6sAE8GTAOKSQhdQAUrKsMQdQ0l2u3MurwWxnuPizpZsADSMEBpShGQgzm5sEVExaCFh1kr6RKr6fHRsacoYmXoYyaFMAMIYhMpQwFBkxARxldUBdQ0EKUwAciCRtfWNkLm9-e1DImKgkHg6xcBGSArKappz+gvGdMuq6tq6G0YAdKOEAx1g4kY6EAD6O6v780ZxptZsEAA+7BoAqgBKpgAogB5bofb55IH8ACSAEEACr-GHleHgr7scpw-6wkEAGRBphhGgREPY3SBAPxhOJpPo0zuswOBkMSHu6Ue6xZcQpVIJRJJIgkAA8tFBCJAVMAMHg8AIoPZxSYICpnARCFJFYQABRhJhaKQwYCqZg4fCZchlJgQLRnMC6e2KCCGEBVPAggBmQNFlmIkhUrGkWBglit+pIADdCiAIEznqz5By9lzNmEAJQoMR6m2G40qCDRMCCLUwtAeqDatPmkjkZXW62EcCRPgAA34hCOEAAJMgwNxGkdMDhKGH69anocEz2HsnmZsANp9gdxycAXRH2bHEG9OhI-tYPaXeCOLrdnp3vv31FPhDwLYA3NmxFmhyBZr4YzPgIIsBhSMqQFFcVIA9KQ0D8WI8BkX8SAALxAYswHFbVFAVJDCCQRDxSrWMLQoZBs0bMBmwgFsIiwGCp2QVCtSOQssMIUty0rSgHzCZ96CAA).

Use the erasableSyntaxOnly TypeScript compilation flag

TypeScript v5.8 ships with the new `erasableSyntaxOnly` compiler flag, which disallows using TypeScript enums, class property accessors and namespaces.

Fetch paginated data with React 19 `use`. Set a promise as the initial value in `useState` then return a function from your custom hook to update that promise with a new one to load the next page of data.

Fetch and render paginated data with React 19 use

Fetch paginated date with React 19 use. Update the promise useState is storing for each page of data.

This lesson demonstrates how to utilize DeepSeek's R1 model to access its reasoning capabilities and then seamlessly transition to other models for subsequent tasks. By extracting the reasoning output from DeepSeek R1, you can leverage its powerful reasoning while gaining the speed, cost efficiency, and configuration flexibility of alternative models. This two-phase approach begins with DeepSeek’s new R1 model, praised for its open-source nature and value. You then gain the adaptability to switch to other models depending on your needs or existing workflows. This lesson provides a step-by-step walkthrough of this process, along with demo code to help you implement this technique yourself.

Combine DeepSeek R1 Reasoning with GPT 3.5 Turbo for the Cheapest, Fastest, and Best AI

While much focus in AI has been on optimizing input and generating concise outputs, a new model in Google's AI Studio dramatically expands output possibilities with a capacity of 65,000 tokens. This represents a significant shift, opening doors to new application scenarios, especially for developers and creators. This lesson explores a practical and immediately useful scenario: leveraging this large output capability within Google's AI Studio to generate extensive sample datasets for your projects. Whether you are developing a new application, building a resource, or require robust datasets for testing and validation, this model offers a powerful solution. We'll demonstrate how to move beyond the constraints of short responses and utilize the full potential of large output models to generate the data volume and variety you need, enhancing your development workflow through Google's AI Studio.

AI Studio's New 65k Output Opens Exciting Possibilities

This lesson explores how to use Cursor to generate and maintain English specifications as a form of living documentation. Learn how these automatically created documents can serve as a consistent and up-to-date representation of your code's behavior. The video highlights how reviewing and refining these English specifications can help ensure that code modifications align with the intended purpose and that documentation accurately reflects the current codebase, promoting better long-term code maintainability and clarity.

Here's the "english-spec.md" used in the video:

```markdown
> You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.  
>  
> **Your Task**:  
> 1. Read and interpret the code I provide.  
> 2. Produce a technical, English-only summary of what the code does.  
> 3. Use headings and bullet points to clearly outline the roles of each function, class, variable, or important logic block.  
> 4. **Do not include any actual code** in your final output. Instead, translate the code’s content into an English explanation (like a specification or documentation).  
> 5. Keep the explanation concise but thorough. Focus on explaining the purpose, process, and relationships between functions or modules in the code.  

**User Prompt to the AI**:

> **Instruction**: Convert the following code into a single file of pure English text that outlines exactly what each part of the code does. Use bullet points, headings, and descriptive language. Do not show any code—only explain how the code behaves. This is intended to serve as a human-readable spec or “translation” of the code.  
>  
> **Code**:  
> ~~~  
> [PASTE YOUR CODE HERE]  
> ~~~  

**Example Input/Output #1**:

- **Example Code (Input):**
  ~~~js
  // example1.js
  const greetUser = (userName) => {
    const greeting = `Hello, ${userName}!`;
    console.log(greeting);
  };

  greetUser("Alice");
  ~~~

- **Example Explanation (Output)**:
  ~~~
  # Overview
  - This file defines a single function which greets a user by name and prints a message to the console.
  
  # Function: greetUser
  - Accepts one parameter (`userName`).
  - Constructs a greeting string that combines static text with the `userName`.
  - Outputs the greeting using `console.log`.

  # Behavior Flow
  - The function is called with the argument "Alice".
  - Upon invocation, "Hello, Alice!" is logged to the console.

  # Key Points
  - Shows how to create a greeting with a dynamic name.
  - Demonstrates basic string interpolation and console logging.
  ~~~

**Example Input/Output #2**:

- **Example Code (Input):**
  ~~~py
  # example2.py
  class Calculator:
      def __init__(self, initial=0):
          self.value = initial
      
      def add(self, amount):
          self.value += amount
      
      def subtract(self, amount):
          self.value -= amount
      
      def get_value(self):
          return self.value

  calc = Calculator(10)
  calc.add(5)
  calc.subtract(3)
  result = calc.get_value()
  print(result)
  ~~~

- **Example Explanation (Output):**
  ~~~
  # Overview
  - This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.
  
  # Class: Calculator
  - **Constructor** (`__init__`):
    - Accepts an optional initial value (default is 0).
    - Stores the initial value in a `value` property.
  - **Method: add**:
    - Takes an `amount` and increments the internal `value` by that amount.
  - **Method: subtract**:
    - Takes an `amount` and decrements the internal `value` by that amount.
  - **Method: get_value**:
    - Returns the current internal `value`.
  
  # Behavior Flow
  - An instance of `Calculator` is created with an initial value of 10.
  - The `add` method is called with 5, raising the value to 15.
  - The `subtract` method is called with 3, lowering the value to 12.
  - The `get_value` method is called to retrieve the current value (12).
  - The result (12) is printed to the console.

  # Key Points
  - Demonstrates basic OOP with a class that manages state.
  - Showcases constructor, addition, subtraction, and retrieval of a stored value.
  ~~~  

---

## Final Prompt

Below is a full, combined version of the prompt you can provide to an AI to guide it in generating the English-only, bullet-pointed explanation. Feel free to modify or adapt this as needed:

~~~
You are an AI specialized in analyzing source code and producing structured, plain-English representations of its functionality.

Your Task:
1. Read and interpret the code I provide.
2. Produce a technical, English-only summary of what the code does.
3. Use headings (e.g. # Overview, # Functions, # Classes, # Behavior Flow) and bullet points.
4. Do not include any code in your final output—only explain how the code behaves.
5. Keep it concise but thorough, focusing on purpose, process, and relationships between functions or modules.

Below are some examples of how code might be transformed into an English-only explanation:

Example Input:
-------------------
~~~js
// example1.js
const greetUser = (userName) => {
  const greeting = `Hello, ${userName}!`;
  console.log(greeting);
};

greetUser("Alice");
~~~
Example Output:
-------------------
# Overview
- This file defines a single function which greets a user by name and prints a message to the console.

# Function: greetUser
- Accepts one parameter (`userName`).
- Constructs a greeting string that combines static text with the `userName`.
- Outputs the greeting using `console.log`.

# Behavior Flow
- The function is called with the argument "Alice".
- Upon invocation, "Hello, Alice!" is logged to the console.

# Key Points
- Shows how to create a greeting with a dynamic name.
- Demonstrates basic string interpolation and console logging.


Example Input:
-------------------
~~~py
# example2.py
class Calculator:
    def __init__(self, initial=0):
        self.value = initial
    
    def add(self, amount):
        self.value += amount
    
    def subtract(self, amount):
        self.value -= amount
    
    def get_value(self):
        return self.value

calc = Calculator(10)
calc.add(5)
calc.subtract(3)
result = calc.get_value()
print(result)
~~~
Example Output:
-------------------
# Overview
- This file defines a `Calculator` class that keeps track of an internal numerical value and provides methods to modify it.

# Class: Calculator
- **Constructor** (`__init__`):
  - Accepts an optional initial value (default is 0).
  - Stores the initial value in a `value` property.
- **Method: add**:
  - Takes an `amount` and increments the internal `value` by that amount.
- **Method: subtract**:
  - Takes an `amount` and decrements the internal `value` by that amount.
- **Method: get_value**:
  - Returns the current internal `value`.

# Behavior Flow
- An instance of `Calculator` is created with an initial value of 10.
- The `add` method is called with 5, raising the value to 15.
- The `subtract` method is called with 3, lowering the value to 12.
- The `get_value` method is called to retrieve the current value (12).
- The result (12) is printed to the console.

# Key Points
- Demonstrates basic OOP with a class that manages state.
- Showcases constructor, addition, subtraction, and retrieval of a stored value.

---

**Now**: Please apply the same conversion process to the following code. Convert it into a plain-English document that describes what the code does in detail, using bullet points and headings. Create the document next to the original with the filename as `${fileName}.md`. Do not include any source code in the output—only the explanation:

[INSERT YOUR CODE HERE]
```

Programming in English with Cursor

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Bite-Sized Screencasts for Web Developers that Hate Long Boring Videos