Beyond Maps: Crafting Immersive Geospatial Experiences with React and deck.gl

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Unlock the potential of geospatial data by combining React and deck.gl to create immersive web applications. This talk will demonstrate how to transform complex datasets into interactive, high-performance visualizations that captivate users. Whether you’re working on urban planning, environmental monitoring, or storytelling, learn how to elevate your projects with cutting-edge mapping technologies.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

DEC GL is an open-source geospatial visualization framework developed by Uber's data visualization team. It allows for GPU-accelerated WebGL layers to render a large amount of data on maps in a declarative manner, making it compatible with various frameworks like React.

The speaker is Marko, a founding engineer at Fused, with over 10 years of experience in building geospatial solutions for the web. He previously worked at Foursquare and was a tech speaker at Mozilla.

DEC GL integrates with React by using a React component that allows users to work with visual overlays and DEC GL layers. It also uses a React Map GL wrapper to control the viewport and manage map state, with data binding facilitated by LumaGL.

DEC GL is commonly used for creating geospatial visualizations such as scatterplot layers, hexagon layers for aggregation, trip layers for animating paths, and more. These are useful in fields like urban mobility, fleet management, and general-purpose geospatial data analytics.

DEC GL offers benefits like handling big data with ease, GPU acceleration for rendering millions of points, and a built-in extensible layer catalog to visualize various types of geospatial data in different ways.

Using React with DEC GL allows for declarative, state-driven mapping, making it easier to control view state, layer visibility, and data filters via props and hooks, reducing boilerplate and enhancing performance by offloading heavy lifting to the GPU.

Yes, DEC GL allows for custom layer creation by extending WebGL's layer class, offering advanced capabilities for developers to build unique geospatial visualizations.

Mapbox is used as a base map in DEC GL applications to provide background maps such as Street View or Satellite View. It is popular for its predefined styles and ease of integration with DEC GL for data visualization.

Advanced applications using DEC GL include the Foursquare Studio for geospatial data visualization, the Mobility Policy Auto-Tuner for CO2 emission analysis, and a disaster risk visualization app using overture buildings data.

Performance in DEC GL-based applications can be improved by using use memo to wrap layer configs, implementing layer should update to avoid unnecessary redraws, and using web workers along with DEC GL's built-in aggregation features.

Marko Letic
Marko Letic
26 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome to React Summit! Learn about DEC GL, a geospatial visualization framework by Uber optimized for React. Visualize geospatial data with ease using DEC GL, React, and WebGL for rendering millions of points. Focus on integrating DEC GL with React, utilizing data and state variables for visualization layers. Combine data for visualization, ensure proper layer hierarchy to avoid overlaps. Using dev.gl or react-map-gl with Mapbox for map creation. Adding properties in GeoJSON, focusing on hovering interaction, updating hover feature with onHover handler. Efficient State Management for Custom Layers in WebGL, Performance Optimization with Deck.gl Features.

1. Introduction to Geospatial Mapping with React

Short description:

Welcome to React Summit! Learn about DEC GL, a geospatial visualization framework by Uber, optimized for React. Marko, a funding engineer at Fused, will guide you through immersive geospatial experiences. Reach out to Marko on Twitter, LinkedIn, or GitHub for more insights. Discover DEC GL's GPU-accelerated WebGL layers for rendering various data types on maps.

Hey everyone, welcome to another edition of React Summit. It's my pleasure to talk here today with you guys. We're going to do a little bit of mapping with React. So my talk is called Beyond Maps, Crafting Immersive Geospatial Experiences with React and DEC GL. And what this is all about, we're going to see in the couple of next minutes.

So, first couple of things about me. My name is Marko. I'm currently working as a funding engineer at Fused. My background is in building geospatial solutions for the web for the past 10 plus years. And this is exactly what I'm doing at Fused. So you know, domains are different, we're different. Smart grids, urban mobility, and in the last couple of years just building general-purpose geospatial data analytics tools for the web. I previously worked at Foursquare. I was a tech speaker at Mozilla. You can reach out to me on Twitter or XNOW, LinkedIn, GitHub. There's a QR code if you want to get in touch with me on LinkedIn also. It would be my pleasure to share some common ground and share experiences and any feedback on the talk in general. So yeah, let's get started.

What is DEC GL? So it's very ambiguous to say we're going to talk about maps and React without giving a little bit of introduction into the framework that we are actually going to use today. DEC GL is an open-source geospatial visualization framework. It's developed by the data visualization team at Uber, and they have a whole suite of tools for geospatial visualization. Some of them are a little bit more familiar than others, but I would say DEC GL is the top one. So it allows you GPU-accelerated WebGL layers. This is a mouthful, right? But basically, it harnesses the power of the GPU to render a lot of data on your maps. So that can be points, polygons, 3D geometries, tiles, different kind of vectors in general. And it's very declarative, so you can easily use it with any kind of framework. Today we're going to talk about how we can use it with React. I would say this is the most common use case today, except for maybe some simple examples where people just use plain JavaScript to visualize a couple of things. So it has its own React component, and we're going to see how to work with that. So the benefit of DEC GL is it has a built-in extensible layer catalog.

2. Advanced Integration of DEC GL with React

Short description:

Visualize geospatial data with ease using DEC GL, React, and WebGL for rendering millions of points. Integrate React app, React Map GL, and DEC GL for seamless visualization. Ensure proper data representation and avoid overlapping elements by combining base maps with DEC GL layers like arc and scatterplot layers.

So what that actually means is that you can visualize almost any kind of geospatial data in different ways. We're going to see a couple of demos of different layers, like scatterplot layers for point clouds, hexagon layers for aggregation, and trip layers for animating paths. The benefit is handling big data effortlessly through a combination of JavaScript or TypeScript and WebGL, leveraging GPU power to render millions of points in the browser. In this process, you start with your React app, potentially integrating a base map using React Map GL, and then incorporating DEC GL for visual overlays and DEC GL layers.

Decoupling data binding is managed by LumaGL, a WebGL functionalities wrapper, ensuring a seamless integration of your data and state variables into the visualization layers. DEC GL's layer manager synchronizes with React Map GL, controlling the viewport of the map and its state, while LumaGL handles the WebGL rendering aspect. By integrating base maps with DEC GL layers, such as arc and scatterplot layers, you can create visually appealing representations without overlapping elements like street names or buildings. This integration allows for a cohesive visualization of various data types, ensuring proper data representation and an aesthetically pleasing display.

3. In-depth Integration of DEC GL with React

Short description:

Focus on integrating DEC GL with React, utilizing data and state variables for visualization layers. DEC GL syncs viewport with React Map GL for map control. LumaGL manages WebGL rendering under DEC GL for seamless integration and visualization.

It can be something else. And then the DEC GL part, where you have your visual overlays, your DEC GL layers. And data binding is done in LumaGL, which is a wrapper for some WebGL functionalities. We're not going to go into that part today.

So we're going to focus on your React app, React Map GL, and DEC GL. This is a little bit more in-depth of how that should work. Your data, when I say data, I don't mean actually just the data that you want to visualize, but also some state variables you want to pass into your layers. DEC GL handles the rest with its layer manager and syncs the viewport with React Map GL, where it controls the viewport of the map, the base map, and the map state.

LumaGL is underneath DEC GL, and it handles the WebGL rendering part. This is how it kind of looks, a base map integration with DEC GL. You have maybe two layers. One is an arc layer, the other is a scatterplot layer. This is kind of a quick example of that. Basically a basic scatterplot layer, an arc layer, and Mapbox.

4. Visualizing Data with React and dev.gl

Short description:

Combine data for visualization, ensure proper layer hierarchy to avoid overlaps. Configuring React map with dev.gl for efficient visualization.

It might be interesting to visualize that. And you want to combine all of that data into one single visualization. So what you want to do there is you want to see data properly represented, right? You want to see your scatterplot layer all the way down, so that it doesn't go over the street names. You want your arc layer not to go through the buildings, and kind of breaks the UI, and breaks the 3D view mode that you have. So this is kind of like what you want to use, and how it actually should look like. So this is kind of a quick example of that. Basically a basic scatterplot layer, an arc layer, and Mapbox.

So as you can see, the arc layers are not going through the buildings or kind of messing up the view, and the scatterplot is below the street labels. So you can actually see everything you want in this simple visualization.

Linus says, talk is cheap, show me the code. This is a basic configuration of your react map with dev.gl. We don't have a lot of time, we're not going to go into the depths of creating custom layers or something like that, but we'll touch base on that. I think this talk is mainly meant to kind of give you a head start, and tell you what is possible, and show you a couple of guidelines that can help you get started in building awesome map-based, web-based map solutions.

5. Creating Maps with dev.gl and Mapbox

Short description:

Using dev.gl or react-map-gl with Mapbox for map creation. Setting a view state with coordinates and adding GeoJSON layers.

So here we're just going to use two packages, we're going to use dev.gl, or we're going to use react-map-gl. As we mentioned in the previous slides, these two work together, especially if you want to use something like React with it. Here in the demo we're using Mapbox, you don't necessarily need to use Mapbox for base maps. You can use Google Maps, you can use something else, that depends on your use case, company policy or whatever.

Mapbox is kind of most famous in this setting, so we're going to be using Mapbox here. So what do we want to do? We want to create a simple map, and we want to draw some buildings on it. I call them buildings, you can call them rectangles, it doesn't actually matter. But we want to show those buildings on our map, so we want to first give our map a view state, which is what you're going to be looking at when you initialize your app. So that is some basic info like longitude, latitude, zoom, pitch, or bearing.

Pitch or bearing might be interesting if you want to visualize the map in 3D. We're not doing that right now, but it's important to know that you can also set that. So we want to set a new layer, and we're going to use something called a GeoJSON layer. You all use JSON formats. If you haven't encountered GeoJSON, it's basically a JSON file with some special rules on how you form a geometry object. So in GeoJSON, you can show, you can define points, lines, polygons. So we're going to show you how to draw three polygons that should represent some buildings in our case.

6. Managing Layer State in Map Creation

Short description:

Passing properties for buildings, initializing maps with dev.jl, managing layer state with Jyoti, setting visibility and opacity.

And we're going to pass some properties for those buildings. We're going to get into what those properties are, and we're going to initialize our map. So we're going to use a dev.jl element, we're going to pass it the view state, and we're going to pass our layers. We only have one layer, so that's the one there. And for the map, we just have to define the style of the map, so it can be a Street View Satellite View, Dark, Light mode. Mapbox has a lot of predefined styles you can use. And yeah, I'm going to pass your token. You just need to create your account on Mapbox for this specific instance, and you're going to be able to use that. And you're going to get a map that has three buildings, right?

Not a lot, right? So we want to demonstrate how you can actually easily manage the layer state. So we're going to use Jyoti to manage the state. You can use something else, you can use Zustand, you can use Redux. I think Jyoti is very well aligned with dev.jl, because atomic changes are very suitable for changing single properties in the layer. And this is how it's usually done. So we're going to create one layer state atom. We're going to add visibility and opacity to it. And then we're going to use those properties to basically create the atom and use those values.

And while using those values through the atom allows you also the ability to set the value atom through a different UI. That component can be defined somewhere else, of course, while you're using the created value. You can just set the visibility or opacity in a whole other part of the application. So here, we're using that to set the visibility and the opacity, create a small checkbox to toggle visibility, small slider to create the opacity. As you can see, there are no lag, nothing is breaking, it's very smooth, the transition is smooth and works like a charm, right?

7. Enhancing Interactivity with Hovering in GeoJSON

Short description:

Adding properties in GeoJSON, focusing on hovering interaction, updating hover feature with onHover handler.

We added some properties in our GeoJSON, which is kind of like the name of the building. I call it building one, building two, building three. You can add a lot more properties. It just depends on your use case. You might want to show a tooltip when a user hovers over it. You might actually want to do something when a user selects the object. Right now, in the interactivity example, we're going to focus on the hovering part.

So similar, like in the previous example, we're going to create one atom and we're going to add a hovered feature there. The hovered feature is actually the object that we're going to use to show as a tooltip. In our layer properties, we're going to add an onHover handler to update the hover feature. This is something that comes out of DevGL. You pass that onHover to your GeoJSON layer and as a callback, you get an info about the object that you're picking. You can get its latitude, longitude, you can get the properties of the GeoJSON, or some other things, depending on what you actually need.

When we set that hovered value, we can use that hover value in our component we call tooltip and just show the information. This is all very basic, as I mentioned, but let's go into some more advanced examples. Here you see an app of lightnings in Northern Europe, built by Gizpo from Finland. It's a very cool app, discovered it recently, loved how they did this. This is built in DevGL and as you can see, it has some common ground to what we built in the previous example. We have our map and we have some controls.

8. Advanced Map Controls and Layer Variety

Short description:

Managing Map Controls, Animation Filtering, Layer Variety in DevGL.

We have our map and we have some controls. Those controls are actually managing the state that is passed into the DevGL layer that is rendered on our map. We also have something additional here, which is the animation part. The animation is working as a filter. You can select the time range, and when you play, the time range is applied as a filter on your data in real time and it works perfectly. This is not a video of this. This is an app that actually runs and works. It's important to note that after the talk, I will share the slides on my social media accounts and all of these examples are going to be linked in the upper left corner so you can actually check them out.

You can see you're setting animation speed, you're setting up point size multiplier in case you want to highlight the visualization that is happening here. In the top left, you can see that the info that is coming from the slider is also updated there. So let's talk a little bit more about the layers. We saw how we were using a GeoJSON layer, but there are many other layers in DevGL, and one of them is an H3 layer, which is a hierarchical geospatial indexing system. So it divides the Earth's surface into hexagonal cells at multiple resolutions, so it provides you a grid for spatial analysis. It's very efficient for data storage, fast proximity search, aggregating results, and optimizing.

Here there's one app which tells you the number of orders, what order is not important, but it kind of gives you a really nice visual feedback on what is going on and what parts of the city in maybe certain times of the day are getting the most orders. That is very important for different kinds of reasons, depending on your use case and the app that you're building. Heat maps, all of you I think know about heat maps. You've seen them in many, many different forms. This is also one of the layers that comes out of the box with DevGL. Isochrones, also very popular, especially when you want to figure out some kind of an origin destination visualization.

9. Visualizing Movement and Custom Layers

Short description:

Isochrones for Origin-Destination Visualization, Trip Layer Animation, Custom Flow Maps in DevGL.

Isochrones, also very popular, especially when you want to figure out some kind of an origin destination visualization. So they represent areas accessible from a point within a given time or distance. They're very, very used in areas like figuring out reachable zones for different kind of transport modes. And kind of provides you that time-based accessibility and allows you to customize parameters. So all of that you can use to visualize in DevGL. This is one of the more exciting ones. People really love this visualization animation. As I mentioned, all of the examples are linked in my presentation so you can see them as an app in your browser.

This is a trip layer that allows you to smoothly animate object movements from start to end point over a timeline. Of course it's important to have the data in a proper format. But it's very, very common to use this in fleet management visualization, traffic analysis, public transport. So you can kind of expand the trail, you can slow down, speed down animation. You can apply filtering like in the example with the lightnings, where you want to focus on a certain period of time, only certain types of vehicles perhaps. So this visualization is showing yellow cab versus green cab trips in Manhattan. Very popular example for DevGL.

As I mentioned, there are ways to build your own custom layers, and this flow map is one of those custom layers built by my friend Ilya, completely open sourced. So it kind of, I think, gives you a different way to visualize your movement, mobility, transportation migrations. So it's completely rendered in WebGL, and it has that adaptive aggregation and filtering, and that allows you to handle a large number of flows. So you can see that from two points, you can immediately see where is the most traffic coming from in one direction or the other. Of course, you can apply many different filterings on top of that. So a couple of real use cases is the Foursquare Studio. I was fortunate enough to build this tool since it started in Unfolded and then acquired it Foursquare. So this is a general purpose geospatial data visualization tool. You can inject any kind of dataset and visualize different types of layers. So it's also using DevGL, and you can see here a suitability analysis with H3 layers.

10. State-Driven Mapping and Data Visualization

Short description:

Real Estate Data Analysis, H3 Visualization, State-Driven Mapping in React.

For example, I think this uses some data regarding real estate. So you can analyze the price in certain areas, in certain timeframes, based on certain criteria, and immediately you get an output of where might be a smart thing to invest, how the prices are going, do some market evaluation. Another good example of using H3 for this kind of visualization is the Mobility Policy Auto-Tuner. This is an app I found, I haven't used it, but it quite well illustrates the CO2 savings in certain parts of the city. So it checks the traffic, it has its own data of course, but you can kind of clearly see which parts of the city have the most CO2 emissions in certain parts of the day. So this is also a good tool for maybe city municipalities or some governmental institutions to figure out what they want to do.

And this also works all in the same way. You have your React app, you have your own state, you manage that state in the way that we showed in the previous example. And you have your UI that's very reactive, and your map that reacts on your updates in your controls. And if they're sharing the state, it makes it quite easy and quite efficient and performant to visualize these changes. So you can see here our example, another example is the app that I'm building here at Fused. It uses overture buildings. So here it's a little bit different than the apps that I've shown before, because the code that's on the left is processing the data and giving you the output of that result on the right side. So what this visualization is showing is actually how you can combine two datasets and visualize one 3D map to maybe demonstrate, in this specific example, what disaster risk are in these specific buildings. Specific buildings are fetched from overture data, and the risk is captured from the NSI data. And we combine those two data to figure out maybe what are the buildings most endangered by earthquakes, and visualize that quite performantly and efficiently on our map.

We're talking about key takeaways here. Next we want to talk about how to build a declarative, state-driven mapping. So treat your map as a React component, control your view state, layer visibility, data filters, via props and hooks, rather than imperative WebGL calls, which would be a nightmare to do. Why it matters? It reduces the boilerplate, makes it trivial to sync UI controls with map updates. We show this on a very simple example. But I showed you how complex apps are building that. And the principle is quite the same. Of course, with the overhead of different layers, large datasets, complex UIs, come other problems, but those are the problems that we're already solving in different parts of the web. Nothing new there. And the benefit is to harness the GPU acceleration to offload heavy lifting, geometry, aggregation and animations to the GPU via WebGL. You can feed binary data formats into tile-based layers. And this is something that goes beyond what we demonstrated before. But if you're interested, just hit me up, and I'm going to talk about it a little bit more directly. One of the main things is you can maintain your 60 frames per second, even with millions of points.

11. Efficient State Management for WebGL Layers

Short description:

Efficient State Management for Custom Layers in WebGL, Performance Optimization with Deck.gl Features.

The architecture depends on how you're actually structuring your app. But if you manage your state efficiently, and you encapsulate data loading and layer config logic and reusable React hooks, such as use map data or use layer props, your app will work for you. And you'll be able to reuse that throughout different parts of the app, whether it's a map or whether it's some kind of a layer control component, it doesn't matter.

Building your custom layers by extending WebGL's layer class is something that is way more advanced and way more complex. And maybe we're going to go into that talk in some other session. Your result is a cleaner code, easier testing, rapid feature reuse across the apps. So if we're talking about performance patterns for scale, it's important to wrap layer configs in use memo implement layer should update to avoid needless redraws, depending on when you want to redraw your layer, that can be an expensive thing to do.

You can use web workers and rely on deck jails built in aggregation to reduce draw calls. So all the references and demos are also listed here. You can take a look at them, click on every link, go through the examples, web apps. If I perhaps missed to add something, just reach out, it will be added. And yeah, that's kind of it. Thank you for your time. Hope you enjoyed it and reach out to me to connect. If you have any questions, feel free to do so. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript and the Database: Who Owns the Types?
TypeScript Congress 2022TypeScript Congress 2022
27 min
TypeScript and the Database: Who Owns the Types?
Top Content
The Talk discusses the use of TypeScript and SQL together in software development. It explores different approaches, such as using an ORM like TypeORM or a schema generator like pg2ts. Query builders like connects JS and tools like PGTyped are also discussed. The benefits and trade-offs of using TypeScript and SQL are highlighted, emphasizing the importance of finding a middle ground approach.
I Would Never Use an ORM
JSNation 2023JSNation 2023
29 min
I Would Never Use an ORM
Top Content
Welcome to a talk on Object-Relational Mapping (ORM) and its potential pitfalls. The speaker discusses issues with modals and the MVC pattern, as well as the benefits of structuring code around system features instead. They introduce PlatformaticDB as a solution for easy backend development, showcasing its deployment and testing capabilities. The talk also covers integrating with Next.js, writing custom SQL queries, and the speaker's plans for future support and database compatibility.
Database Access on the Edge with Cloudflare Workers & Prisma
Node Congress 2022Node Congress 2022
31 min
Database Access on the Edge with Cloudflare Workers & Prisma
This Talk discusses database access on the edge with CloudFlare workers and the challenges of serverless platforms. It explores solutions for database access, including CloudFlare-specific solutions and using Prisma data proxy. The Prisma toolkit and demo are showcased, demonstrating how to convert an application to use a database. The process of setting up Prisma Data Platform and deploying the application to CloudFlare workers is explained. The Talk concludes with insights on database usage and the differences between serverless, CDN, and the Edge.
Bring AI-Based Search to Your Web App
JSNation 2023JSNation 2023
31 min
Bring AI-Based Search to Your Web App
The Talk discusses the use of machine learning in search engines, specifically focusing on semantic search and vector embeddings. It explores the integration of JavaScript and machine learning models, using Weaviate as an open-source vector database. The Talk demonstrates how to connect to Weaviate, query data, and perform machine learning queries. It also highlights the benefits of Weaviate, such as its superior developer experience and performance. Additionally, the Talk addresses customization options, data privacy concerns, and the varying effectiveness of different machine learning models.
Remix Persistence With DynamoDB
Remix Conf Europe 2022Remix Conf Europe 2022
41 min
Remix Persistence With DynamoDB
DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.
Local-First Software With ElectricSQL
React Advanced 2023React Advanced 2023
29 min
Local-First Software With ElectricSQL
Watch video: Local-First Software With ElectricSQL
Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.

Workshops on related topic

Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
Scaling up Your Database With ReadySet
Node Congress 2023Node Congress 2023
33 min
Scaling up Your Database With ReadySet
WorkshopFree
Aspen Smith
Nick Marino
2 authors
The database can be one of the hardest parts of a web app to scale. Many projects end up using ad-hoc caching systems that are complex, error-prone, and expensive to build. What if you could drop in a ready-built caching system to enable better throughput and latency with no code changes to your application?
Join developers Aspen Smith and Nick Marino to see how you can change one line of config in your app and use ReadySet to scale up your query performance by orders of magnitude today.
Build a Full Stack React Native App with Oracle 23ai
React Summit 2024React Summit 2024
37 min
Build a Full Stack React Native App with Oracle 23ai
WorkshopFree
Doug Drechsel
Doug Drechsel
In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack. 
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and run a Walking History React Native mobile app against the stack
Walking History is a React Native application that allows you to walk around New York City (or simulate that in a device emulator) and it tells you about the closest attraction or point of interest.


How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Building a RAG System in Node.js: Vector Databases, Embeddings & Chunking
Node Congress 2025Node Congress 2025
98 min
Building a RAG System in Node.js: Vector Databases, Embeddings & Chunking
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
Large Language Models (LLMs) are powerful, but they often lack real-time knowledge. Retrieval-Augmented Generation (RAG) bridges this gap by fetching relevant information from external sources before generating responses. In this workshop, we’ll explore how to build an efficient RAG pipeline in Node.js using RSS feeds as a data source. We’ll compare different vector databases (FAISS, pgvector, Elasticsearch), embedding methods, and testing strategies. We’ll also cover the crucial role of chunking—splitting and structuring data effectively for better retrieval performance.Prerequisites- Good understanding of JavaScript or TypeScript- Experience with Node.js and API development- Basic knowledge of databases and LLMs is helpful but not required
Agenda📢 Introduction to RAG💻 Demo - Example Application (RAG with RSS Feeds)📕 Vector Databases (FAISS, pgvector, Elasticsearch) & Embeddings🛠️ Chunking Strategies for Better Retrieval🔬 Testing & Evaluating RAG Pipelines (Precision, Recall, Performance)🏊‍♀️ Performance & Optimization Considerations🥟 Summary & Q&A
Building a Realtime App with Remix and Supabase
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Building a Realtime App with Remix and Supabase
Workshop
Jon Meyers
Jon Meyers
Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!