React Firebase Template

An unoficial firebase template developed to help the starter developers.

This project was bootstrapped with Create React App.

Usage

Access your terminal and:

• git clone https://github.com/GiovaniBiagi/react-firebase-template;
• cd react-firebase-template;
• yarn or npm i;
• yarn start or npm 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).

Components

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 the unform 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 an Material-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 the onAuthStateChanged() function provided by the firebase.auth() object that observes it ensuring that it is not in an intermediate state (such as initialization) when identifying the current user.

Layouts

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.

Services

Responsible for storing service settings external to the application.

• api.js - Basic configurations of the axios 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.

Views

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 the firebaseFunctions.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.

App.js

File that contains the external routes of the application. E.g: Login, ResetPassword and Register.

global.css

Contains the global style of the application.

Próximos passos

Next steps:

• Add the test suit using JEST.

License

This app is open source software licensed as MIT.