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.

Table of Contents

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

Links

Catamyst

• GitHub repo: https://github.com/catamyst-community/catamyst-frontend-stack
• Catamyst Stack: https://a.catamyst.com/stack
• Rewinds Stack: https://github.com/mhaidarhanif/rewinds
• Catamyst on social media:
  • YouTube: https://a.catamyst.com/youtube
  • Twitter: https://a.catamyst.com/twitter
  • Facebook: https://a.catamyst.com/facebook
  • LinkedIn: https://a.catamyst.com/linkedin

CodePolitan × Catamyst Bootcamp

This is a promo :)

Join Full Bootcamp for 30 sessions: https://catamyst.codepolitan.com

• Including the live mentorship sessions, full materials, practice with real projects, discussion/QA outside the sessions, certificate, long term career support, and more.
• Syllabus: https://a.catamyst.com/codepolitan-silabus
• Discount Coupons: HAIDAR / KRESNA for IDR 500,000

Join Mini Bootcamp (Trial Class) for 1 session: https://a.catamyst.com/codepolitan-mini

• Including the live mentorship sessions, session materials, practice with real project, discussion/QA, certificate, and more.
• Syllabus: https://a.catamyst.com/codepolitan-mini-silabus
• Discount Coupon: HAIDARKRESNA for IDR 50,000

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