From eddc78f9eca36f2f27ec4ed776cbaaa1f26eefde Mon Sep 17 00:00:00 2001 From: Arush Mehrotra <43364437+arush-mehrotra@users.noreply.github.com> Date: Sun, 26 Mar 2023 13:16:00 -0400 Subject: [PATCH 1/9] added total indicator tiles --- .../indicatorComponents/TotalCoaches.tsx | 49 +++++++++++++++++++ .../indicatorComponents/TotalParticipants.tsx | 49 +++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 client/src/components/indicatorComponents/TotalCoaches.tsx create mode 100644 client/src/components/indicatorComponents/TotalParticipants.tsx diff --git a/client/src/components/indicatorComponents/TotalCoaches.tsx b/client/src/components/indicatorComponents/TotalCoaches.tsx new file mode 100644 index 00000000..8fe83067 --- /dev/null +++ b/client/src/components/indicatorComponents/TotalCoaches.tsx @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react'; +import { Toolbar } from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import { useData } from '../../util/api'; +import ICity from '../../util/types/city'; +import COLORS from '../../assets/colors'; + +function TotalCoaches() { + const maleData = useData(`cities/indicator/male_coaches`); + const femaleData = useData(`cities/indicator/female_coaches`); + + const maleCoaches = maleData?.data.reduce( + (acc: number, val: number) => acc + val, + 0, + ); + + const femaleCoaches = femaleData?.data.reduce( + (acc: number, val: number) => acc + val, + 0, + ); + + return ( + + + + Total Coaches + + + Total number of BTS Network Coaches + + {maleData !== undefined && femaleData !== undefined && ( + +

+ {maleCoaches + femaleCoaches} +

+ + )} + + + ); +} + +export default TotalCoaches; diff --git a/client/src/components/indicatorComponents/TotalParticipants.tsx b/client/src/components/indicatorComponents/TotalParticipants.tsx new file mode 100644 index 00000000..e32f8711 --- /dev/null +++ b/client/src/components/indicatorComponents/TotalParticipants.tsx @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react'; +import { Toolbar } from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import { useData } from '../../util/api'; +import ICity from '../../util/types/city'; +import COLORS from '../../assets/colors'; + +function TotalParticipants() { + const maleData = useData(`cities/indicator/male_participants`); + const femaleData = useData(`cities/indicator/female_participants`); + + const maleParticipants = maleData?.data.reduce( + (acc: number, val: number) => acc + val, + 0, + ); + + const femaleParticipants = femaleData?.data.reduce( + (acc: number, val: number) => acc + val, + 0, + ); + + return ( + + + + Total Participants + + + Total number of BTS Network youth participants + + {maleData !== undefined && femaleData !== undefined && ( + +

+ {maleParticipants + femaleParticipants} +

+ + )} + + + ); +} + +export default TotalParticipants; From 56083acac12696619cd2984c9f92e06036ea34d9 Mon Sep 17 00:00:00 2001 From: Santiago Garcia Santos Date: Sun, 26 Mar 2023 17:07:45 -0400 Subject: [PATCH 2/9] Basic Structure --- .../src/AdminDashboard/AdminDashboardPage.tsx | 62 ++++++++++++++----- .../src/AdminDashboard/CityDashboardPage.tsx | 32 ++++++++++ .../src/AdminDashboard/UserDashboardPage.tsx | 36 +++++++++++ client/src/App.tsx | 8 ++- 4 files changed, 119 insertions(+), 19 deletions(-) create mode 100644 client/src/AdminDashboard/CityDashboardPage.tsx create mode 100644 client/src/AdminDashboard/UserDashboardPage.tsx diff --git a/client/src/AdminDashboard/AdminDashboardPage.tsx b/client/src/AdminDashboard/AdminDashboardPage.tsx index e5e83841..81ee987d 100644 --- a/client/src/AdminDashboard/AdminDashboardPage.tsx +++ b/client/src/AdminDashboard/AdminDashboardPage.tsx @@ -1,31 +1,61 @@ import React, { useLayoutEffect } from 'react'; -import { Typography, Grid } from '@mui/material'; +import { + Typography, + Grid, + ToggleButtonGroup, + ToggleButton, + Toolbar, + Box, +} from '@mui/material'; import ScreenGrid from '../components/ScreenGrid'; import UserTable from './UserTable'; import InviteUserButton from '../components/buttons/InviteUserButton'; +import CityDashboardPage from './CityDashboardPage'; +import UserDashboardPage from './UserDashboardPage'; /** - * A page only accessible to admins that displays all users in a table and allows - * Admin to delete users from admin and promote users to admin. + * This is the wrapper page that let's the admin swap between managing users and ciites */ function AdminDashboardPage() { + const [manageState, setManageState] = React.useState('city'); + + const handleChange = ( + event: React.MouseEvent, + newValue: string, + ) => { + setManageState(newValue); + }; + useLayoutEffect(() => { document.body.style.backgroundColor = 'white'; }); return ( - - - Welcome to the Admin Dashboard - - - - - -
- -
- - + + + + + Manage Cities + Manage Users + + + + {manageState === 'city' && } + + {manageState === 'user' && } + ); } diff --git a/client/src/AdminDashboard/CityDashboardPage.tsx b/client/src/AdminDashboard/CityDashboardPage.tsx new file mode 100644 index 00000000..5c4217cd --- /dev/null +++ b/client/src/AdminDashboard/CityDashboardPage.tsx @@ -0,0 +1,32 @@ +import React, { useLayoutEffect } from 'react'; +import { Typography, Grid } from '@mui/material'; +import ScreenGrid from '../components/ScreenGrid'; +import UserTable from './UserTable'; +import InviteUserButton from '../components/buttons/InviteUserButton'; + +/** + * M + */ + +function CityDashboardPage() { + useLayoutEffect(() => { + document.body.style.backgroundColor = 'white'; + }); + return ( + + +
+ Put the city table here +
+ + + ); +} + +export default CityDashboardPage; diff --git a/client/src/AdminDashboard/UserDashboardPage.tsx b/client/src/AdminDashboard/UserDashboardPage.tsx new file mode 100644 index 00000000..957db20d --- /dev/null +++ b/client/src/AdminDashboard/UserDashboardPage.tsx @@ -0,0 +1,36 @@ +import React, { useLayoutEffect } from 'react'; +import { Typography, Grid } from '@mui/material'; +import ScreenGrid from '../components/ScreenGrid'; +import UserTable from './UserTable'; +import InviteUserButton from '../components/buttons/InviteUserButton'; + +/** + * A page only accessible to admins that displays all users in a table and allows + * Admin to delete users from admin and promote users to admin. + */ +function UserDashboardPage() { + useLayoutEffect(() => { + document.body.style.backgroundColor = 'white'; + }); + + return ( + + + + + +
+ +
+ + + ); +} + +export default UserDashboardPage; diff --git a/client/src/App.tsx b/client/src/App.tsx index 03ff4fb5..81bf4b0e 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -8,7 +8,6 @@ import theme from './assets/theme'; import { store, persistor } from './util/redux/store'; import NotFoundPage from './NotFound/NotFoundPage'; import HomePage from './Home/HomePage'; -import AdminDashboardPage from './AdminDashboard/AdminDashboardPage'; import { UnauthenticatedRoutesWrapper, ProtectedRoutesWrapper, @@ -25,7 +24,7 @@ import InviteRegisterPage from './Authentication/InviteRegisterPage'; import CityDashboard from './CityDashboard'; import Header from './components/Header'; -import NumberTile from './components/indicatorComponents/Under18'; +import AdminDashboardPage from './AdminDashboard/AdminDashboardPage'; function App() { return ( @@ -66,7 +65,10 @@ function App() { } /> }> - } /> + } + /> {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */} From 868c50d35a0afc4af5b90030c9508f712d6052a9 Mon Sep 17 00:00:00 2001 From: BEW111 Date: Wed, 5 Apr 2023 15:45:10 -0400 Subject: [PATCH 3/9] added city dashboard -> home button --- client/src/CityDashboard.tsx | 18 +++++++++++++++++- .../src/components/widgets/CityNameWidget.tsx | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/client/src/CityDashboard.tsx b/client/src/CityDashboard.tsx index f8bbca5b..24055209 100644 --- a/client/src/CityDashboard.tsx +++ b/client/src/CityDashboard.tsx @@ -3,7 +3,8 @@ import React, { useLayoutEffect } from 'react'; import { Masonry } from '@mui/lab'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import { Typography, Grid, Toolbar } from '@mui/material'; +import { Typography, Grid, Toolbar, Button, Icon } from '@mui/material'; +import { useNavigate } from 'react-router-dom'; import Under18 from './components/indicatorComponents/Under18'; import Poverty from './components/indicatorComponents/Poverty'; import CityNameWidget from './components/widgets/CityNameWidget'; @@ -22,6 +23,13 @@ function CityDashboard() { document.body.style.backgroundColor = 'lightgray'; }); + // TODO: this should navigate to the dashboard for all cities, + // not the home page (once the all cities page exists) + const navigator = useNavigate(); + const onNavigateMainDashboard = () => { + navigator('/home'); + }; + return ( + diff --git a/client/src/components/widgets/CityNameWidget.tsx b/client/src/components/widgets/CityNameWidget.tsx index 020b3913..6661ee8e 100644 --- a/client/src/components/widgets/CityNameWidget.tsx +++ b/client/src/components/widgets/CityNameWidget.tsx @@ -37,7 +37,7 @@ function CityNameWidget({ city }: DefaultWidgetProps) { ]; return ( - + {city} From cd9a9a702e074e1f14f13bfb664a2e339dc31d65 Mon Sep 17 00:00:00 2001 From: Arush Mehrotra <43364437+arush-mehrotra@users.noreply.github.com> Date: Sat, 8 Apr 2023 18:13:10 -0400 Subject: [PATCH 4/9] added total chapters component --- client/src/CityDashboard.tsx | 2 + .../indicatorComponents/TotalChapters.tsx | 48 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 client/src/components/indicatorComponents/TotalChapters.tsx diff --git a/client/src/CityDashboard.tsx b/client/src/CityDashboard.tsx index f8bbca5b..290da8ed 100644 --- a/client/src/CityDashboard.tsx +++ b/client/src/CityDashboard.tsx @@ -10,6 +10,7 @@ import CityNameWidget from './components/widgets/CityNameWidget'; import ParticipantsWidget from './components/widgets/ParticipantsWidget'; import RevenueWidget from './components/widgets/RevenueWidget'; import CoachesWidget from './components/widgets/CoachesWidget'; +import TotalChapters from './components/indicatorComponents/TotalChapters'; const heights = [150, 80, 90, 70, 110, 150, 130, 200, 60, 90, 150, 80, 90, 200]; @@ -42,6 +43,7 @@ function CityDashboard() { + {heights.map((height, ind) => ( add graph here: #{ind + 1} diff --git a/client/src/components/indicatorComponents/TotalChapters.tsx b/client/src/components/indicatorComponents/TotalChapters.tsx new file mode 100644 index 00000000..78319958 --- /dev/null +++ b/client/src/components/indicatorComponents/TotalChapters.tsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from 'react'; +import { Toolbar } from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import { useData } from '../../util/api'; +import COLORS from '../../assets/colors'; + +function TotalChapters() { + const cityData = useData(`cities/all`); + + console.log(cityData); + + let sum = 0; + // eslint-disable-next-line no-plusplus + for (let i = 0; i < cityData?.data.length; i++) { + if ( + cityData?.data[i].isAccredited !== 0 && + cityData?.data[i].isAccredited !== null + ) { + sum += 1; + } + } + + return ( + + + + Total Participants + + + Active Chapters + + {cityData !== undefined && ( + +

{sum}

+ + )} + + + ); +} + +export default TotalChapters; From 3ab664a03c5f45a3b7a661cdb078534882c66b05 Mon Sep 17 00:00:00 2001 From: Arush Mehrotra <43364437+arush-mehrotra@users.noreply.github.com> Date: Sun, 9 Apr 2023 13:59:00 -0400 Subject: [PATCH 5/9] added city dashboard table, just need to link the edit button --- .../src/AdminDashboard/CityDashboardPage.tsx | 70 ++++++++++++++++-- client/src/images/editDashboard.png | Bin 0 -> 579 bytes 2 files changed, 65 insertions(+), 5 deletions(-) create mode 100644 client/src/images/editDashboard.png diff --git a/client/src/AdminDashboard/CityDashboardPage.tsx b/client/src/AdminDashboard/CityDashboardPage.tsx index 5c4217cd..a218fdc5 100644 --- a/client/src/AdminDashboard/CityDashboardPage.tsx +++ b/client/src/AdminDashboard/CityDashboardPage.tsx @@ -1,17 +1,48 @@ -import React, { useLayoutEffect } from 'react'; +import React, { useEffect, useState, useLayoutEffect } from 'react'; import { Typography, Grid } from '@mui/material'; -import ScreenGrid from '../components/ScreenGrid'; -import UserTable from './UserTable'; -import InviteUserButton from '../components/buttons/InviteUserButton'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import { useData } from '../util/api'; +import ICity from '../util/types/city'; +import Edit from '../images/editDashboard.png'; /** * M */ +function createData(name: string) { + return { name }; +} + function CityDashboardPage() { + const [cityList, setCityList] = useState([]); + const [rows, setRows] = useState([]); + useLayoutEffect(() => { document.body.style.backgroundColor = 'white'; }); + const cityData = useData(`cities/all`); + + useEffect(() => { + setCityList(cityData?.data); + }, [cityData]); + + // eslint-disable-next-line no-plusplus + for (let i = 0; i < cityList?.length; i++) { + if (rows.length <= cityList?.length) { + if (cityList[i].isAccredited === true) { + rows.push(`${cityList[i].cityName} (Accredited)`); + } else { + rows.push(cityList[i].cityName); + } + } + } + return (
- Put the city table here + + + + + City Name + Edit + + + + {rows.map((row) => ( + + + {row} + + + edit button + + + ))} + +
+
diff --git a/client/src/images/editDashboard.png b/client/src/images/editDashboard.png new file mode 100644 index 0000000000000000000000000000000000000000..adc798dbcd97cfbcd479a59dc28d992cde16149b GIT binary patch literal 579 zcmV-J0=)f+P){5nym2ISZ#iU^xz4fh%wU1R8-rf?x&&qKFFirCsRHCf(oU`}UprrtKsV zPutneWMXu6V&}rnshv+d_jVrpF4#AE0(WKSX!&_+=Y0A8rRyRsK!-c<96MXSdXXA{ zeK=PqQaUgM=kg*Y17mQmEu>T+3&^#J!@1UwQh{?jU*><6jO`C8`7iov7JFR|awdI| z$weMZ0kWW6+IhA!+c=hkoJs(?)$-6R5KpEY@@;J3=2qZtze*s#?c9tB?Aqr_Ab)Xo z-p2y&+Qf5^4##<;?1Q0qC@IJ_91RVOz5R+oZsBN1V9LEEg&^6~w{SEu!<33!4alvX z56>~agqiQ6A%4LUIO_W)=Uo@o2A0CP`jFmg0!!muAbIHY5OVUKsZ%W+v0C1Ro?K&* zsg3ilmR*$wio#Jzpg0_r0*b^@37}XU$n>Tnba zREeVypjsU50;zI4T7ciK7xgu{g>FipEh6P&|%Ofhus60#t*eSfDB#{QzIBvAK=b RHF^L5002ovPDHLkV1nk_?`!}7 literal 0 HcmV?d00001 From 3951966bc112b0eb1ab1c9474fca0f3413f06698 Mon Sep 17 00:00:00 2001 From: Santiago Garcia Santos Date: Wed, 12 Apr 2023 13:01:14 -0400 Subject: [PATCH 6/9] Fixed to get most recent year not hardcoded --- client/src/CityDashboard.tsx | 25 ++++++--- .../indicatorComponents/Poverty.tsx | 52 +++++++++--------- .../indicatorComponents/Under18.tsx | 54 +++++++++---------- 3 files changed, 67 insertions(+), 64 deletions(-) diff --git a/client/src/CityDashboard.tsx b/client/src/CityDashboard.tsx index f8bbca5b..ce48b1bf 100644 --- a/client/src/CityDashboard.tsx +++ b/client/src/CityDashboard.tsx @@ -31,17 +31,26 @@ function CityDashboard() { - + - - - - - - - + + + + + + + {heights.map((height, ind) => ( add graph here: #{ind + 1} diff --git a/client/src/components/indicatorComponents/Poverty.tsx b/client/src/components/indicatorComponents/Poverty.tsx index e29d593c..a695c89e 100644 --- a/client/src/components/indicatorComponents/Poverty.tsx +++ b/client/src/components/indicatorComponents/Poverty.tsx @@ -12,42 +12,40 @@ type RevenueWidgetProps = { }; function Poverty({ city }: RevenueWidgetProps) { - const [cityList, setCityList] = useState([]); - const [poverty, setPoverty] = useState(new Map()); const cityData = useData(`cities/${city}`); - useEffect(() => { - setCityList(cityData?.data); - setPoverty(cityData?.data.indicators.persons_in_poverty); - }, [cityData]); + if (cityData) { + const povertyList: { [key: number]: number } = + cityData?.data.indicators.persons_in_poverty; - return ( - - - - Poverty - - - Persons in Poverty - - {poverty !== undefined && ( + const povertyValue = + Object.values(povertyList)[Object.values(povertyList).length - 1]; + + return ( + + + + Poverty + + + Number of persons in poverty + - {Object.entries(poverty) - .filter(([year, value]) => year === '2022') - .map(([year, value]) => ( -

- {value} -

- ))} + {Intl.NumberFormat('en-US', { + notation: 'compact', + maximumFractionDigits: 1, + }).format(povertyValue)} - )} - - - ); + + + ); + } + + return ; } export default Poverty; diff --git a/client/src/components/indicatorComponents/Under18.tsx b/client/src/components/indicatorComponents/Under18.tsx index 09880434..da740cc8 100644 --- a/client/src/components/indicatorComponents/Under18.tsx +++ b/client/src/components/indicatorComponents/Under18.tsx @@ -12,44 +12,40 @@ type RevenueWidgetProps = { }; function Under18({ city }: RevenueWidgetProps) { - const [cityList, setCityList] = useState([]); - const [under18s, setUnder18s] = useState(new Map()); - const [poverty, setPoverty] = useState(new Map()); const cityData = useData(`cities/${city}`); - useEffect(() => { - setCityList(cityData?.data); - setUnder18s(cityData?.data.indicators.under18s); - setPoverty(cityData?.data.indicators.persons_in_poverty); - }, [cityData]); + if (cityData) { + const under18sList: { [key: number]: number } = + cityData?.data.indicators.under18s; - return ( - - - - Under 18s - - - Number of persons under the age of 18 - - {under18s !== undefined && ( + const under18sValue = + Object.values(under18sList)[Object.values(under18sList).length - 1]; + + return ( + + + + Under 18s + + + Number of persons under the age of 18 + - {Object.entries(under18s) - .filter(([year, value]) => year === '2022') - .map(([year, value]) => ( -

- {value} -

- ))} + {Intl.NumberFormat('en-US', { + notation: 'compact', + maximumFractionDigits: 1, + }).format(under18sValue)} - )} - - - ); + + + ); + } + + return ; } export default Under18; From aba88f425beb60e868d4a3cb13f49a9cf026ae10 Mon Sep 17 00:00:00 2001 From: annabay04 Date: Wed, 12 Apr 2023 14:54:29 -0400 Subject: [PATCH 7/9] high school grads component --- client/src/CityDashboard.tsx | 10 +--- .../HighSchoolGradsPercent.tsx | 51 +++++++++++++++++++ 2 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 client/src/components/indicatorComponents/HighSchoolGradsPercent.tsx diff --git a/client/src/CityDashboard.tsx b/client/src/CityDashboard.tsx index e1c89175..3437d436 100644 --- a/client/src/CityDashboard.tsx +++ b/client/src/CityDashboard.tsx @@ -12,6 +12,7 @@ import ParticipantsWidget from './components/widgets/ParticipantsWidget'; import RevenueWidget from './components/widgets/RevenueWidget'; import CoachesWidget from './components/widgets/CoachesWidget'; import TotalChapters from './components/indicatorComponents/TotalChapters'; +import HighSchoolGradsPercent from './components/indicatorComponents/HighSchoolGradsPercent'; const heights = [150, 80, 90, 70, 110, 150, 130, 200, 60, 90, 150, 80, 90, 200]; @@ -52,14 +53,6 @@ function CityDashboard() { - - - - - - - - + {heights.map((height, ind) => ( add graph here: #{ind + 1} diff --git a/client/src/components/indicatorComponents/HighSchoolGradsPercent.tsx b/client/src/components/indicatorComponents/HighSchoolGradsPercent.tsx new file mode 100644 index 00000000..9aef37b3 --- /dev/null +++ b/client/src/components/indicatorComponents/HighSchoolGradsPercent.tsx @@ -0,0 +1,51 @@ +import React, { useEffect, useState } from 'react'; +import { Toolbar } from '@mui/material'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import { useData } from '../../util/api'; +import ICity from '../../util/types/city'; +import COLORS from '../../assets/colors'; + +type RevenueWidgetProps = { + city: string; +}; + +function HighSchoolGradsPercent({ city }: RevenueWidgetProps) { + const cityData = useData(`cities/${city}`); + + if (cityData) { + const hsGraduateList: { [key: number]: number } = + cityData?.data.indicators.high_school_graduates; + + const HSGraduateValue = + Object.values(hsGraduateList)[Object.values(hsGraduateList).length - 1]; + + return ( + + + + High School Graduates + + + High school graduate or higher, percent of persons age 25+ + + + {Intl.NumberFormat('en-US', { + notation: 'compact', + maximumFractionDigits: 1, + }).format(HSGraduateValue)} + + + + ); + } + + return ; +} + +export default HighSchoolGradsPercent; From 7a0e8ac12592a5a96425fa19b0b618344b2624aa Mon Sep 17 00:00:00 2001 From: Santiago Garcia Santos Date: Sun, 16 Apr 2023 17:54:59 -0400 Subject: [PATCH 8/9] Update README.md --- README.md | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index f6e50555..3e916891 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,24 @@ -# Boilerplate +# Beat The Streets - Dashboard -This is a simple boilerplate designed to serve as robust template for quickly starting development on a [Typescript](https://www.typescriptlang.org) based [MERN](https://www.mongodb.com/mern-stack) web application. +This is a project for [Beat the Streets](https://beatthestreets.org/) that aggregates and displays statistics and data points related to both current locations and target expansion locations. The goal is to provide an all-in-one platform where administrators can view the performance of individual locations as well as nation-wide impact. Furthermore, the platform will also allow them to view the most pertinent data on potential future locations, allowed them to make more informed decisions as the organisation grows. -## Features +This project was built using the MERN stack. Setup is outlined below. -- Session based authentication with [Passport](https://www.passportjs.org) -- Emailing for account verification and resetting password with [SendGrid](https://sendgrid.com) -- Admin functionality for viewing/deleting/promoting other users -- Clean authentication pages built with [Material UI](https://mui.com) -- In memory database testing with [Jest](https://jestjs.io) and [Supertest](https://www.npmjs.com/package/supertest) -- [AirBnb Typescript styling](https://github.com/airbnb/javascript) with [Prettier](https://prettier.io) and [ESLint](https://eslint.org) -- [Husky](https://typicode.github.io/husky/#/) and [lint-staged](https://github.com/okonet/lint-staged) for checking linting on commits -- [GitHub Actions](https://docs.github.com/en/actions) for ensuring linting + tests pass on pushes +## Setup -## Required tools +### Required tools These are necessary to build and run the project at full functionality - Install [Yarn Package Manager](https://classic.yarnpkg.com/en/docs/install/#mac-stable) - Install [NodeJS](https://nodejs.org/en/download/) -## Recommended tools +### Recommended tools To take full advantage of the linting/formatting, recommend adding the [Prettier](https://prettier.io) and [ESLint](https://eslint.org) VSCode extensions and configuring them as shown [here](https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857#:~:text=Install%20the%20following%20Visual%20Studio%20Code%20extensions) for code highlighting and formatting on save. Skip to the section labeled "Add the following to your VS Code settings.json". To access your settings.json, follow what is linked [here](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file). See [here](https://blog.logrocket.com/using-prettier-eslint-automate-formatting-fixing-javascript/#differences-between-eslint-prettier) for the differences between the two tools and how they work together. Finally, we also recommend downloading the [Live Share](https://visualstudio.microsoft.com/services/live-share/) extension by Microsoft for improved Collaboration. This allows for easy peer programming on one shared repository instance. -## Setup - ### MongoDB The boilerplate uses [MongoDB](https://www.mongodb.com) as the database to store information for authentication. To have this available for use, do the following From 72c8e87677c9b279cedb30c76a529242b3bbfdbd Mon Sep 17 00:00:00 2001 From: Santiago Garcia Santos Date: Sun, 16 Apr 2023 17:58:37 -0400 Subject: [PATCH 9/9] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 3e916891..da3f1969 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Beat The Streets - Dashboard + + This is a project for [Beat the Streets](https://beatthestreets.org/) that aggregates and displays statistics and data points related to both current locations and target expansion locations. The goal is to provide an all-in-one platform where administrators can view the performance of individual locations as well as nation-wide impact. Furthermore, the platform will also allow them to view the most pertinent data on potential future locations, allowed them to make more informed decisions as the organisation grows. This project was built using the MERN stack. Setup is outlined below.