1. Set up

.gitignore

@@ -1,5 +1,8 @@
-# Created by https://www.toptal.com/developers/gitignore/api/windows,node,react,git,firebase
-# Edit at https://www.toptal.com/developers/gitignore?templates=windows,node,react,git,firebase
+# Created by https://www.toptal.com/developers/gitignore/api/firebase,windows,react,node,dotenv
+# Edit at https://www.toptal.com/developers/gitignore?templates=firebase,windows,react,node,dotenv
+
+### dotenv ###
+.env
 
 ### Firebase ###
 .idea
@@ -10,21 +13,6 @@
 .runtimeconfig.json
 .firebase/
 
-### Git ###
-# Created by git for backups. To disable backups in Git:
-# $ git config --global mergetool.keepBackup false
-*.orig
-
-# Created by git when using merge tools for conflicts
-*.BACKUP.*
-*.BASE.*
-*.LOCAL.*
-*.REMOTE.*
-*_BACKUP_*.txt
-*_BASE_*.txt
-*_LOCAL_*.txt
-*_REMOTE_*.txt
-
 ### Node ###
 # Logs
 logs
@@ -101,7 +89,6 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
 .env.development.local
 .env.test.local
 .env.production.local
@@ -204,4 +191,4 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# End of https://www.toptal.com/developers/gitignore/api/windows,node,react,git,firebase
+# End of https://www.toptal.com/developers/gitignore/api/firebase,windows,react,node,dotenv

package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "firebase": "^7.18.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -0,0 +1,7 @@
+import React from "react";
+import AppRouter from "./Router";
+function App() {
+  return <AppRouter />;
+}
+
+export default App;

src/components/Router.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { HashRouter as Router, Route, Switch } from "react-router-dom";
+import Home from "../routes/Home";
+import Auth from "../routes/Auth";
+
+const AppRouter = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  return (
+    <Router>
+      <Switch>
+        {isLoggedIn ? (
+          <Route exact path="/">
+            <Home />
+          </Route>
+        ) : (
+          <Route exact path="/">
+            <Auth />
+          </Route>
+        )}
+      </Switch>
+    </Router>
+  );
+};
+
+export default AppRouter;

src/firebase.js

@@ -0,0 +1,12 @@
+import firebase from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_APP_ID,
+};
+
+export default firebase.initializeApp(firebaseConfig);

src/index.js

@@ -1,10 +1,12 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import firebase from "./firebase";
+console.log(firebase);
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
+ReactDOM.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
+  document.getElementById("root")
 );

src/routes/Auth.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Auth = () => {
+  return <div>Auth</div>;
+};
+
+export default Auth;

src/routes/EditProfile.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const EditProfile = () => {
+  return <div>EditProfile</div>;
+};
+
+export default EditProfile;

src/routes/Home.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Home = () => {
+  return <div>Home</div>;
+};
+
+export default Home;

src/routes/Profile.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Profile = () => {
+  return <div>Profile</div>;
+};
+
+export default Profile;