An unoficial firebase template developed to help the starter developers.
This project was bootstrapped with Create React App.
Access your terminal and:
git clone https://github.com/GiovaniBiagi/react-firebase-template
;cd react-firebase-template
;yarn
ornpm i
;yarn start
ornpm run start
;
Or if you prefer run the command using the Create React App template:
npx create-react-app <app-name> --template firebase
.
Warning: Before starting the application remember to fill in the .env
file the values that were generated by registering the app in Firebase (https://firebase.google.com/docs/web/setup?hl=pt-br).
The Components
folder is destinated for basic application components. This folder contains some components created to the basic operation of the template, being them:
-
Input
- This input was created using theunform made by Rocketseat
(docs: https://unform.dev/). To use custom inputs from other libs just change the HTML tag<input />
for the desired lib input. The example below demonstrates this switch to anMaterial-ui
: -
Actual format
import React, { useEffect, useRef } from 'react';
import { useField } from '@unform/core';
export default function Input({ name, ...rest }) {
const inputRef = useRef(null);
const { fieldName, defaultValue, registerField, error } = useField(name);
useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: 'value',
});
}, [fieldName, registerField]);
return (
<>
<input ref={inputRef} defaultValue={defaultValue} {...rest} />
{error && <span>{error}</span>}
</>
)
}
- Using Material-ui
import React, { useEffect, useRef } from 'react';
import { useField } from '@unform/core';
import { TextField } from '@material-ui/core';
export default function Input({ name, ...rest }) {
const inputRef = useRef(null);
const { fieldName, defaultValue, registerField, error } = useField(name);
useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: 'value',
});
}, [fieldName, registerField]);
return (
<>
<TextField ref={inputRef} defaultValue={defaultValue} {...rest} />
{error && <span>{error}</span>}
</>
)
}
-
Menu.js
- Created to navigate into the routes system. -
PrivateRoute.js
- Develop to identify if user are logged, this component uses theonAuthStateChanged()
function provided by thefirebase.auth()
object that observes it ensuring that it is not in an intermediate state (such as initialization) when identifying the current user.
The Layouts
directory was created to storage the layouts of the aplication.
Main
- Used as the application main layout, responsible for rendering the routes and internal components of the application after login.
Responsible for storing service settings external to the application.
-
api.js
- Basic configurations of theaxios
lib (docs: https://github.com/axios/axios#axios), used to make HTTP requests. All settings made in these files are available in the lib documentation. -
HttpResponseErrorHandler.js
- Basic HTTP error handling. E.g:
const HttpResponseErrorHandler = (error) => {
switch (error.response?.status) {
case 400:
error.response.statusText = "This data are incorrectly or not exists.";
throw error;
case 503:
error.response.statusText = "The service is temporarily unavailable";
throw error;
}
}
export default HttpResponseErrorHandler;
HttpResponseSuccessHandler.js
- Basic sucessfull HTTP response handling. E.g:
const HttpResponseSuccessHandler = (response) => ({
response,
data: response.data,
});
export default HttpResponseSuccessHandler;
firebase.js
- Contains the basic configurations to use Firebase. This file contains the import of a package essential for the functioning of the template:
import "firebase/auth";
to use another packages (e.g: firebase/firestore
, firebase/storage
) import them into this file.
Store the views of the application.
index.js
- Contains the routes of the views.constants
- Store the constants of the views (e.g: static messages, error codes, etc).validations
- Store files used to validade generical errors.functions
- The functions used in views. An example already created is thefirebaseFunctions.js
file which contains the functions of the firebase.Dashboard
- A view created to demonstrate the use of routes in the application.Home
- The home of application.Login
- The login view.Register
- The register view.ResetPassword
- The reset password view.
File that contains the external routes of the application. E.g: Login, ResetPassword and Register.
Contains the global style of the application.
Next steps:
- Add the test suit using
JEST
.
This app is open source software licensed as MIT.