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
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
5
6- React-query-firebase : is a react package that wraps around react-query to offer us custom hooks for firebase operations
7
8
9- (optional) Tailwind is a utility-first CSS framework
10
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
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
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;
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 {
