Catamyst Frontend Stack

Discussion and demo for Frontend Web Development with Modern Tech Stack.

Made by M Haidar Hanif from Catamyst. Haidar is the Founder and Mentor of Catamyst, helping people in web development, software engineering, interface design, product management, and tech business.

Links
- Catamyst
- CodePolitan × Catamyst Bootcamp
Roles and Career Path
Preferred Stack
Stack
Extra Stack
Work Stack
People to Follow
- International
- Indonesian
References

Roles and Career Path

UI Designer/Developer/Engineer
UX Designer/Developer/Engineer
Web Developer/Designer
Frontend Developer/Designer
Frontend Engineer
Software Engineer
Business Analyst
R&D (Research/Development) Developer/Engineer
VP (Vice President) of Engineering -> Technical
VP of User Experience -> Technical
CTO (Chief Technology Officer) -> Management
CDO (Chief Design Officer) -> Management

Preferred Stack

Google Chrome / Brave / Firefox / Edge
Figma
Whimsical
Warp
Raycast
VS Code
Markdown + Markdoc / MDX
MIT License
HTML
CSS + Tailwind CSS
TypeScript/JavaScript
- Zod / Yup
- dayjs + date-fns
Node.js + npm
- Volta / asdf
Vite / esbuild + swc / Webpack
React
- Remix
- Next.js
- Vite + React Router / wouter
- React Hook Form / Formik + Downshift
- Headless UI + Radix UI + Vechai UI
- React Native
Git + GitHub
- Git hook with Husky
Vercel / Netlify
ImageKit
Cloudflare
Prettier + ESLint + Stylelint
Vitest / Jest + testing-library
- MSW (Mock Service Worker)
- Falso
Playwright
Laddle
Hoppscotch / Postman / Insomnia
REST
- Axios
- SWR (stale-while-revalidate)
- React Query
- Kontenbase
- Supabase
GraphQL
- urql / graphql-request
- Apollo
- Hygraph (GraphCMS)
- Payload CMS
Prisma ORM + PostgreSQL
Nextra Docs
Pulsetic + Better Uptime + Instatus
Google Analytics 4 + Splitbee + Posthog + Fathom + Pirsch
Sentry + Posthog + LogRocket
Linear
Clockify

Stack

Web Browser
- Google Chrome ⭐
- Brave
- Firefox
- Edge
UI and UX
- Sketch
- Wireframe
- Mockup
- Prototype
- Design System
  - Material Design
  - Apple Human Interface Guidelines (HIG)
Design Tools
- UI
  - Figma ⭐
  - Framer
  - Adobe XD
  - Invision
  - UXPin
- UX + Business Process/Flow
  - Whimsical ⭐
  - Miro
Terminal
- Warp (Mac) ⭐
- iTerm (Mac)
- Hyper.sh (Mac/Linux/Windows) ⭐
- Terminal (Linux)
- PowerShell (Windows)
Command
- Raycast (Mac) ⭐
- Alfred (Mac)
- Spotlight (Mac)
Code Editor
- Local
  - VS Code ⭐
    - Language Support
    - Color Theme
    - Icon Theme
    - Product Icon
    - File Utils
    - Image Preview
    - Quit Control
  - Atom ⛔
  - Sublime Text
  - JetBrains WebStorm
- Cloud
  - CodePen ⭐
  - StackBlitz ⭐
  - CodeSandbox
Documentation / README
- Markdown ⭐
  - Format
    - CommonMark
    - Markdoc ⭐
  - Editor
    - StackEdit
    - Dillinger
- AsciiDoc
- reStructuredText
- Textile
- LaTeX
  - Overleaf
  - Math Formula
License
- ISC (Internet Systems Consortium)
- MIT (Massachusetts Institute of Technology) ⭐
- GPL (GNU General Public License)
- AGPL (GNU Affero General Public License)
- BSD (Berkeley Software Distribution)
- MPL (Mozilla Public License)
- CC (Creative Commons) ⭐
HTML (Hypertext Markup Language)
- DOM (Document Object Model)
CSS (Cascading Style Sheets)
- CSS Reset
  - Normalize.css
  - modern-normalize ⭐
- PostCSS ⭐
  - autoprefixer
Tailwind CSS ⭐
- Bootstrap
- Material Components
- Bulma ⛔
- Foundation ⛔
- PureCSS ⛔
- Tailwind + Email = Mailwind
JavaScript ⭐
- jQuery ⛔
- Zepto ⛔
- MooTools ⛔
TypeScript ⭐
- DefinitelyTyped
Node.js ⭐
- nvm
- Volta ⭐
- asdf
npm ⭐
- pnpm
- Yarn
Build/Bundle
- Vite ⭐
- esbuild ⭐
- Webpack
- Babel
- swc ⭐
- Parcel
- Gulp
- Grunt
React
- Plain
- CRA (Create React App)
- Vite ⭐
- GatsbyJS
- Next.js ⭐
  - NextAuth
- Remix-React ⭐
- React Native ⭐
  - Expo ⭐
- Desktop
  - Electron
  - Tauri ⭐
  - Neutralinojs ⭐
Vue
- Vite ⭐
- Nuxt.js ⭐
- Remix-Vue (Soon) ⭐
Svelte ⭐
- SvelteKit ⭐
SolidJS
Astro
Angular
- AngularJS v1
- Angular v2+
Deno ⭐
- Fresh ⭐
Bun.sh ⭐
UI Routing
- React Router ⭐
- Reach Router
- wouter
- React Location ⭐
UI form components
- React Hook Form ⭐
- Formik
- React Form
UI unstyled components
- Headless UI ⭐
- Radix UI ⭐
- Reach UI ⭐
- AriaKit
- Vechai UI ⭐
UI CSS-in-JS components
- styled-components
- emotion
- xstyled
- Stitches
- Chakra UI ⭐
- MUI ⭐
- NextUI
UI components
- React Table
- React Charts
- React Virtual
- Remotion ⭐
- Slidev ⭐
- D3.js ⭐
- Mermaid.js ⭐
- p5.js
- Chart.js
- Highcharts
- Three.js ⭐
- Framer Motion ⭐
- GSAP (GreenSock Animation Platform) ⭐
- React Simple Animate ⭐
- React Simple Img
- react-beautiful-dnd
- kbar
- Icons
  - react-icons
  - Font Awesome
  - Phospor
- Animation
  - Framer Motion
  - React Spring
- Rich Text Editor (RTE)
  - Lexical ⭐
  - Quill.js ⭐
  - Draft.js
  - Slate.js
Utilities
- Data Validation
  - Yup
  - Zod ⭐
- Date Time
  - date-fns ⭐
  - dayjs ⭐
  - Moment.js
- Misc
  - clsx ⭐
  - web-vitals ⭐
  - superjson
State Management
- Redux
  - Redux Toolkit (RTK)
- MobX
- Zustand
- Recoil
- XState
Web API: REST / GraphQL / tRPC
- Inspection
  - Hoppscotch ⭐
  - Postman
  - Insomnia
- Request
  - fetch ⭐
  - Axios ⭐
  - urql ⭐
  - Apollo
  - Relay
Source Code Management (SCM) / Version Control System (VCS)
- Git ⭐
  - Git hook
  - Conventional Commit
  - Commitizen
    - Changelog
- Mercurial (hg)
Code Hosting
- GitHub ⭐
- GitLab
- Bitbucket
Deployment
- GitHub Pages ⭐
- Vercel ⭐
- Netlify ⭐
- Render
- Fly.io
- Deno Deploy
- PaaS (Platform as a Service)
  - Heroku
  - Railway ⭐
  - Amazon EB (Elastic Beanstalk)
  - Google App Engine
- VPS
  - Digital Ocean (DO)
  - Linode
  - Vultr
  - Amazon Lightsail
  - Amazon EC2 (Elastic Compute Cloud)
  - Google CE (Compute Engine)
- File Storage & CDN
  - ImageKit ⭐
  - Cloudinary ⭐
  - Upload.io
  - Amazon S3
  - Google CS (Cloud Storage)
  - Azure Blob Storage
- Video/Streaming Storage
  - Muse.ai
  - YouTube
  - Vimeo
- CDN
  - Amazon Cloudfront
Domain and Network
- Cloudflare ⭐
- Google Domains
Environment Management
- Doppler ⭐
CI/CD (Continuous Integration/Delivery/Deployment)
- GitHub Actions ⭐
- Travis CI
- CodeFactor
Testing
- Static
  - EditorConfig ⭐
  - Prettier ⭐
    - prettier-plugin-tailwindcss
  - ESLint ⭐
    - eslint-airbnb
  - Stylelint ⭐
- Suite
  - testing-library ⭐
- Unit
  - Vitest ⭐
  - Jest
  - Mocha + Chai
- Functional/Integration
  - Cucumber.js
  - Jest Cucumber
- End to End
  - Playwright ⭐
  - Cypress
  - Selenium
- UI / Component / Design System
  - Storybook
  - Laddle ⭐
  - Histoire
- Mock or Dummy Data
  - MSW (Mock Service Worker) ⭐
    - For 3rd party such as GitHub API, Weather API, Currency API
  - Falso ⭐
  - Faker
Documentation
- Docusaurus
- Nextra ⭐
- Slate Docs
Status Monitoring
- Pulsetic ⭐
- Better Uptime ⭐
- Instatus ⭐
Analytics
- Google Analytics 4 ⭐
- Splitbee ⭐
- Posthog ⭐
- Pirsch ⭐
- Fathom ⭐
- Plausible
- MixPanel
Feature Toggle
- Growthbook ⭐
- LaunchDarkly
Error Reporting
- Sentry ⭐
- LogRocket
- New Relic
- Metronome for Remix ⭐
Dependency Monitoring
- DepFu ⭐
- Snyk ⭐
BaaS (Backend as a Service) / CMS (Content Management System)
- REST
  - Kontenbase ⭐
  - Firebase
  - Supabase ⭐
  - DatoCMS
- GraphQL
  - Hygraph (GraphCMS) ⭐
  - Payload CMS ⭐
- Misc
  - Netlify CMS
  - Sanity
Web3
- RainbowKit ⭐
- Ethers.js
Development Workflow
- TDD (Test-Driven Development)
- ATDD (Acceptance Test-Driven Development)
- BDD (Behavior Driven Development)
- DDD (Domain-Driven Development)

Extra Stack

Other things and legacy
- Web Components
- CoffeeScript
- Elm
Other languages for JS tooling
- Rust
- Zig
Other libraries
- Livewire
- Inertia.js
- Hotwire
- Turbo
- Stimulus
Semantic Versioning (major.minor.patch)
Accessibility (a11y)
- The A11Y Project
- Accessibility (aria, accessible components)
Performance
- lighthouse
- rail
- prpl
- hydration
- ssr/csr
Internationalization (i18n)
- i18next
Localization (l10n)
Email
- Marketing
  - ConvertKit ⭐
  - Bento Marketing
- Transactional
  - EmailJS ⭐
Payment
- Gumroad ⭐
Chat Box / CRM
- Hubspot CRM ⭐
- Crisp ⭐
- Chatwoot
- Front
- Tidio
Monorepo
- Turborepo
- Nx
- Bazel
Containerization
- Docker

Work Stack

Project Management
- Linear ⭐
- Atlassian Jira
- Trello
- Asana
- Basecamp
Time Tracking
- Clockify ⭐
- Toggl

People to Follow

International

M Haidar Hanif - The author of this repo
Brendan Eich - JavaScript
Ryan Dahl - Node.js & Deno
Jarred Sumner - Bun.sh
Eric Elliott
Douglas Crockford
Dr. Axel Rauschmayer
Kyle Simpson
Nicholas C. Zakas
Marijn Haverbeke
Tom Preston-Werner (mojombo) - GitHub & Redwood
Sid Sijbrandij - GitLab
DHH - Rails & Basecamp
Dylan Field - Figma
Kent C. Dodds - Epic React
Ryan Florence - Remix & React Router
Michael Jackson - Remix & React Router
John Lindquist - Egghead.io
Quincy Larson - freeCodeCamp
Ben Halpern - DEV.to & Forem
Theo Browne (t3)
Ben Awad
Jeff Delaney (fireship)
Tanner Linsley
Jared Palmer
Shawn swyx Wang
Sindre Sorhus
mrdoob
Dan Abramov
Evan You
Wes Bos
Scott Tolinski
Chris Sev
Florin Pop
Mattias Petter Johansson (mpj) - Fun Fun Function
Pieter Levels - Bangkok/Bali
Jon Yongfook - Bali
Fabrizio Rinaldi
Dan Rowden (dr)
Max Stoiber
Timo Lins & Tobias Lins
Damon Chen
Tony Dinh
Cassidy Williams (cassidoo)
Jason Lengstorf
Robin Wieruch
Adam Wathan
Simon Høiberg
Simon Sturmer
Simon "Swiss" Vrachliotis
Adrian Twarog
Guillermo Rauch
Lee Robinson
Brian Lovin
Addy Osmani
Paul Irish
Eric Bidelman
Sara Soueidan
Josh W Comeau
Sergio Xalambrí
Segun Adebayo
Ant Wilson
Paul Copplestone (kiwicopple)
Jon Meyers
Chance Strickland
Brian Holt
Arisa Fukuzaki
Alex Johansson
Ben Holmes
Paco Coursey
Jesse Hanley
Karri Saarinen
Tuomas Artman
Jori Lallo
Tomek Sułkowski (sulco) - StackBlitz
Peter Cilliers-Pistorius
Adam Argyle
Pedro Duarte
Nikolas Burk
Amelia Wattenberger
Tom Hirst
Ryan Chenkie
Kenneth Cassel
Todd Motto
Marc Kohlbrugge
Nadia Laasri
Annie Bombanie
Danny Postma - Bali
Meng To
Gregg Pollack
Mehul Mohan
Andrei Neagoie
Moshfegh Hamedani
Courtland Allen
Ryan Hoover
Revel Carlberg West
Will Johnson (willjohnsonio)
Ahmad Awais
Maedah Batool
Mohd Danish Yusuf
Fajar Siddiq
Jecelyn Yeen (jecfish)
Henry Lim (henrylim96)
Jack “The Comeback Kid” McDade
bluebill1049 - React Hook Form (RHF)
An / Anton Röhm / AnTheMaker
Coder Coder
Bereket
devUdara

Indonesian

Rahman Fadhil (rahmanfadhil14)
Ariya Hidayat
Sonny Lazuardi
Zain Fathoni
R Adysurya Agus
Resi "resir014" Respati
Sastra Panca Nababan
Irfan "Mazipan" Maulana
Sandhika Galih
Ahmad Oriza & Toni Haryanto
Jihad D. Waspada
Muh Isfhani Ghiath (isfaaghyth)
Yohan Totting
Riza Fahmi
Muhammad "Odi" Mustadi (mathdroid)
Theodorus Clarence
Griko Nibras
Philip Young
Yuma Soerianto
Indra Gunawan

References

Refactoring UI
Newline

rtclub11140/catamyst-frontend-stack