React Templates & Themes Logo React Templates & Themes
React Firebase Starter screenshot

React Firebase Starter

Author Avatar Theme by Kriasoft
Updated: 5 Jun 2021
4523 Stars

Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay

Github Live Preview

Categories

Create react app Express Styled components Firebase

Overview

The React Starter Kit for Firebase is a popular project template that allows for the building of modern, scalable web applications with React, Relay, and GraphQL. It utilizes serverless infrastructure provided by Google Cloud, including Cloud SQL, Cloud Functions, CDN hosting, and file storage. This kit saves time and provides a solid foundation and design patterns for development.

Features

  • Create React App (★ 73k) for development and test infrastructure.
  • Material UI (★ 52k) integration for Google’s Material Design.
  • Passport.js (★ 17k) for authentication with stateless JWT tokens.
  • GraphQL.js (★ 15k) and Relay (★ 14k) for declarative data fetching and client state management.
  • Universal Router (★ 1k) + history (★ 6k) for declarative routing and client-side navigation optimized for Relay.
  • PostgreSQL database pre-configured with a query builder and migrations using Knex.js (★ 11k).
  • Google Cloud & Firebase for serverless architecture, including Cloud SQL, Cloud Functions, CDN hosting, and file storage.

Installation

To get started with the React Starter Kit for Firebase, follow these steps:

  1. Clone the repository.
  2. Update environment variables in the .env and/or .env.local file.
  3. Start hacking by running the project.
  4. Open http://localhost:3000/ to see your app.
  5. To re-compile GraphQL fragments, run yarn relay or yarn relay --watch.

Summary

The React Starter Kit for Firebase is a powerful project template that combines React, Relay, and GraphQL with serverless infrastructure from Google Cloud. It provides a solid foundation and design patterns for building modern web applications. With features such as Material UI integration, Passport.js authentication, and PostgreSQL database support, this kit offers a comprehensive solution for scalable and efficient development.