Skip to content

React βš›οΈ starter kit with Firebase πŸ”₯ and Bulma for setting up an admin dashboard - Highly scalable, PWA, Serverless

License

Notifications You must be signed in to change notification settings

CreateThrive/react-firebase-admin

Repository files navigation

React Firebase Admin βš›οΈ πŸš€

ci license: MIT

Boilerplate with React βš›οΈ and Firebase πŸ”₯designed to quickly spin up a fully functional admin dashboard with authentication, authorization, Realtime Database / Firestore, built-in CI/CD, file upload and more. We're using up to date industry standards and next-gen technologies like React (with hooks), redux, bulma, sass, webpack, routing and a serverless architecture.

Boilerplate - Users page


Table of Contents


This project is using a customized version ported into React of the Admin Dashboard Template made by Viktor Kuzhelny.

What is this?

React Firebase Admin is our in-house admin dashboard boilerplate, used in many of our software projects here at CreateThrive. After months of hard work, we decided to make it public and support the open source community.

Why should I use it?

  • This project was bootstrapped with CRA (Create React App), this means it comes with all the good features we all know and love such as built-in scripts, to make our app a PWA (Progressive Web App) and much more!.
  • It is customizable.
  • It uses Firebase.
  • It has all the basic features you want in your app.
  • It is easy to use.

Features

  • Bulma CSS framework (Mobile friendly πŸ”₯)
  • Redux implementation
  • Firebase/Redux implementation
  • Authentication & authorization
  • Pick between Realtime Database and Firestore
  • Create/modify/delete users
  • Automatic email invitation to new users
  • Image uploading
  • Change/Reset Password built into the dasbhoard.
  • User filtering and search
  • Built-in CI (Continous integration)
  • Built-in CD (Continous deployment)
  • PWA ready thanks to CRA and Firebase
  • Multi-tenancy
  • Internationalization (English/Spanish)
  • Ability to choose between Firebase Realtime Database or Firestore

Tech Stack

Core

  • Create React App (β˜… 76.5k) this project was bootstrapped with create react app (see user guide).
  • Bulma (β˜… 38.7k) CSS framework to reduce development time and have a nice UI.
  • Redux (β˜… 52.4k) for in-app state management (see docs).
  • React-redux (β˜… 19k) official react bindings for redux (see docs).
  • Redux-act (β˜… 1.4k) opinionated library to create actions and reducers.
  • Redux-thunk (β˜… 14.1k) redux middleware for asynchronous actions.
  • Redux-persist (β˜… 9.8k) persists store state between sessions.
  • React-redux-toastr (β˜… 703) a toastr message implemented with Redux.
  • React-router (β˜… 39.6k) declarative routing for React.
  • Prop-Types (β˜… 3.4k) typechecking for react component props.
  • Classnames (β˜… 11.9k) a simple javascript utility for conditionally joining classNames together.
  • React-datepicker (β˜… 4.5k) a simple and reusable datepicker component for React.
  • React-table (β˜… 9.6k) hooks for building fast and extendable tables and datagrids for React.
  • React-spinners (β˜… 1.2k) a collection of loading spinner components for React.
  • Firebase for serverless architecture - CDN Hosting, Realtime Database, Authentication, Storage and Cloud Functions (see docs).
  • FirebaseUI-web-react (β˜… 732) social media authentication library.
  • Format.js (β˜… 11.7k) libraries for internationalization (see docs).
  • date-fns (β˜… 22.3k) date utility library (see docs).
  • cross-env (β˜… 4.9k) run scripts that set and use environment variables across platforms (see docs).
  • React Hook Form (β˜… 14.6k) Performant, flexible and extensible forms with easy to use validation.
  • yup (β˜… 11k) schema builder for value parsing and validation.
  • Inquirer (β˜… 12.2k) A collection of common interactive command line user interfaces (see docs).

Unit Testing

Linting

  • ESLint (β˜… 15.9k) configured to follow the coding style of Airbnb.
  • Prettier (β˜… 35.5k) as code formatter.
  • Lint-staged (β˜… 6.5k) run linters on git staged files.

Cloud functions

  • Firebase-admin (β˜… 790) Firebase Admin Node.js SDK.
  • Firebase-functions (β˜… 658) Firebase SDK for Cloud Functions.
  • Typescript (β˜… 61.1k) TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
  • TSlint (β˜… 5.8k) An extensible linter for the TypeScript language.
  • Firebase-function-tools (β˜… 780) a tool for naming and loading our Cloud Functions.
  • Glob (β˜… 6.2k) glob functionality for Node.js.
  • Camelcase (β˜… 423) convert a dash/dot/underscore/space separated string to camelCase.
  • Resize Image (β˜… 372) Firebase Extension to create resized versions of images uploaded to Cloud Storage.

Unit Testing

  • Firebase-functions-test (β˜… 117) unit testing library for Cloud Functions for Firebase.
  • Mocha (β˜… 19.4k) simple, flexible, fun javascript test framework for node.js & the browser.
  • Chai (β˜… 6.8k) BDD / TDD assertion framework for node.js and the browser that can be paired with any testing framework.
  • Chai-as-promised (β˜… 1.4k) Extends Chai with assertions about promises.
  • Ts-node (β˜… 7k) TypeScript execution and REPL for node.js, with source map support.

Prerequisites

You also need to be familiar with HTML, CSS, SASS, JavaScript (ES2015) and React with React Hooks.

Documentation

Demo

For requesting access to the demo site please contact us.

Contributors

We'd like to thank these awesome people who made this whole thing happen:

License

This project is licensed under the MIT license, Copyright (c) 2020 CreateThrive. For more information see LICENSE.md.