🏗 Sets up React-Router

src/App.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
 import Styled from 'styled-components';
-import Demo from 'components/Demo';
+import Home from 'pages/Home';
+import colors from 'styles/colors';
 import 'App.css';
 
-const Container = Styled.div`
-  background: #bfc;
-  width: fit-content;
-  margin: 1rem auto;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
+const Container = Styled.main`
+  background: ${colors.background};
+  color: ${colors.textColor};
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
 `;
 
 function App() {
   return (
-    <Container className="App">
-      <h1>Hello 👋</h1>
-      <Demo message="React is Dumb," />
+    <Container>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
     </Container>
   );
 }

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -9,7 +10,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/pages/Home.tsx

@@ -0,0 +1,5 @@
+
+
+const Home = (): JSX.Element => <div>Home Page</div>;
+
+export default Home;

src/styles/colors.ts

@@ -0,0 +1,11 @@
+
+const colors = {
+  primary: '#9fef00',
+  textColor: '#ffffff',
+  textColorSecondary: '#a4b1cd',
+  background: '#141d2b',
+  backgroundDarker: '#111927',
+  backgroundLighter: '#1a2332',
+};
+
+export default colors;