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

Github

https://github.com/catamyst-community/catamyst-frontend-stack

Catamyst Frontend Stack - Discussion and demo for Frontend Web Development with Modern Tech Stack

Catamyst Frontend Stack

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

Github

Comments(1)

Tambahan resource related sama accessiblity / performance

Popular Tag

Related

Main repository for The Art of Tech: Not Playing with a Full Tech group a social media based tech organization

This is a simple frontend project which is built while learning full-stack web development by Dr.Angela yu the course is called The Complete 2022 Web Development Bootcamp this is the best-seller course in web development on Udemy

Crimson-Tech is an E-Commerce web application for a computers and computer accessories selling shop. The application contains both admin and client side components. Developed using MERN stack.

Tutorial, examples, and discussion all about CSS 3D transforms

A website for a web development courseA website for a web development course. The project was built with vanilla javascript. Most of the content was rendered dynamically by manipulating the DOM. CSS animations was also used to improve the user experience of the application.

📚 Dark theme for Stack Overflow & most Stack Exchange network sites

OnTrack is a Team Management web app, focused on Software Development teams that collaborate using GitHub Project and Issues to track their project development.

The Kria Robotics Stack (KRS) is a ROS 2 superset for industry, an integrated set of robot libraries and utilities to accelerate the development, maintenance and commercialization of industrial-grade robotic solutions while using adaptive computing.

This is a Full Stack Web Application - With Instruction on how to integrate Stripe code to your Application to start receiving payment on your site. Both backend and frontend integrated for better user experience.

A modern and minimalist framework for building responsive and modern frontend

AfroTech festival is an online website for events and conferences about tech. AfroTech brings together all technology players such as startups, companies, and individuals. Build with Html/CSS and JavaScript

This Project about CES tech summit 2021 contains the program, speakers, and sponsors.

A list of history's greatest software engineers and tech pioneers

This project is about women in the tech space. We have bi-monthly calls where we help each other find coding help, freelancing opportunities or just someone to talk to. I built it using HTML, CSS and JavaScript

A bare-bones CSS reset for modern web development.

Best practices for modern web development

A bare-bones CSS reset for modern web development.

📚 Study guide and introduction to the modern front end stack.

Este repositório foi criado com intuito de organizar, hospedar o projeto/desafio da Neon, fase 2 do Programa Tech Talents !

This project is focused on building an conference website showing detailed description of an upcoming submit event titled "Tech them young."