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
- Roles and Career Path
- Preferred Stack
- Stack
- Extra Stack
- Work Stack
- People to Follow
- 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
- Google Chrome
- 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
- Figma
- UX + Business Process/Flow
- Whimsical
⭐ - Miro
- Whimsical
- UI
- Terminal
- Warp (Mac)
⭐ - iTerm (Mac)
- Hyper.sh (Mac/Linux/Windows)
⭐ - Terminal (Linux)
- PowerShell (Windows)
- Warp (Mac)
- Command
- Raycast (Mac)
⭐ - Alfred (Mac)
- Spotlight (Mac)
- Raycast (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
- VS Code
- Cloud
- CodePen
⭐ - StackBlitz
⭐ - CodeSandbox
- CodePen
- Local
- Documentation / README
- Markdown
⭐ - Format
- CommonMark
- Markdoc
⭐
- Editor
- StackEdit
- Dillinger
- Format
- AsciiDoc
- reStructuredText
- Textile
- LaTeX
- Overleaf
- Math Formula
- Markdown
- 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
- CSS Reset
- Tailwind CSS
⭐ - Bootstrap
- Material Components
- Bulma
⛔ - Foundation
⛔ - PureCSS
⛔ - Tailwind + Email = Mailwind
- JavaScript
⭐ - jQuery
⛔ - Zepto
⛔ - MooTools
⛔
- jQuery
- TypeScript
⭐ - DefinitelyTyped
- Node.js
⭐ - nvm
- Volta
⭐ - asdf
- npm
⭐ - pnpm
- Yarn
- Build/Bundle
- Vite
⭐ - esbuild
⭐ - Webpack
- Babel
- swc
⭐ - Parcel
- Gulp
- Grunt
- Vite
- React
- Plain
- CRA (Create React App)
- Vite
⭐ - GatsbyJS
- Next.js
⭐ - NextAuth
- Remix-React
⭐ - React Native
⭐ - Expo
⭐
- Expo
- Desktop
- Electron
- Tauri
⭐ - Neutralinojs
⭐
- Vue
- Vite
⭐ - Nuxt.js
⭐ - Remix-Vue (Soon)
⭐
- Vite
- Svelte
⭐ - SvelteKit
⭐
- SvelteKit
- SolidJS
- Astro
- Angular
- AngularJS v1
- Angular v2+
- Deno
⭐ - Fresh
⭐
- Fresh
- Bun.sh
⭐ - UI Routing
- React Router
⭐ - Reach Router
- wouter
- React Location
⭐
- React Router
- UI form components
- React Hook Form
⭐ - Formik
- React Form
- React Hook Form
- UI unstyled components
- Headless UI
⭐ - Radix UI
⭐ - Reach UI
⭐ - AriaKit
- Vechai UI
⭐
- Headless 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
- Lexical
- Utilities
- Data Validation
- Yup
- Zod
⭐
- Date Time
- date-fns
⭐ - dayjs
⭐ - Moment.js
- date-fns
- Misc
- clsx
⭐ - web-vitals
⭐ - superjson
- clsx
- Data Validation
- State Management
- Redux
- Redux Toolkit (RTK)
- MobX
- Zustand
- Recoil
- XState
- Redux
- Web API: REST / GraphQL / tRPC
- Inspection
- Hoppscotch
⭐ - Postman
- Insomnia
- Hoppscotch
- Request
- fetch
⭐ - Axios
⭐ - urql
⭐ - Apollo
- Relay
- fetch
- Inspection
- Source Code Management (SCM) / Version Control System (VCS)
- Git
⭐ - Git hook
- Conventional Commit
- Commitizen
- Changelog
- Mercurial (hg)
- Git
- Code Hosting
- GitHub
⭐ - GitLab
- Bitbucket
- GitHub
- 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
- ImageKit
- Video/Streaming Storage
- Muse.ai
- YouTube
- Vimeo
- CDN
- Amazon Cloudfront
- GitHub Pages
- Domain and Network
- Cloudflare
⭐ - Google Domains
- Cloudflare
- Environment Management
- Doppler
⭐
- Doppler
- CI/CD (Continuous Integration/Delivery/Deployment)
- GitHub Actions
⭐ - Travis CI
- CodeFactor
- GitHub Actions
- Testing
- Static
- EditorConfig
⭐ - Prettier
⭐ - prettier-plugin-tailwindcss
- ESLint
⭐ - eslint-airbnb
- Stylelint
⭐
- EditorConfig
- Suite
- testing-library
⭐
- testing-library
- Unit
- Vitest
⭐ - Jest
- Mocha + Chai
- Vitest
- Functional/Integration
- Cucumber.js
- Jest Cucumber
- End to End
- Playwright
⭐ - Cypress
- Selenium
- Playwright
- 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
- MSW (Mock Service Worker)
- Static
- Documentation
- Docusaurus
- Nextra
⭐ - Slate Docs
- Status Monitoring
- Pulsetic
⭐ - Better Uptime
⭐ - Instatus
⭐
- Pulsetic
- Analytics
- Google Analytics 4
⭐ - Splitbee
⭐ - Posthog
⭐ - Pirsch
⭐ - Fathom
⭐ - Plausible
- MixPanel
- Google Analytics 4
- Feature Toggle
- Growthbook
⭐ - LaunchDarkly
- Growthbook
- Error Reporting
- Sentry
⭐ - LogRocket
- New Relic
- Metronome for Remix
⭐
- Sentry
- Dependency Monitoring
- DepFu
⭐ - Snyk
⭐
- DepFu
- BaaS (Backend as a Service) / CMS (Content Management System)
- REST
- Kontenbase
⭐ - Firebase
- Supabase
⭐ - DatoCMS
- Kontenbase
- GraphQL
- Hygraph (GraphCMS)
⭐ - Payload CMS
⭐
- Hygraph (GraphCMS)
- Misc
- Netlify CMS
- Sanity
- REST
- Web3
- RainbowKit
⭐ - Ethers.js
- RainbowKit
- 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
- Semantic Versioning (major.minor.patch)
- Accessibility (a11y)
- The A11Y Project
- Accessibility (aria, accessible components)
- Performance
- lighthouse
- rail
- prpl
- hydration
- ssr/csr
- Internationalization (i18n)
- Localization (l10n)
- Email
- Marketing
- ConvertKit
⭐ - Bento Marketing
- ConvertKit
- Transactional
- EmailJS
⭐
- EmailJS
- Marketing
- Payment
- Gumroad
⭐
- Gumroad
- Chat Box / CRM
- Hubspot CRM
⭐ - Crisp
⭐ - Chatwoot
- Front
- Tidio
- Hubspot CRM
- Monorepo
- Turborepo
- Nx
- Bazel
- Containerization
- Docker
Work Stack
- Project Management
- Linear
⭐ - Atlassian Jira
- Trello
- Asana
- Basecamp
- Linear
- Time Tracking
- Clockify
⭐ - Toggl
- Clockify
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
Tambahan resource related sama accessiblity / performance
Mungkin perlu menambahkan resource related sama: