Learn Leaflet, Nginx and Storybook

Beginner’s Guide to Storybook 7 with React

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

A Beginner’s Guide to Storybook 7 with React

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

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. 

nginx

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers by creating and mounting a volume to an Nginx proxy, and then verify the output with curl. You'll also see how changes to files within volumes of one container propagate to other containers with the same volume mounted, and learn various commands to inspect Docker volumes.

Manage Data within Docker Volumes

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

Leaflet makes creating maps in the browser *dead simple*. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

Get Started with LeafletJS Mapping

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

Adding Shapes to Maps with Leaflet and GeoJSON

Learn how to setup an Nginx proxy server with Docker that sits in front of a Node.js app. You can use a proxy to control the flow of frontend requests hitting your app, as well as to achieve better performance and scalability. We'll create a sample Node.js app, configure a default Nginx configuration file for proxying web requests, build both Node.js and Nginx Docker images, and learn how to link everything up and get it running with Docker specifics.

Setup an Nginx Proxy for a Node.js App with Docker

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Interactive Leaflet Maps with GeoJSON data

Node.js apps built with Docker cannot scale horizontally by themselves. In this lesson we will spawn out multiple Node.js processes/containers, and move the incoming request handler to an Nginx proxy to load balance and properly scale our Node.js app.

Scale Docker Horizontally with Nginx Load Balancing

In this lesson, you will learn how to add a map to your React application using React Leaflet. We will walk through importing and configuring the Map and TileLayer components from React Leaflet to set up the new map.

Create a New Map using React Leaflet

In this lesson, you will learn how to add a Marker and Popup component to a Map when using React Leaflet. We'll walk you through importing the components and adding each one to the Map. Additionally, we'll resolve an issue with loading marker images that's inherent to creating a new React Leaflet map in Create React App, which we'll fix by manually importing the image from Leaflet and configuring those images to the marker.

Add a React Leaflet Marker with a Popup to a Map

In this lesson, you will learn how to add the Polygon and Circle shape components to a Map when using React Leaflet. We'll walk you through importing both components, adding each component to the Map, and setting a unique color for each shape.

Add Shapes to a Map in React Leaflet

In this lesson, you'll learn how to style shapes on your map to change the look and feel using React Leaflet's API. We'll use React component props like color and weight on our shapes to change the colors and styles.

Style React Leaflet Shapes using Component Props

In this lesson, you'll learn how to use CSS to style and animate shapes on your React Leaflet map. We'll use the className prop to add a custom class and add CSS to customize our shapes.

Style and Animate a React Leaflet Shape with Custom CSS

In this lesson, you will learn how to use React hooks to interface with the Leaflet Map API in React Leaflet. We'll connect a ref to our Map component using the useRef hook and then use the useEffect hook to access that ref, find our Map instance, and use it to fly to a new location.

[More details on the Leaflet Map API](https://leafletjs.com/reference-1.6.0.html#map)

Interface with the React Leaflet Map API with the useRef and useEffect React Hooks

In this lesson, you learn how to use the React Leaflet ZoomControl component to add a custom zoom control to your map. We'll walk through removing the default control to avoid duplicates, using the ZoomControl position prop to change its location, and setting custom icons with the zoomInText and zoomOutText props.

Change the React Leaflet Map ZoomControl Location and Icons

In this lesson, you will learn how to add GeoJSON data to a map in React Leaflet. Using the National Parks in the United States, we'll import a GeoJSON document, create a new Leaflet GeoJSON instance, and add a marker with a popup for each park.

[Parks Locations Example](https://www.nps.gov/maps/tools/npmap.js/examples/geojson-layer/)
[Parks GeoJSON](https://www.nps.gov/lib/npmap.js/4.0.0/examples/data/national-parks.geojson)

Add GeoJSON Location Data to a Map Using Markers and Popups in React Leaflet

In this lesson, we'll add a new tile service as our basemap in React Leaflet. Using the NASA GIBS Blue Marble, we'll update the TileLayer component's url and attribution props to the new service. We'll also add the maxNativeZoom prop which allows us to configure the maximum zoom allowable for the service.

[More info about NASA GIBS imagery](https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs)
[GIBS Imagery API](https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products)

### NASA GIBS Blue Marble Tile Server
Endpoint: https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg
Attribution: NASA Blue Marble, image service by OpenGeo

Change the Map Tile Service of a React Leaflet TileLayer Basemap to NASA GIBS Blue Marble

In this lesson, we'll add a LayersControl toggle to allow us to change between multiple TileLayer basemaps in React Leaflet. Using the NASA GIBS Blue Marble, we'll add an additional TileLayer component, wrap our two TileLayers in BaseLayer components, and wrap all of our layers in a LayersControl to toggle our basemaps.

[More info about NASA GIBS imagery](https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs)
[GIBS Imagery API](https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products)

### NASA GIBS Blue Marble Tile Server
Endpoint: https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg
Attribution: &copy; NASA Blue Marble, image service by OpenGeo

Add a LayersControl Toggle to Switch Between TileLayer Basemaps in React Leaflet

In this lesson, we'll use the LayerGroup and FeatureGroup components to organize feature shapes on our map. Using these grouping features, we'll learn how the LayerGroup is used for organizational purposes like adding or removing multiple layers at once and how we can update the color of all of our grouped shapes with the color prop on our FeatureGroup.

Manage Map Data and Feature Shapes Together in a React Leaflet LayerGroup or FeatureGroup

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

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

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

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

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

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

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

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

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

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

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

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results