diff --git a/README.md b/README.md
index c72bcf0..a498074 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,27 @@
# snowballtools
+
+- Clone the `snowballtools` repo
+
+ ```bash
+ git clone git@github.com:deep-stack/snowballtools.git
+ ```
+
+- In root of the repo, install depedencies
+
+ ```bash
+ yarn
+ ```
+
+- Change directory to `packages/frontend`
+
+ ```bash
+ cd packages/frontend
+ ```
+
+- Start the React application
+
+ ```bash
+ yarn start
+ ```
+
+- The React application will be running in `http://localhost:3000/`
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 78989f6..0f29f66 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -12,6 +12,7 @@
"@types/react-dom": "^18.2.17",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.20.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html
index aa069f2..e65acb3 100644
--- a/packages/frontend/public/index.html
+++ b/packages/frontend/public/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 2e929cf..199945f 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -1,29 +1,19 @@
import React from 'react';
-import logo from './logo.svg';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import Dashboard from './pages/dashboard';
+import { dashboardRoutes } from './pages/dashboard/routes';
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: ,
+ children: dashboardRoutes,
+ },
+]);
function App() {
- return (
-
- );
+ return ;
}
export default App;
diff --git a/packages/frontend/src/components/dashboard/Sidebar.tsx b/packages/frontend/src/components/dashboard/Sidebar.tsx
new file mode 100644
index 0000000..cde3186
--- /dev/null
+++ b/packages/frontend/src/components/dashboard/Sidebar.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const Sidebar = () => {
+ return (
+
+
+
+
Snowball
+
+
Organization
+
+ (isActive ? 'text-blue-500' : '')}
+ >
+ Projects
+
+
+
+ (isActive ? 'text-blue-500' : '')}
+ >
+ Settings
+
+
+
+
+
Documentation
+
Support
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/packages/frontend/src/pages/dashboard/CreateProject.tsx b/packages/frontend/src/pages/dashboard/CreateProject.tsx
new file mode 100644
index 0000000..36f2f49
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/CreateProject.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CreateProject = () => {
+ return (
+ Create new project page
+ );
+};
+
+export default CreateProject;
diff --git a/packages/frontend/src/pages/dashboard/Project.tsx b/packages/frontend/src/pages/dashboard/Project.tsx
new file mode 100644
index 0000000..0b98f12
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/Project.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const Project = () => {
+ const { id } = useParams();
+
+ return Project page: {id}
;
+};
+
+export default Project;
diff --git a/packages/frontend/src/pages/dashboard/Projects.tsx b/packages/frontend/src/pages/dashboard/Projects.tsx
new file mode 100644
index 0000000..5a69975
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/Projects.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Projects = () => {
+ return Projects
;
+};
+
+export default Projects;
diff --git a/packages/frontend/src/pages/dashboard/Settings.tsx b/packages/frontend/src/pages/dashboard/Settings.tsx
new file mode 100644
index 0000000..cf834b7
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/Settings.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Settings = () => {
+ return Settings page
;
+};
+
+export default Settings;
diff --git a/packages/frontend/src/pages/dashboard/index.tsx b/packages/frontend/src/pages/dashboard/index.tsx
new file mode 100644
index 0000000..f522e17
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+import Sidebar from '../../components/dashboard/Sidebar';
+
+const Dashboard = () => {
+ return (
+
+ );
+};
+
+export default Dashboard;
diff --git a/packages/frontend/src/pages/dashboard/routes.tsx b/packages/frontend/src/pages/dashboard/routes.tsx
new file mode 100644
index 0000000..1533321
--- /dev/null
+++ b/packages/frontend/src/pages/dashboard/routes.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Projects from './Projects';
+import Project from './Project';
+import Settings from './Settings';
+import CreateProject from './CreateProject';
+
+export const dashboardRoutes = [
+ {
+ path: '/',
+ element: ,
+ },
+ {
+ path: 'settings',
+ element: ,
+ },
+ {
+ path: ':id',
+ element: ,
+ },
+ {
+ path: 'create',
+ element: ,
+ },
+];
diff --git a/yarn.lock b/yarn.lock
index 685fa29..d2096e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2014,6 +2014,11 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
+"@remix-run/router@1.13.1":
+ version "1.13.1"
+ resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e"
+ integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==
+
"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz"
@@ -10140,6 +10145,21 @@ react-refresh@^0.11.0:
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+react-router-dom@^6.20.1:
+ version "6.20.1"
+ resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984"
+ integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==
+ dependencies:
+ "@remix-run/router" "1.13.1"
+ react-router "6.20.1"
+
+react-router@6.20.1:
+ version "6.20.1"
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef"
+ integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==
+ dependencies:
+ "@remix-run/router" "1.13.1"
+
react-scripts@5.0.1:
version "5.0.1"
resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"