DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Francisco Martin
Francisco Martin

Posted on

Build instagram with React, TypeScript and Firebase. Part: 1

The full code is available here https://github.com/FranciscoJavierMartin/firegram . Disclaimer: The code may not the same that the showed in the article.

Description

Yet Another Instagram Clone. This project is made with the purpose to teach you how to use React, Firebase, integrate with TypeScript and other cool tools that I discover around my learning journey.

Where can I start?

For this project you may start from this point https://dev.to/franciscojaviermartin/setup-your-react-project-with-ci-cd-with-firebase-and-gitlab-1nce, setup a project from scratch or use create-react-app and a project in firebase. That all you need.

Packages installation

The package required are:

  • dotenv
  • firebase
  • node-sass (if you prefer use another thing to style, feel free to use)

Prerequisites

I suppose that you know at least the basics of React and JavaScript. TypeScript is only JavaScript with types, but you can use raw JavaScript if you feel more comfortable. Only ignore the types and interfaces parts.

Let's start to code

Create a .env file at the client folder and fill with your own values provides by firebase

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=

All properties must start with REACT_APP_ in order to work for create react app.

Top comments (1)

Collapse
 
marchingband profile image
Andrew March

πŸ‘πŸ‘πŸ‘

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.