Another React Firebase tutorial?

This is probably not the first time you've heard of this combo nether is it the first that yov've heard of it's utility. for the unitiated

React: is a Javascript/Typescript library that simplifies the website building proccess with quick start scripts like

```npx create-react-app my-app --template typescript

typescript

1  to spin up a typescript react template
2
3- Firebase is a "serverless" solution for hosted software as a service backend utilities for most of your web needs ,in this tutorial we'll use firestore ,authentication, cloud functions and their emulator site foor local testing. they even have a hosting solution for static websites like the example we're about to put together
4&nbsp;
5
6- React-query-firebase : is a react package that wraps around react-query to offer us custom hooks for firebase operations
7&nbsp;
8
9- (optional) Tailwind is a utility-first CSS framework
10&nbsp;
11
12We'll be building a simple project manager which simulates a worKplace where employees will identify new prohect ideas and seek approval ,once approved the project will need funding once funded it will need to be marked done after being acconplished  
13
14#Ui setup
15
16for simplicity just clone the starter files for the Ui section

git clone https://github.com/tigawanna/starter-files-for-project-manager.git

typescript

1and run npm i to get dependancies
2
3or
4
5run the script below for startup
6
7`npx create-react-app my-app --template tailwindcss-typescript`
8
9then install our other required depnendancies
10

npm i firebase npm install react-router-dom@6 npm i react-query npm i @react-query-firebase/firestore npm i @react-query-firebase/auth npm i @react-query-firebase/functions

typescript

1
2
3we'll first set-up the routing
4

import React from 'react'; import './App.css'; import { Routes, Route } from "react-router-dom"; import { BrowserRouter } from 'react-router-dom'; import { Toolbar } from './components/Toolbar/Toolbar'; import { Project } from './components/Projects/Project'; import { Home } from './components/Home/Home';

function App() { return (
<div className="h-screen w-screen overflow-x-hidden ">
<BrowserRouter>
<div className="fixed top-[0px] right-1 w-full z-30">
<Toolbar />
</div>
<div className="w-full h-full mt-16 ">
<Routes>
<Route path="/" element={<Home />} /> <Route path="/project" element={<Project />} />
</Routes>
</div>
</BrowserRouter>
</div>
); }

export default App;

typescript

1Toolbar.tsx:

import React from 'react' import { GrHome } from "react-icons/gr"; import { IconContext } from "react-icons/lib"; import { Link } from "react-router-dom"; import { FaUserCircle } from 'react-icons/fa'; interface ToolbarProps {

}

export const Toolbar: React.FC<ToolbarProps> = () => { return (
<div className='w-full bg-slate-500 h-16'>
<IconContext.Provider value={{ size: "25px", className: "table-edit-icons" }} >
<div className='flex flex-grow flex-3'>
<div className='m-1 w-full p-3 bg-slate-800'>
<Link to="/"><GrHome /></Link>
</div>
<div className='m-1 w-full p-3 bg-slate-600'>
<Link to="/project">Project</Link>
</div>
<div className='m-1 w-fit p-3 bg-slate-700'><FaUserCircle/></div>

</div>
</IconContext.Provider>
</div>
); }

typescript

1
2our folder structure should look something like this after adding a component and firebase directory inside the src folder. then creating a directory for Home.tsx and Project.tsx inside the components and firebaseConfig.ts 
3
4
5To setup firebase you/ll first need to visit [the firebase console ](https://console.firebase.google.com/?pli=1) , after the seyup process you'll recieve your own firebaseConfig json object to use below
6 
7firebaseComfig.tsx:

import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore" import { GoogleAuthProvider,getAuth} from "firebase/auth";

const firebaseConfig = { apiKey: "your Api key", authDomain: "your Auth domain", databaseURL: "your databaseUrl", projectId: "your project name", storageBucket: "your storage bucket", messagingSenderId: "your sender id", appId: "your app id" };

const app = initializeApp(firebaseConfig);

export const db = getFirestore(); export const provider = new GoogleAuthProvider(); export const auth = getAuth(app)
```

starter files for the Ui section  
`git clone https://github.com/tigawanna/starter-files-for-project-manager.git
`
a firebase project with firestore,authentication and functions will also need to be created
set up process
and run npm i to get dependancies

project repo link
in part 2 we'll handle authenticating users
setting up firebase emulator for local testing

Another React Firebase tutorial?

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

Another React Firebase tutorial?

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider

More posts

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

🎨 TanStack Start SSR-Friendly Theme Provider