React - Links and Resources Appendix

In the second part of this file, I've included a list of technologies that I currently use in production/in my daily work, and everything I would recommend off the top of my head. I've tried to give you as much information as possible, as many use cases as possible, and the tools that I personally use ;)!

React Core

Vite

🎯 Hooks - Documentation and Guides

Basic Hooks

Performance Hooks

-> be careful not to optimize too early! it might create crazy things otherwise!

State Management Hooks

Advanced Hooks

-> much rarer usage!

Custom Hooks

🛠️ Tools and Ecosystem

Routing

Next.js

Performance and Optimization

📖 Advanced Guides and Tutorials

Fundamental Concepts

Patterns and Best Practices

Advanced Hooks Guides

🔧 Useful Libraries and Tools

Hooks Collections

Forms

API and Data Fetching

  • TanStack Query - Hooks for API and cache
  • SWR - Alternative to TanStack Query
  • Apollo - GraphQL data fetching
  • USE FETCH OVER AXIOS! if we have simple needs, fetch will always be better, and lighter, if we start having complex needs, we will move towards more optimized and modern options, axios is rarely a very good choice!

UI and Components

🚀 Roadmaps and Learning

Roadmaps

State of JS

🎨 Design and UX

Design Systems

Accessibility

🔍 Debugging and Tools

Development Tools

Testing

📊 Performance and Monitoring

Performance

Monitoring

Mini tutorial on monitoring:

If you want to explore particular libraries and meet the different needs you will have professionally

  • Do searches with "Awesome Github library" on google.
  • If you have any doubts, type "what's the best framework js, reddit": you will have an endless war of people who absolutely want to be right on reddit, it's very interesting because you see the hardcore version of each extreme of everyone's thoughts on each framework / each technos, you can do the same for all your future choices and doubts, it works very well
  • I loooove the "Roadmap.sh" which allows you to have directions to take
  • Check "app.daily.dev" to monitor
  • Stroll around Youtube, there are plenty of great youtubers in tech, especially among Americans / English.

💼 The stack I use

This section groups together the tools and libraries I use!

🚢 Infrastructure & Deployment

  • Coolify - Self-hosted PaaS alternative to Vercel/Netlify
  • Dokploy - Open-source PaaS with Docker (alternative to coolify)
  • Homer - Dashboard for self-hosted services
  • Cloudflare DNS - DNS management -> my domain names are on cloudflare
  • Cloudflare R2 - S3-compatible storage (free up to 15GB) -> we put our coolify saves and all that on it, it works great, and it's really cheap storage
  • Cloudflare Tunnel - Expose local services -> can be used to expose your localhost to the web, very useful for using webhooks.
  • Ngrok - Tunneling for local dev
  • Svix - Webhooks as a service

🗄️ Backend & Databases

  • Prisma - ORM TypeScript
  • Pocketbase - Backend-as-a-Service open-source (CMS) -> API IN 5s
  • Strapi - Headless CMS -> API IN 5s
  • Payload CMS - TypeScript-first CMS (integrate with NextJS) -> API IN 5s
  • Apollo - GraphQL platform -> API IN 5s

🔐 Authentication & Security

  • Better Auth - Modern auth library -> THE BEST solution for custom auth in app
  • Clerk - Authentication & user management -> if you want to do auth in 5s, with an ultra efficient and effective service! My little darling
  • Keycloak - Open-source identity management -> SSO open source!
  • Infisical - Secret management platform -> all passwords in one place, for applications, allows you to rotate .env and all that, in the same place, without having to copy / paste the .env and all that! (very useful in a team!)
  • Vaultwarden - Self-hosted Bitwarden server -> allows you to make a password manager (like dashlane for example)
  • CrowdSec - Collaborative security engine -> alternative to fail2ban, allows you to secure access to a server, ban spam and all that

📊 Monitoring & Analytics

  • Sentry - Error tracking & performance monitoring -> allows you to track the errors of our apps
  • Umami - Privacy-focused analytics -> Google analytics but better!
  • Metabase - Open-source BI & analytics platform -> Give a great dashboard to salespeople so they can check the data from the db without bothering the devs! (really a banger)
  • Kuma Uptime - Self-hosted monitoring -> allows you to manage an uptime page and track the different apps, know what's running and what's down
  • BetterUptime - Uptime monitoring & status pages -> like kuma, but in SaaS (paid)
  • LogRocket - Session replay (already mentioned)

🤖 AI & Automation

  • Vercel AI SDK - AI toolkit for applications -> tip top for managing requests to AIs
  • NextLLM - LLM integration framework -> create your own chatgpt like interface
  • n8n - Workflow automation -> automation
  • Postiz - Social media scheduling -> manage lots of social networks and do multipost / multi networks

🎨 UI & Design Systems

  • Shadcn UI - Re-usable components -> my design darling
  • 21st.dev - Premium UI components -> to find bangers already made by people in terms of design, allows you to start on beautiful bases!
  • ReactBits - Lots of stylish components!
  • Acertinity - Lots of stylish components!
  • TailwindCSS - Utility-first CSS framework (my darling too)
  • Tailwind UI - Official Tailwind component library -> tailwind paid lib
  • Headless UI - Unstyled accessible components -> super utility lib!
  • Radix UI - Low-level UI primitives -> same, super utility lib!
  • Chakra UI - Same -> lots of content!

🎬 Animation & Graphics

  • Motion - Modern animation library (Framer Motion) -> crazy animation
  • GSAP - Professional animation library -> same lots of animations
  • Lottie - JSON-based animations -> very advanced animations, you can do after effect -> web
  • Rive - Interactive vector animations -> premium ++++++ banger animation, rust etc
  • AOS - Animate On Scroll library -> block and page transitions
  • Three.js - 3D graphics library -> 3d, but very difficult
  • React Three Fiber - React renderer for Three.js -> improvement of three js

📝 Forms & Validation

  • Zod - TypeScript-first schema validation - advanced data validation, good practice
  • Valibot - Lightweight alternative to Zod - very nice too

🧪 Testing & Quality

  • Playwright - End-to-end testing (the top of the top on my side)
  • Cypress - E2E testing framework
  • Lighthouse - Performance auditing
  • Unlighthouse - Lighthouse scanning at scale - lots of lighthouse on lots of pages at once
  • IBM Accessibility Checker - Accessibility verification -> banger archi not known!
  • Wappalyzer - Technology profiler -> check the technos of a site / app

🛠️ Development Tools

  • Prettier - Code formatter
  • ESLint - Linter JavaScript
  • Biome - Alternative to Prettier + ESLint (it looks like crazy!)
  • Husky - Git hooks -> execution of git hooks, scripts when pushing / committing
  • Renovate - Dependency updates automation -> automatic updates on dependencies
  • Lazygit - Terminal UI for Git (git in terminal mode but + stylish)
  • Lazydocker - Terminal UI for Docker (docker terminal but + stylish)
  • Insomnia - API client
  • Bruno - Open-source API client -> manage api calls, but save on files directly, and therefore make the use of an api versionable! (shareable tests)
  • Neovim - Extensible text editor -> if you like graphics cards (hardcore version of vim / an IDE)
  • Tmux - Terminal multiplexer -> several CLIs in a single window
  • Obsidian - the note-taking tool on my side!
  • Syncthing - File sync! (I have a VPS at netcup that syncs my files between my desktop, my laptop, and my server, on certain folders only) €5 I have a multi drive without bugs

📦 Build & Bundling

  • Vite -> it does module bundler and opti too
  • Rollup - Module bundler -> dinguerie with vite to do react app opti

📧 Email & Communication

  • Resend - Email API for developers -> SaaS mail
  • Mailgun - Email delivery service -> SaaS mail

🎯 Icons & Assets

  • Lucide - Beautiful icon library -> lots of icons
  • Font Awesome - Icon library -> more icons
  • Sharp - Image processing -> opti images
  • cwebp - WebP converter -> ultra modern format to DRASTICALLY reduce the size of images

🔄 State Management & Data Fetching

🧰 Utilities

  • Luxon - Date & time library
  • Nuqs - Type-safe URL search params -> to use for mirroring useState in the params of a page.
  • Number Flow - Animated number transitions -> it makes pretty numbers
  • Remark - Markdown processor -> markdown to js / html

💳 Payments

  • Stripe - Payment processing platform

Up next

Introduction to Angular (Coming Soon)

This section on Angular is currently under preparation. In the meantime, I'm providing you with the best resources, such as the Angular roadmap, to start your learning journey with this framework.