Learn Express, Leaflet and Nativescript

In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

snipcart

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

graphcms

Displaying a list of physical locations is helpful, but showing them on a map, giving your potential customers the ability to see how close each store really is to their location is even better.

GraphCMS supports adding coordinates as a field to our data models, where we can dynamically pull those coordinates in and add them to a map.

We'll walk through how we can loop through our store locations and add each one to a new React Leaflet map. We'll also learn about some pitfalls of using React Leaflet in an app framework like Next.js and how we can solve it with dynamic imports and manual image imports.

* [Dynamic Import - nextjs.org](https://nextjs.org/docs/advanced-features/dynamic-import)
* [Leaflet Map Marker Rendering - github.com](https://github.com/Leaflet/Leaflet/issues/4968)

I also have a whole course on how to [Build Maps using React Leaflet](https://egghead.io/courses/build-maps-with-react-leaflet) if you want a further dive on the topic. 

Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Learn about security headers by adding them to an Express app in a step-by-step guide.

We're going to cover:
- default request headers
- what are security headers
- why security headers are important
- how to add security headers using Helmet
- how to configure the newly added security headers

Add Security Headers to an Express app

We'll create our client-server using the `express` and `cors` packages

Express will be used to create our HTTP application. We'll need it to post to our endpoints and listen to our port.

We need the `cors` package to make cross-origin requests since the front-end will be a different origin than the server.

Create an OAuth Client-Server for code/token exchange

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Role-Based Access Control (RBAC) is the idea of grouping permissions together by a role. Users are assigned a role through the Auth0 dashboard the corresponding permissions are placed on the user's access token (JWT) after authenticating. That access token can be extracted by an Auth0 SDK (this video uses JavaScipt/ ReactJS) and sent to a custom server. 

Server Side logic (this video is based on NodeJS and ExpressJS), can then check for specific permissions and then allow or reject certain resources. 

-------------

Starting point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-beginning

Ending point- https://github.com/twclark0/roles-scopes-node-auth0/tree/roles-final

Role Based Auth in NodeJS with ExpressJS and Auth0

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Nx is not only capable of scaffolding frontend projects, but it also supports a lot of backend setups. In this specific lesson, we're going to explore the setup we previously generated, specifically inspecting how passing `--frontentProject` to the Express.js schematic automatically sets up a [Webpack dev proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) to make it easy to call the backend API.

Connect to an Express.js API from a React app in an Nx Workspace

When we talk about monorepos, we don't talk about the frontend specifically. Quite contrary: an Nx workspace can also host our backend apps. This opens up completely new possibilities in terms of exchanging code between the frontend and corresponding backend API. But before diving deeper into this topic, let's first learn about how we can use the `@nrwl/express` package to generate a [Express](https://expressjs.com/) based API application.

Create an Express Backend API in an Nx Workspace

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

One way to secure API routes is by using JSON Web Tokens (JWTs) which are passed with each request and checked before a lesson is returned. To do this, you need an OAuth server to provide the signing and authentication of these tokens. Auth0 provides this for free for up to 7,000 users. 

In this lesson, we'll configure Auth0 and gather the details we need to be able to secure our API routes.

Configure an Auth0 API Authentication to Use with Your Server

So far, we haven't noticed any issues with map state, but that doesn't mean there aren't any issues!

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/05%20-%20Managing%20Leaflet%20State%20in%20a%20React%20App%20with%20Hooks#4-adding-markers-in-a-single-source-to-avoid-mismanaged-state)**

Manage Stale Map Data in React Leaflet 

Now that we have finished up with our map app, let's do a little cleaning up! Here we are going to go through our Location Event Handler and clean it up for when the page unmounts.  

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#1-clean-up-location-event-handler-resources-when-page-unmounts)**

Clean up Location Event handler Resources when Page Unmounts in React useEffect

Now that we can pinpoint our location, we noticed that it's not exactly the most accurate indication of where we're at. To help, Leaflet provides an accuracy indicator in meters that we can use to show on the map the margin of error for that location.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#4-add-a-circle-to-the-map-designating-the-accuracy-of-the-browsers-location)**

Add a React Leaflet Circle to the Map Designing the Accuracy of the Browser's Location

Most of us are able to identify where we're located on the map, but it can be hard to visualize that in context to other locations. To help, we can add a marker to the map to show our location.

To get started, we'll add a marker to a specific location to see how it relates to the restaurants that are on our map.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#1-add-a-marker-to-a-location-when-clicking-a-button)**

Add a React Leaflet Marker to a Location when Clicking a Button

Rather than setting a location manually, web browsers provide a way that we can request access to someone's location. This lets us personalize features and particularly in our use case, find where the person is on the map to see what's close to them.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#2-create-a-button-that-finds-your-location-and-navigates-the-map-to-that-location)**

Add a Button that Finds your Location and Navigates the Map to the Location with Leaflet

While we were able to find our location, Leaflet's geolocation features don't set a marker by default. What they do provide is event handlers that allow us to know when the location is found.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#3-use-the-browsers-location-to-add-a-marker-to-the-map)**

Use the Browser's Location to Add a React Leaflet Marker to the Map

As we just noticed, we don't get the shadows to our markers by default. While we can add a custom one, we can use the default shadows which will work just as well with our custom markers.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/09%20-%20Customize%20Restaurant%20Location%20Markers%20with%20Custom%20Images#3-add-the-default-shadows-back-to-our-markers)**

Import and Add the Default React Leaflet Shadows back to our Markers

Not only can we use the Leaflet Icon instance to add a custom image, we can create completely custom HTML! This opens the door to a lot of possibilities that you can't do with only an image like using CSS to add effects.

For this extra credit, use a different Leaflet icon type called DivIcon to transform our markers into custom HTML, which you can then style with CSS.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/09%20-%20Customize%20Restaurant%20Location%20Markers%20with%20Custom%20Images#1-replace-the-marker-with-custom-html-and-style-with-css)**

Replace the Marker with Custom HTML and Style with CSS

In lesson 10, we are going to be focusing on how to add a marker to the map on button click to designate a location, create a button that finds and navigates to your location, add a marker to the map showing your location and add a radius to the map showing the accuracy of your location

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/10%20-%20Use%20Leaflet's%20Geolocation%20API%20to%20Find%20Locations%20Near%20you#-lesson-10-use-leaflets-geolocation-api-to-find-locations-near-you)**

Section 10 - Use Leaflet's Geolocation API to Find Locations Near You

Before we create a completely custom icon, we need to set up our GeoJSON configuration to allow us to manually create markers in the first place. We'll start by recreating our current markers.

**[Click here for exercise instructions](https://github.com/colbyfayock/launchtime-workshop/tree/master/lessons/09%20-%20Customize%20Restaurant%20Location%20Markers%20with%20Custom%20Images#1-recreate-restaurant-markers-with-geojson-configuration-option)**

Recreate React Leaflet Markers with the GeoJSON pointToLayer Configuration Set 

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.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.