Proto-autos-wc NPM

proto-autos-wc

a prototype GraphQL app written in Stencil and Tailwind, backed by a GraphQL server (Forza Horizon 5 car list) and deployed via NPM and Vercel...

wc-autos.vercel.app - deployed on Vercel

To run this locally:

yarn
yarn dev

features

on the initial run, it makes a GraphQL query to a server on Vercel
when data loads, the data is saved in both the localStorage and the internal store
the app remembers your selection in the toolbar
refreshing the page, loads data from localStorage
clicking the refresh icon will fetch a new query
all of the vehicle make icons are lazy loaded from a proto-ikon-loader web component
these icons are loaded using dynamic tags in JSX
most of the styling is done thru Tailwind CSS
the referenced Tailwind class definitions are injected into the component roots at build time
the app scores 100 across the board in Lighthouse

references

fetchql - GraphQL client with Fetch
proto-ikon-loader - prototype SVG icon loader
proto-tailwindcss-clrs - TailwindCSS plugin for custom colors
Quick Tip - Dynamic Stencil Component Names with JSX
Simple Trick to Clean Up Tailwind CSS in React - the tw utility
TailwindCSS - a utility-first CSS framework

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

12 months ago

12 months ago

12 months ago

12 months ago