This project is an application skeleton for a typical React project. With Create React App at its core, you can use it to bootstrap your projects and development environment with the same tooling. It comes bundled with Material-UI, Firebase, and React Router.
There’s already a bunch of features included for instant web development gratification.
- Bootstrapped with Create React App, the same tooling works out-of-the-box
- Scaffolding incorporates Google Material Design principles through Material-UI
- Built on top of Firebase with Authentication, Cloud Firestore, Cloud Functions, Storage, and Performance Monitoring working from the start
- Robust routing with React Router including error handling
- Extensive mobile support with full-screen dialogs and react-swipeable-views for tabs
For an exhaustive list you can visit the Features page.
https://phoqe.me/react-material-ui-firebase
The project is up and running after just 4 commands.
The command git clone
is a Git command-line utility which is used to target an existing repository and create a clone, or copy of the target repository. The <directory>
option is the name of a new directory to clone into, you can replace it with your project’s name. The “humanish” part of the source repository is used if no directory is explicitly given (repo
for /path/to/repo.git
and foo
for host.xz:foo/.git
).
git clone https://github.com/Phoqe/react-material-ui-firebase.git <directory>
The command cd
, also known as chdir
(change directory), is a command-line OS shell command used to change the current working directory.
cd <directory>
The command yarn install
is a Yarn command-line utility which is used to install all dependencies for a project. This is most commonly used when you have just checked out code for a project, or when another developer on the project has added a new dependency that you need to pick up.
yarn install
The command yarn start
is another Yarn command-line utility which is used to run the app in development mode. Open http://localhost:3000 to view it in the browser. The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
yarn start
React + Material-UI + Firebase is a boilerplate for your own project. It wouldn’t make sense if you couldn’t customize it to the core.
Changing your project’s name can be tedious sometimes as it often involves changing the name of both files and directories along with a ton of hard-coded values. With this template, you can change your project’s name by modifying 4 files:
- public/
- manifest.json
name
short_name
- manifest.json
- .env
REACT_APP_NAME
- package.json
name
homepage
The command git remote
is another Git command-line utility which is used to manage the set of repositories (“remotes”) whose branches you track. The options rm origin
is used to remove the remote named origin
. All remote-tracking branches and configuration settings for the remote are removed.
git remote rm origin
The options add origin
adds a remote named origin
for the repository at <url>
.
git remote add origin <url>
The options add upstream
adds a remote named upstream
for the repository at https://github.com/Phoqe/react-material-ui-firebase.git
.
git remote add upstream https://github.com/Phoqe/react-material-ui-firebase.git
The command git push
is yet another Git command-line utility which is used to update remote refs using local refs, while sending objects necessary to complete the given refs.
git push -u origin master
The command npm install
is an npm command-line utility which is used to install the dependencies in the local node_modules
folder. In global mode (i.e., with -g
or --global
appended to the command), it installs the current package context as a global package. The Firebase CLI provides a variety of tools for managing, viewing, and deploying to Firebase projects.
npm install -g firebase-tools
The command firebase login
is a Firebase command-line utility which is used to sign into Firebase using your Google account and connects your local machine to Firebase and grants you access to your Firebase projects.
firebase login
The command firebase list
is another Firebase command-line utility which is used to print a list of all of your Firebase projects. Use it to test that authentication worked (and to list all of your Firebase projects), the displayed list should be the same as the Firebase projects listed in the Firebase console.
firebase list
The command firebase init
is yet another Firebase command-line utility which is used to set up a new Firebase project in the current directory. This command will create a firebase.json
configuration file in the current directory.
firebase init
The command firebase deploy
is also a Firebase command-line utility which is used to deploy code and assets from your project directory to your Firebase project.
firebase deploy --only firestore:rules,storage,functions
The maintainers use JetBrains’ tools to maintain and develop new features for the project. Their Open Source Support Program gives us the ability to use their tools for free to improve upon this project.
BrowserStack is being used for its powerful suite of testing tools. With it we can test the project on multiple devices and browsers in real-time.
React + Material-UI + Firebase is open-source software licensed as MIT.