Helpful Resources

Tutorials

• Examples of large production-grade, open-source React apps
  • Very nice collection of real-world React projects
• Bulletproof React
  • Great set of opinionated standards for React projects
  • The only one I don’t necessarily agree with is the project structure
• React TypeScript Cheatsheets
  • Cheetsheat reference on how to use TypeScript in React projects
• Frontend Developer Roadmap
  • Decent flowchart giving you an “order” to what you should be learning in frontend
• Awesome React
  • Community-curated collection of relevant React resources, tools, projects, etc.
• Awesome Next.js
  • Community-curated collection of relevant Next.js resources, tools, projects, etc.
• React Libraries for 2022
  • Up-to-date summary of current trends in the React ecosystem
• Headless components in React and why I stopped using a UI library for our design system
  • Great article around the use of headless components such as Radix UI
  • Describes the many benefits offered by accessibility-first packages
• The Third Age of JavaScript
  • Interesting take on the current state of JS
  • Good prediction about the trends we will see emerging
• Flowbite
  • Pre-built Tailwind components
  • Some are pure CSS (use), some are CSS and JS (avoid)
• Tailwind Elements
  • Pre-built Tailwind components
  • Some are pure CSS (use), some are CSS and JS (avoid)
• HyperUI
  • Pre-built Tailwind components
  • All of them are pure CSS
• VS Code: You don’t need that extension
  • List of utilities which are usually installed as plugins
  • Many now have built-in options in VS Code!
• File-based routing with React Router
  • Helps set up auto importing pages in Vite and React Router
• Component Party
  • Awesome website which compares common frontend patterns between frameworks
  • For example, compare how you handle click events in React vs Vue vs Svelte vs SolidJS

Example Projects

• Spacedrive
  • Open-source multi-device file explorer
  • Built with React, Vite, Tailwind, HeadlessUI, RadixUI, React-Query, TypeScript
• Spectrum
  • Community platform for developers
  • Built with React, Redux, GraphQL
• HospitalRun
  • Open-source healthcare EMR
  • Built with React, Redux, React-Query, TypeScript
• Reactive Resume
  • Open-source resume generator
  • Built with Next.js, Redux, Tailwind, MUI, TypeScript
• OpenReplay
  • Open-source alternative to LogRocket
  • Built with React, Redux, Tailwind, SemanticUI, TypeScript
• MagLit
  • Very aesthetic link shortener
  • Built with Next.js, Tailwind
• Builderbook
  • Open source resources for learning web development
  • Built with Next.js, MUI
• Open Collective
  • Built with Next.js, TypeScript
• Calendso
  • Calendly alternative
  • Built with Next.js, RadixUI, Tailwind, TypeScript
• Tailwind Docs
  • Documentation for Tailwind
  • Built with Next.js, Tailwind, HeadlessUI
• Egghead
  • Open source courses for learning web development
  • Built with Next.js, Tailwind, ReachUI, Remark, TypeScript
• CoVstrain
  • Open source dashboard of COVID strains over time
  • Built with Next.js, Tailwind
• Serverless Stack
  • Open-source serverless application platform
  • Built with Docusaurus, TypeScript
• Next.js Commerce
  • Demo commerce store setup
  • Built with Next.js, Tailwind, RadixUI, TypeScript
• leerob.io
  • Portfolio from a Next.js employee
  • Built with Next.js, Tailwind, Remark, TypeScript
• fastfeedback.io
  • Demo app for receiving feedback on your website
  • Built with Next.js, Firebase, ChakraUI
• Tailwind Starter Blog
  • Nice boilerplate blog project
  • Built with Next.js, Tailwind
• React Docs Beta
  • Beta official tutorial for learning React
  • Built with Next.js, Tailwind, HeadlessUI, Remark, TypeScript
• Cypress Real World App
  • Built with React, MUI, Auth0, Formik, GraphQL, Cypress, TypeScript
• Mattermost
  • Slack-like alternative for developers
  • Built with React, Redux, Bootstrap, TypeScript
• SonarQube
  • Tool for code testing before deployment
  • Built with React, Formik, esbuild, TypeScript
• daily.dev
  • A centralised news feed for developer news
  • Built with Preact, Next, Tailwind, TypeScript
• ToolJet
  • Low-code framework for building applications
  • Built with React, Bootstrap, Sentry