# Tech Stack

### Tech Stack

* Web Basics -> `HTML`, `CSS`, `JavaScript`
* [Liquid](https://shopify.github.io/liquid/)
* [TypeScript](https://www.typescriptlang.org/)
  * Vanilla JS
  * [Preact](https://preactjs.com/)
  * [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for global state management
* [Tailwind CSS](https://tailwindcss.com/)

### **Required Developer Tools**

* [NodeJS](https://nodejs.org/en)
* [esbuild](https://esbuild.github.io/)
* [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)
* [Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install)

### Use of the Accelerated Developer Tools also requires a thorough understanding of the following.

* [Shopify Theme Architecture](https://shopify.dev/docs/themes/architecture) (including all subsections)
* [Shopify Section input types](https://shopify.dev/docs/themes/architecture/settings/input-settings)
* Performance Best Practices
* [Semantic HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet) 
  * The best example of semantic HTML we've seen is on [stripe.com](https://stripe.com). Review their source code by inspecting the page on Chrome Dev Tools. You will see a strict adherence to \<section> \<header> \<main> \<footer> tags.
* [Accessibility Best Practices](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript)