Communicating frontend and a database

Small practice created with create-react-app that showcases how the comunication between the frontend (React) and a database (Firebase Realtime Database in this case) through the Firebase API takes place.

You can add movies, fetch the movies list and delete movies on the database.

For the development of the app the following React features and techniques have been implemented:

• React hooks:
  • useState
  • useEffect
  • useCallback (improvement to avoid functions declaration on each component re-render)
• Conditional rendering
• Styling with CSS modules
• Fragments

The native JavaScript Fetch API has been used in order to communicate with the database (for fetching, adding o deleting data).

See working app: Demo communication frontend <-> database

Instructions to start the development environment:

Once the project is downloaded, in the root folder of the project run:

1.Install the necessary dependencies:

npm install

2.Start the local server to view the project in the browser.

npm run start

Notes

Production deployment of the application is done through Netlify's continuous deployment feature.