DEV Community

Cover image for My First React App Deployed on Firebase: Dog Facts
Mukund Raghav Sharma (Moko)
Mukund Raghav Sharma (Moko)

Posted on

4

My First React App Deployed on Firebase: Dog Facts

Introduction

After developing and deploying my first Javascript based API that I wrote about here, I decided to create a a simple frontend for the API with React.js. Once the application was complete, I deployed it to firebase: https://dog-facts-2277d.web.app/.

Development

What made development smooth was learning about:

  1. React Components
  2. BEM Naming Convention
  3. Tutorial on CSS Flex Box

Additionally, making use of react-bootstrap's Card component simplified a lot of the styling of the individual facts. Granted this website is incredibly simple, I am still happy with the results:

Image description

The Github repo for this project can be found here

Deployment

Deployment with Firebase was a breeze. I used the Firebase CLI to easily initialize the project and then deploy. What was cool was the integration with Github using Actions i.e. with each push there is an automatic deployment of the new app.

Conclusion

Any feedback would greatly be appreciated!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (3)

Collapse
 
mrsharm profile image
Mukund Raghav Sharma (Moko) •

Thanks! Own, the link seems broken, could you post again? Typescript is definitely on my things to learn.

Collapse
 
diegofranco2001 profile image
DiegoFranco2001 •

Yes, we're developers, but some concepts of UI will be great for any website ;D

Collapse
 
midir99 profile image
midir99 •

Hey bro nice job!

I think that an enhancemente would be that instead of commits for new deployments it would be merge requests to master.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more