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/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/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 deleted file mode 100644 index 32d55a9..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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 -

- - ) -} - -export default App 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/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..7e57a32 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,14 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.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 new file mode 100644 index 0000000..1fa907d --- /dev/null +++ b/src/pages/index/App.tsx @@ -0,0 +1,16 @@ +function App() { + return ( + <> +
+
+
+

Budget-19

+

Routing Test

+
+
+
+ + ) +} + +export default App diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..2daea27 --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,20 @@ +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: "/", + element: , + errorElement:

404

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

Test Secondary Page

+ + , + }, +]); \ No newline at end of file diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts new file mode 100644 index 0000000..a747275 --- /dev/null +++ b/src/utils/firebase.ts @@ -0,0 +1,22 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; + +// 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