# Project export: HomeBase This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: CruzHacks 2024 - Tagline: A comprehensive resource tool for community members to come together to end homelessness. - Devpost: https://devpost.com/software/resource-radar - GitHub: https://github.com/Namrata-Keskar/CruzHacks2024 - Demo: https://endinghomelessness.us/ - Team: 4 GitHub contributor(s) — Namrata-Keskar (51 commits), anusha (10 commits), dishitaj (9 commits), Nell Brodkin (8 commits) ## Devpost submission (written by the team) ### Inspiration Homelessness is one of the greatest issues of our time. CA hosts half of the unsheltered population in the United States. In the Bay Area alone, every night 38,000 people sleep on the streets. The city of Santa Cruz, has the highest unhoused population per capita in California. We wanted to address the root problems: lack of centralization of resources and a lack of updated information about these resources. Currently, people who need help must dig through complicated websites for each and every service online. They will check hours of operation, travel to the location, only to find out that the information is outdated! This is exactly what we're solving with HomeBase. What is HomeBase? HomeBase is a comprehensive resource tool for community members to access services spanning hot meals, shelter, and medical and mental health help. Each service can be located on a map, so users can find the nearest service to them. We know that folks may have lack access to transportation, so we prioritized this map view. Furthermore, each service is filtered by date so we can see the present services first in the list view. Our most unique and important feature is how the*service providers* (shelters, food pantries, etc) can sign up, log in, post their events, edit them, and update the events live. The days of outdated information are over! How we built HomeBase We used Firebase for our backend and deployment, ReactJS to build our frontend, and the Google Maps API. Our goal is to eventually serve thousands of people, so we focused on scalability. We persistently ensured that our data is stored dynamically through implementing a complex and scalable database on Firebase. Instead of hardcoding categories of food, medical, and housing, we have a dynamic schema which allows us to easily add hygiene, veteran, and mental health services in the future. Instead of hardcoding our values for each service, our dynamic database allows users to truly update services live. We also harnessed the Google Maps API to present the services on a map on the site. Challenges Our team was committed to modularity and efficiency. We created over twenty GitHub branches, so we could work simultaneously. So, we did run into some merge conflicts and complications, and are very grateful to the mentor table's support for helping us debug. Half of our team had to learn Firebase and ReactJS for the first time, so while it was initially very frustrating to learn new skills, our team seamlessly worked together and were able to learn so many new skills while building an impactful product. Accomplishments We are very proud of our efficient and scalable backend implementation. We were able to allow users to dynamically add and update events, which solves the pertinent root issue of outdated information in the current world. We initially planned to only be present a list view, but we were able to manage our time well enough that we could also implement a map view. We are proud of our persistence and time management skills. ### What we learned We learned how to implement Google APIs . Half of our team did not have experience with ReactJS and Firebase. We also learned how to use Figma for the first time which helped properly plan our design. Planning our design and allocating tasks for a complex project in an efficient way was very instrumental to the completion of our project. Our team really bonded over the delirious late night coding and debugging sessions. Next Steps In the next phase of HomeBase, our focus is on scaling geographically and expanding our features. We aim to connect homeless service providers and people in need nationwide and build a strong digital supportive community. We want to expand the database to include more services beyond the food, medical, and housing. We hope HomeBase continues to be a valuable resource in bridging the gap between those in need and service providers to end homelessness one connection at time. ## README (from the GitHub repository) # HomeBase For more information visit [HomeBase Devpost](https://devpost.com/software/resource-radar). ## Inspiration **Homelessness is one of the greatest issues of our time.** CA hosts half of the unsheltered population in the United States. In the Bay Area alone, every night 38,000 people sleep on the streets. The city of Santa Cruz, has the highest unhoused population per capita in California. We wanted to address the root problems: **lack of centralization of resources and a lack of updated information about these resources.** Currently, people who need help must dig through complicated websites for each and every service online. They will check hours of operation, travel to the location, only to find out that the information is outdated! This is exactly what we're solving with HomeBase. ## What HomeBase does **HomeBase is a comprehensive resource tool for community members to access services spanning hot meals, shelter, and medical and mental health help.** Each service can be located on a **map**, so users can find the nearest service to them. We know that folks may have lack access to transportation, so we prioritized this map view. Furthermore, each service is filtered by date so we can see the present services first in the list view. Our most unique and important feature is how the**service providers** (shelters, food pantries, etc) can sign up, log in, post their events, edit them, and update the events live. The days of outdated information are over! ## How we built HomeBase We used Firebase for our backend and deployment, ReactJS to build our frontend, and the Google Maps API. Our goal is to eventually serve thousands of people, so we focused on **scalability**. We persistently ensured that our data is stored dynamically through implementing a complex and scalable database on Firebase. Instead of hardcoding categories of food, medical, and housing, we have a **dynamic schema** which allows us to easily add hygiene, veteran, and mental health services in the future. Instead of hardcoding our values for each service, our dynamic database allows users to truly update services live. We also harnessed the Google Maps API to present the services on a map on the site. ## Challenges we ran into Our team was committed to modularity and efficiency. We created over twenty GitHub branches, so we could work simultaneously. So, we did run into some merge conflicts and complications, and are very grateful to the mentor table's support for helping us debug. Half of our team had to learn Firebase and ReactJS for the first time, so while it was initially very frustrating to learn new skills, our team seamlessly worked together and were able to learn so many new skills while building an impactful product. ## Accomplishments that we're proud of We are very proud of our efficient and scalable backend implementation. We were able to allow users to dynamically add and update events, which solves the pertinent root issue of outdated information in the current world. We initially planned to only be present a list view, but we were able to manage our time well enough that we could also implement a map view. We are proud of our persistence and time management skills. ## What we learned We learned how to implement Google APIs . Half of our team did not have experience with ReactJS and Firebase. We also learned how to use Figma for the first time which helped properly plan our design. Planning our design and allocating tasks for a complex project in an efficient way was very instrumental to the completion of our project. Our team really bonded over the delirious late night coding and debugging sessions. ## What's next for HomeBase In the next phase of HomeBase, our focus is on scaling geographically and expanding our features. We aim to connect homeless service providers and people in need nationwide and build a strong digital supportive community. We want to expand the database to include more services beyond the food, medical, and housing. We hope HomeBase continues to be a valuable resource in **bridging the gap between those in need and service providers to end homelessness one connection at time.** ## Available Scripts In the project directory, you can run: ### `npm start` Runs the app in the development mode.\ Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will reload when you make changes.\ You may also see any lint errors in the console. ### `npm test` Launches the test runner in the interactive watch mode.\ See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. ### `npm run build` Builds the app for production to the `build` folder.\ It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.\ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. ### `npm run eject` **Note: this is a one-way operation. Once you `eject`, you can't go back!** If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. ## Learn More You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). To learn React, check out the [React documentation](https://reactjs.org/). ### Code Splitting This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) ### Analyzing the Bundle Size This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) ### Making a Progressive Web App This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) ### Advanced Configuration This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) ### Deployment This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) ### `npm run build` fails to minify This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) ## Detected evidence (automated analysis) Indexed codebase: 44 recognized source files, 74 KB. - CSS (language) — detected in the code - Firebase (technology) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code ## Codebase structure (from repository index) ### Files (57 of 57) ``` .firebase/hosting.cHVibGlj.cache .firebase/hosting.YnVpbGQ.cache .firebaserc .gitignore database.rules.json firebase.json firestore.indexes.json firestore.rules functions/.gitignore functions/index.js functions/package.json package.json public/404.html public/index.html public/manifest.json public/robots.txt README.md src/App.css src/App.js src/App.test.js src/AppRouter.js src/Auth.js src/card/SharedCard.css src/card/SharedCard.js src/consumerNav.js src/firebase.js src/index.css src/index.js src/Navbar.css src/pages/AddEvent.css src/pages/AddEvent.js src/pages/Food.css src/pages/Food.js src/pages/Housing.css src/pages/Housing.js src/pages/Landing.css src/pages/Landing.js src/pages/Login.css src/pages/Login.js src/pages/Map.js src/pages/Medical.css src/pages/Medical.js src/pages/MyEvents.css src/pages/MyEvents.js src/pages/Profile.css src/pages/Profile.js src/pages/Register.css src/pages/Register.js src/pages/ServiceLanding.css src/pages/ServiceLanding.js src/popUps/afterEvent.css src/popUps/afterEvent.js src/ProtectedRoute.js src/reportWebVitals.js src/serviceNav.js src/setupTests.js src/UserContext.js ``` ### Dependencies - functions/package.json: firebase-admin@^11.8.0, firebase-functions@^4.3.1, firebase-functions-test@^3.1.0 - package.json: @emotion/react@^11.11.3, @emotion/styled@^11.11.0, @fortawesome/free-solid-svg-icons@^6.5.1, @fortawesome/react-fontawesome@^0.2.0, @mui/material@^5.15.5, @react-google-maps/api@^2.19.2, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, firebase@^10.7.2, node-sass@^7.0.3, react@^18.2.0, react-dom@^18.2.0, react-geocode@^0.2.2, react-router-dom@^6.21.3, react-scripts@5.0.1, react-toastify@^10.0.3, use-places-autocomplete@^4.0.1, web-vitals@^2.1.4 ### Recent commits (newest first) - Update README.md - Update README.md title - Update README.md - fixed service landing styling - Merge pull request #24 from Namrata-Keskar/ui - merged events navbar - Merge pull request #23 from Namrata-Keskar/googleMaps - merged map view - merged in maps; deleted extra sign out in add events - Merge pull request #22 from Namrata-Keskar/placingMaps - Merge pull request #21 from Namrata-Keskar/adding-myevents-page - map filtering and displaying on all three pages - merged my events editing - centered popup text - MyEvents prettier - filtering map based onc ategory - set up deployment - added popup - added blue circles - added maps to each category page ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "nandcruzhacks", "version": "0.1.0", "homepage":".", "private": true, "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@mui/material": "^5.15.5", "@react-google-maps/api": "^2.19.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "firebase": "^10.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-geocode": "^0.2.2", "react-router-dom": "^6.21.3", "react-scripts": "5.0.1", "react-toastify": "^10.0.3", "use-places-autocomplete": "^4.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "node-sass": "^7.0.3" } } ``` ### functions/package.json ``` { "name": "functions", "description": "Cloud Functions for Firebase", "scripts": { "serve": "firebase emulators:start --only functions", "shell": "firebase functions:shell", "start": "npm run shell", "deploy": "firebase deploy --only functions", "logs": "firebase functions:log" }, "engines": { "node": "18" }, "main": "index.js", "dependencies": { "firebase-admin": "^11.8.0", "firebase-functions": "^4.3.1" }, "devDependencies": { "firebase-functions-test": "^3.1.0" }, "private": true } ``` ### src/App.js ```javascript import logo from './logo.svg'; import './App.css'; function App() { return (
{/* logo */}

Edit src/App.js and save to reload.

Learn React
); } export default App; ``` ### src/index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import AppRouter from './AppRouter'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); ``` ### functions/index.js ```javascript /** * Import function triggers from their respective submodules: * * const {onCall} = require("firebase-functions/v2/https"); * const {onDocumentWritten} = require("firebase-functions/v2/firestore"); * * See a full list of supported triggers at https://firebase.google.com/docs/functions */ const {onRequest} = require("firebase-functions/v2/https"); const logger = require("firebase-functions/logger"); // Create and deploy your first functions // https://firebase.google.com/docs/functions/get-started // exports.helloWorld = onRequest((request, response) => { // logger.info("Hello logs!", {structuredData: true}); // response.send("Hello from Firebase!"); // }); ``` ### src/setupTests.js ```javascript // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; ``` ### src/App.test.js ```javascript import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); ``` ### src/reportWebVitals.js ```javascript const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals; ``` ### src/index.css ```css body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } ``` ### src/consumerNav.js ```javascript // Navbar.js import React from 'react'; import { Link } from 'react-router-dom'; import './Navbar.css'; const Navbar = () => { return ( ); } export default Navbar; ``` [35 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]