/building-stunning-webapps-2022

Source code for the 2022 UC Preconference Seminar: Building Stunning Web Apps

Primary LanguageJavaScript

Esri UC Banner

Building Stunning Web Apps

This readme will serve as a quick reference page for the 2022 Esri UC Preconference Seminar: Building Stunning Web Apps

In this repo, you can find:

  1. The source code for "Discover Colorado" – the project we will be using to showcase what it takes to build stunning web apps. We've built this app up incrementally so you can follow along and see the major stages of a web dev project.
  2. This readme, with the agenda and links to resources we will reference throughout the workshop.

Agenda

Workshop Agenda

Code Links

Look here for quick links to get to the incremental builds of the Discover Colorado app. We've created a separate git branch for each "module". In addition to that, you can check out the app running at each of these stages using the links below.

0. Starter

We'll start with nothing more than the output of Create React App, a command line tool built by the React team (npx create-react-app).

View source on GitHub

Open app in CodeSandbox

1. The foundations

This represents our prototypical "boilerplate" application. It comes with all the foundational bits and pieces we at Esri use most often – developer tooling, a UI library, a router, and a few other nuggets.

View source on GitHub

Open app in CodeSandbox

2. Adding layout

This branch builds upon our boilerplate and adds some opinionated structure to our app. We'll start using React and Styled Components to see our app take shape. This is when we start writing code specific to the Discover Colorado project.

View source on GitHub

Open app in CodeSandbox

3. Components!

One of (if not the) thesis of this workshop is to "think in components". We will talk about lots of benefits to this approach but we'll also roll up our sleeves and show you how the sausage components are made here at Esri 😄.

View source on GitHub

Open app in CodeSandbox

4. App state and (finally)... some GIS!

This module represents our final product for this workshop app. We'll take the layouts and our new box of components and put some brains into the app. We introduce some more advanced concepts here, like the global state, lifecycle methods, and lots of JSAPI goodness... but we'll be sure to hammer home the concepts first so you can follow along.

View source on GitHub

Open app in CodeSandbox