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:

1. yarn
2. 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