Setup base route with base firebase call

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+config.js

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "firebase": "^9.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0"

src/Route/Score/Score.jsx → src/Route/ChartScore/ChartScore.jsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
-import './Score.css';
+import './ChartScore.css';
 
 function Score() {
   const { chartId } = useParams(); 

src/Route/Charts/Charts.css

@@ -0,0 +1,7 @@
+.songList {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 10px;
+  margin: 0;
+}

src/Route/Charts/Charts.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { json, Link } from 'react-router-dom';
+import './Charts.css';
+import Chart from './../../Components/chart/chart';
+import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
+
+function Charts() {
+  const [charts, setCharts] = useState([]);
+
+  const getCharts = async () => {
+    const db = getFirestore();
+    const chartRef = collection(db, "Chart");
+    const snapshot = await getDocs(chartRef);
+    const charts = snapshot.docs.map(doc => doc.data());
+
+    return charts;
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getCharts();
+      setCharts(data);
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <div className="App">
+      <div className="songList">
+        {charts.map((item, index) => {
+          return (
+            <Link to={`/score/${item.name}`} key={index}>
+              <Chart key={index} data={item} />
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default Charts;

src/Route/Index/Index.css

@@ -1,7 +0,0 @@
-.songList {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  padding: 10px;
-  margin: 0;
-}

src/Route/Index/Index.jsx

@@ -1,22 +1,11 @@
-import { Link } from 'react-router-dom';
 import './Index.css';
-import charts from './../../charts.json';
-import Chart from './../../Components/chart/chart';
 
-function App() {
+function Index() {
   return (
     <div className="App">
-      <div className="songList">
-        {charts.map((item, index) => {
-          return (
-            <Link to={`/score/${item.name}`} key={index}>
-              <Chart key={index} data={item} />
-            </Link>
-          )
-        })}
-      </div>
-    </div>
+        <p>Hello world</p>
+    </div>      
   );
 }
 
-export default App;
+export default Index;

src/Route/NotFound/NotFound.jsx

@@ -0,0 +1,11 @@
+import './NotFound.css';
+
+function NotFound() {
+    return (
+        <div className="App">
+             <p>404</p>
+        </div>      
+    );
+}
+
+export default NotFound;

src/config.example.js

@@ -0,0 +1,13 @@
+const config = {
+    firebase: {
+        apiKey: "",
+        authDomain: "",
+        projectId: "",
+        storageBucket: "",
+        messagingSenderId: "",
+        appId: "",
+        measurementId: ""
+    }
+}
+
+export default config

src/main.jsx

@@ -1,17 +1,27 @@
+// React
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+
+// Router
 import {
   createBrowserRouter,
   RouterProvider
 } from "react-router-dom";
 import Router from './router.jsx';
-
 const router = createBrowserRouter(Router);
 
+// Firebase
+import { initializeApp } from "firebase/app";
+import Config from './config.js';
+
+const firebaseConfig = Config.firebase;
+const app = initializeApp(firebaseConfig);
+
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
   </React.StrictMode>
-);
+);

src/router.jsx

@@ -1,15 +1,25 @@
-import App from './Route/Index/Index';
-import Score from './Route/Score/Score';
+import Index from './Route/Index/Index';
+import Charts from './Route/Charts/Charts';
+import ChartScore from './Route/ChartScore/ChartScore';
+import NotFound from './Route/NotFound/NotFound';
 
 const router = [
     {
       path: "/",
-      element: <App />,
+      element: <Index />,
     },
     {
-      path: "/score/:chartId",
-      element: <Score />,
-    }
+      path: "/charts",
+      element: <Charts />,
+    },
+    {
+      path: "/charts/:chartId",
+      element: <ChartScore />,
+    },
+    {
+      path: "*",
+      element: <NotFound />,
+    },
 ]
 
 export default router;