Example Projects

A selection of example projects to get started with.

Official examples

You can find some example projects in the GitHub repository under the /examples folder:

• Create React App (TypeScript version)
• Gatsby
• Gatsby Theme
• Next.js (TypeScript version)
• Preact
• CDN
• Plain server-side
• Use styled-components as style engine

Create React App is an awesome project for learning React. Have a look at the alternatives available to see which project best fits your needs.

The source code for this documentation site is also included in the repository. This is a slightly more complex project. Check out the /docs folder for build instructions.

More advanced example projects

If you want to start with a more complete and real-world example, you could take a look at the premium themes & templates or:

Free

• React Most Wanted:

  • Created with Create React App
  • Custom Create React App script to start a new project with just a single CLI command
  • Build for Firebase including Authentication using the official Firebase Web Auth UI
  • Routing with React Router including error handling (404) and lazy loading
  • All PWA features included (SW, Notifications, deferred installation prompt and more)
  • Optimized and scalable performance (all ~100 points on Lighthouse)

• RMUIF:

  • Bootstrapped with Create React App
  • Firebase back-end with most of their products for the web included, e.g., Authentication and Cloud Firestore
  • Routing with React Router, including protected routes and error handling
  • Extensive and well-tested mobile support with full-screen dialogs and swipeable tabs
  • Cross-platform application monitoring with Sentry

• Material Sense:

  • Graph using recharts
  • React Router included with a navigation example
  • A docker container with an Nginx server for production build
  • Created with Create React App

• React SaaS Template:

  • Created with Create React App
  • Features a landing page, a blog, an area to login/register and an admin-dashboard
  • Fully routed using react-router
  • Lazy loads components to boost performance
  • Components for statistics, text with emoji support, image upload and much more...

Paid

• ScaffoldHub:

  • Build your complete application with this online tool
  • Choose your framework and library (React & Material-UI!)
  • Choose your database (SQL, MongoDB or Firestore)
  • Model your database and application with the intuitive GUI
  • Generate your application, including a complete scaffolded backend
  • Preview your application online, and download the generated code