From 9b67baca33c89830c3bffa52363b0e10117bba9b Mon Sep 17 00:00:00 2001 From: Robert Lucas <100799838+Robert-M-Lucas@users.noreply.github.com> Date: Fri, 22 Mar 2024 14:16:29 +0000 Subject: [PATCH 1/3] Added Bootstrap, Router and test pages --- package-lock.json | 39 +++++++++++++++++++++++++++ package.json | 1 + src/App.css | 42 ----------------------------- src/App.tsx | 36 +++++-------------------- src/firebase.ts | 21 +++++++++++++++ src/index.css | 68 ----------------------------------------------- src/main.tsx | 12 +++++---- src/router.tsx | 14 ++++++++++ 8 files changed, 89 insertions(+), 144 deletions(-) delete mode 100644 src/App.css create mode 100644 src/firebase.ts delete mode 100644 src/index.css create mode 100644 src/router.tsx diff --git a/package-lock.json b/package-lock.json index a75b2d3..d29b6c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "firebase": "^10.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "sass": "^1.72.0" }, "devDependencies": { @@ -1158,6 +1159,14 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.13.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz", @@ -3190,6 +3199,36 @@ "react": "^18.2.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/package.json b/package.json index 3bb87db..4d4cdaa 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "firebase": "^10.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "sass": "^1.72.0" }, "devDependencies": { diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index 32d55a9..18456c3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,12 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - function App() { - const [count, setCount] = useState(0) - return ( - <> -
- - Vite logo - - - React logo - -
-

Budget-19

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- + <> +
+
+

Budget-19

+
+
+ ) } diff --git a/src/firebase.ts b/src/firebase.ts new file mode 100644 index 0000000..7c48ee2 --- /dev/null +++ b/src/firebase.ts @@ -0,0 +1,21 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyD70wqk2KYojBO_fAEiWEhDbiz4lo8vw2s", + authDomain: "budget-19.firebaseapp.com", + projectId: "budget-19", + storageBucket: "budget-19.appspot.com", + messagingSenderId: "208067569050", + appId: "1:208067569050:web:eca0ff615592577d6fc623", + measurementId: "G-QF0Z0VGCJ0" +}; + +// Initialize Firebase +export const app = initializeApp(firebaseConfig); +export const analytics = getAnalytics(app); \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 3d7150d..0d78e41 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' +import 'bootstrap/dist/css/bootstrap.css' +import './firebase.ts' +import {RouterProvider} from "react-router-dom"; +import {router} from "./router.tsx"; ReactDOM.createRoot(document.getElementById('root')!).render( - - - , + + + , ) diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..56e617a --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,14 @@ +import {createBrowserRouter} from "react-router-dom"; +import App from "./App.tsx"; + +export const router = createBrowserRouter([ + { + path: "/", + element: , + errorElement:

404

+ }, + { + path: "/test", + element:

Test Secondary Page

, + }, +]); \ No newline at end of file From 5f1724013dbb702e945c261b21b1095d3f9f0953 Mon Sep 17 00:00:00 2001 From: Robert Lucas <100799838+Robert-M-Lucas@users.noreply.github.com> Date: Fri, 22 Mar 2024 14:30:47 +0000 Subject: [PATCH 2/3] Further layout changes --- index.html | 2 +- src/components/ExampleComponent.tsx | 5 +++++ src/main.tsx | 2 +- src/{ => pages/index}/App.tsx | 0 src/router.tsx | 8 ++++++-- src/{ => utils}/firebase.ts | 3 ++- 6 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/components/ExampleComponent.tsx rename src/{ => pages/index}/App.tsx (100%) rename src/{ => utils}/firebase.ts (92%) diff --git a/index.html b/index.html index e4b78ea..6835719 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Budget-19
diff --git a/src/components/ExampleComponent.tsx b/src/components/ExampleComponent.tsx new file mode 100644 index 0000000..8eb1236 --- /dev/null +++ b/src/components/ExampleComponent.tsx @@ -0,0 +1,5 @@ +function ExampleComponent() { + return

Example

+} + +export default ExampleComponent; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 0d78e41..527c583 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import 'bootstrap/dist/css/bootstrap.css' -import './firebase.ts' +import './utils/firebase.ts' import {RouterProvider} from "react-router-dom"; import {router} from "./router.tsx"; diff --git a/src/App.tsx b/src/pages/index/App.tsx similarity index 100% rename from src/App.tsx rename to src/pages/index/App.tsx diff --git a/src/router.tsx b/src/router.tsx index 56e617a..b100497 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,5 +1,6 @@ import {createBrowserRouter} from "react-router-dom"; -import App from "./App.tsx"; +import App from "./pages/index/App.tsx"; +import ExampleComponent from "./components/ExampleComponent.tsx"; export const router = createBrowserRouter([ { @@ -9,6 +10,9 @@ export const router = createBrowserRouter([ }, { path: "/test", - element:

Test Secondary Page

, + element: <> +

Test Secondary Page

+ + , }, ]); \ No newline at end of file diff --git a/src/firebase.ts b/src/utils/firebase.ts similarity index 92% rename from src/firebase.ts rename to src/utils/firebase.ts index 7c48ee2..a747275 100644 --- a/src/firebase.ts +++ b/src/utils/firebase.ts @@ -1,7 +1,8 @@ // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; -// TODO: Add SDKs for Firebase products that you want to use + +// Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration From a88c0a1295724bb7ab68df9a13c8bdec3650a202 Mon Sep 17 00:00:00 2001 From: Robert Lucas <100799838+Robert-M-Lucas@users.noreply.github.com> Date: Fri, 22 Mar 2024 17:13:01 +0000 Subject: [PATCH 3/3] Documentation and README.md updates --- .gitignore | 2 ++ README.md | 53 ++++++++++++++++++++++++++++++++++++++++- src/main.tsx | 4 +++- src/pages/index/App.tsx | 5 +++- src/router.tsx | 2 ++ 5 files changed, 63 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index a547bf3..45a627a 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +.firebase \ No newline at end of file diff --git a/README.md b/README.md index 7892b68..9b82ae4 100644 --- a/README.md +++ b/README.md @@ -1 +1,52 @@ -# Budget-19 \ No newline at end of file +# Budget-19 + +## Starting Development + +When making changes, create a branch with the name `dev-[Jira issue name]` +e.g. `dev-SCRUM-7` and work on that. See [deployment](#deployment) for +instructions on how to deploy your changes. + +## Files + +Initial page setup (e.g. title): `/index.html` + +Router config ([docs](https://reactrouter.com/en/main)): `/src/router.tsx` + +## Commands + +Serve webpage locally: `npm run dev` + +### Firebase + +Install Firebase tools: `npm install -g firebase-tools` + +Login to Firebase: `firebase login` + +Configure Firebase settings: `firebase init` +> :warning: Overwrites current settings! + +Configure Firebase emulator(s): `firebase init emulators` + +Start Firebase emulator(s): `firebase emulators:start` + +## Deployment + +> :warning: Do not use `firebase deploy` to deploy! This will circumvent GitHub! + +### Test Deployment + +Creating a test deployment to Firebase: +``` +npm run build +firebase hosting:channel:deploy [Test Deployment Name] +``` + +### Production Deployment + +Making a [pull request](https://github.com/Robert-M-Lucas/budget-19/compare) +will automatically create a test deployment to Firebase (i.e. not +overwrite the production app). You should see a message below your new pull +request notifying you that your changes are being deployed. Click on +the link shown when this is complete to view your changes. The pull +request can them be merged into the `master` branch from which it'll +be automatically deployed to https://budget-19.web.app/. \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 527c583..7e57a32 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import 'bootstrap/dist/css/bootstrap.css' import './utils/firebase.ts' import {RouterProvider} from "react-router-dom"; import {router} from "./router.tsx"; +// ! Potentially temporary - UI Styling tbd +import 'bootstrap/dist/css/bootstrap.css' + ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/index/App.tsx b/src/pages/index/App.tsx index 18456c3..1fa907d 100644 --- a/src/pages/index/App.tsx +++ b/src/pages/index/App.tsx @@ -3,7 +3,10 @@ function App() { <>
-

Budget-19

+
+

Budget-19

+

Routing Test

+
diff --git a/src/router.tsx b/src/router.tsx index b100497..2daea27 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -2,6 +2,8 @@ import {createBrowserRouter} from "react-router-dom"; import App from "./pages/index/App.tsx"; import ExampleComponent from "./components/ExampleComponent.tsx"; +// ? Routing - see https://reactrouter.com/en/main + export const router = createBrowserRouter([ { path: "/",