Over the years, the process a homeless person has to go through to find, locate, and check into a homeless shelter has not necessarily gotten more difficult, but it definitely hasn't gotten any easier. Even after a homeless person goes through that process and fills out a shelter intake form, there is no guarantee that they have a spot at a shelter where they can sleep at night. Even if they do find a shelter to stay at, they have to repeat that process over and over, night after night.
This complex process has led to a rise in people sleeping on the streets, a rise in homeless camps along Minneapolis highways, and people dying from being denied a warm place to sleep at night. One of the fastest growing homeless demographic is youth. Many youth are turning to the streets for a variety of reasons and even using the light rail service in Minneapolis at night to keep warm.
This project hopes to solve and slow down the rapidly growing homeless crisis in Minneapolis. The project is a mobile and web based app intended for homeless people to use as a resource and intended to help streamline the process of checking into a shelter. The short term goal of this app is to get homeless people into a shelter easily and quickly each night. The long term goal of this app is to provide an opportunity for homeless people to rebuild their lives and get off the streets for good.
- Live
- Screenshots
- About this project
- Getting started
- Instructions for setting up Twilio
- Deploying the app
- Technologies used to create the app
- Direction for future development
- Issues
The app is current live at the following URL: https://tcsw-homeless.firebaseapp.com/
This project was a group project I worked on with two other individuals as part of Twin Cities Startup Weekend 2018. Startup Weekend is an event where you have 54 hours to come up with an idea for a startup, form a team, validate the idea by doing user research and talking to customers, create a prototype of the idea, and do a business pitch of that idea to a panel of entrepreneurs at the end of the event. The whole point of startup weekend is not to have a startup company by the end of the weekend. But rather, the point is to better understand the process of what it takes to work with a team to build a startup.
For more information about the event, see http://communities.techstars.com/usa/twincities/startup-weekend/13367.
Whether you are a business person who has an idea for a startup or are a developer just looking to improve your coding skills with building a prototype, I would highly recommend participating in startup weekend at least once. This event has something for everyone. You won't regret it. It is truly an eye opening experience to see the constant challenges, obstacles, and grind of the startup world.
For me, I participated in this event as the lead developer on my team and was the one primarily responsible for building the prototype and user interface of the app. Because of the time constraint (only had 12 hours to build the UI) to get something built for demo purposes, I built the prototype using React. React is a JavaScript user interface framework that Facebook developed for the purposes of building component-based applications. Using React made it very easy to get a working demo app in less than 12 hours.
At the conclusion of startup weekend, our team and app idea ended up winning 1st place. If you have any questions or comments regarding my experience at startup weekend or regarding the app I built, feel free to send me an email at philipstubbs13@gmail.com. As a side note, I'm also looking for developers to help me fully develop and build out the app. So, if you are a developer still reading this and are interested in contributing to this project, let me know.
At the end of Twin Cities Startup Weekend 2018, our team had to pitch our idea to a panel of 3 entrepreneurs. The slides for the pitch are located here: https://docs.google.com/presentation/d/1kuuWJGiohRupLT7kvaxcuI-vByM5n4nbDSzPFsdsHqY/edit?usp=sharing
On the front end side, this project is built using React, which is an open-source JavaScript library developed at Facebook specifically for the task of developing user interfaces. React relies on a component-based architecture where elements of the user interface are broken into small chunks of code called components. To design and build the user interface, I used the Material UI user interface React component library.
On the backend, this project uses Firebase for real-time data storage in a database. It also uses email-based and Google authentication for signing up and logging in users (which is also a part of Firebase). This project also uses node, express, and the Twilio API to create a voice messaging system. The voice messaging system allows homeless people who don't have smart phones to still be able to check into a shelter by calling a specific phone number to reserve a bed at a nearby shelter. Finally, Firebase Hosting is used to deploy and host the app.
When you come to the app, the first thing you need to do is sign up (if you are a new user) and log in to the app. The signup and login process is pretty straightforward and quick. To sign up, you can enter an email and password or sign up using your Google account. Having you log into the app prevents unauthorized people from gaining access to your account if your phone is lost or stolen. It also helps shelters and cities track you by tracking who is using the app.
The My profile page is a basic profile page for you that includes your name and photo for identification purposes. This page helps shelters identify you quickly at check in and provides you with another form of identification if you lose or misplace your primary id. From this page, you can upload a new photo or click I NEED A PLACE TO STAY to see a list of shelters nearby.
The app provides a list of shelters that you can use to quickly look up homeless shelters in Minneapolis. Each shelter listed in the app has information like street address, phone number, website, shelter type, any additonal notes, as well as a map showing the shelter's location. For each participating shelter in the app, you can click REQUEST BED when viewing information for a particular shelter to send your information to that shelter.
In addition to the ability to see a list of shelters, it is also possible to see one map of all the shelters in Minneapolis. This makes it easier for you to see exactly how far you are from certain shelters.
When you are ready to check into a shelter, you go to the Check in page. On the Check in page, there are 2 ways to check into a shelter. If you have a smartphone, you can simply have the homeless shelter scan the QR code that contains your information to check you in from the app. If you don't have a smartphone, you can call the number listed on this page, which will take you through a voice messaging system to check you in. This voice messaging system uses the Twilio API.
Finally, for more information, you can go to the app menu (hamburger menu). The app menu includes a link to the app help page, about page, and report error page for reporting errors within the app. It also includes a link to the delete account page if you decide you no longer want the app and want to permanently delete your app account.
After you clone the repository from GitHub, you can navigate to the project root directory (tcsw-sheltrus). The project directory structure will be set up as follows:
- client: This folder is where all the client-side code/React app lives.
- public: The public folder contains the main index.html file. This HTML file is a template. The file is empty. So, if you open it directly in a browser, you will get an empty page. Rather than placing the HTML code directly in index.html, this site uses a React component-based architecture to create, build, and render UI components to the page.
- src: The src folder is where the React components reside.
- App.js: The App.js file is where the components are imported and rendered, such as the top navigation bar, footer, and various pages.
- index.js: The index.js file is the top level file of the React app. In index.js, the App.js file is imported, and the ReactDOM.render method is used to render App.js to the page.
- components: The Components folder is where the components that are reused across the site are located. Each file represents a separate component. For example, Button.js is the button component that can be reused across the entire app for a consistent look and feel for each button.
- containers: Holds all the pages of the app and the child components within those pages. For example, inside of the containers folder, there is a Profile folder. The Profile folder contains a top-level parent container/page called Profile.js
- App.css and index.css: The external css stylesheets for the app.
- firebase-config.js: contains the Firebase initialization code to connect the app to Firebase.
- sheltr-b2.svg: This is the svg version of the app logo.
- .eslintrc.json: List of rules and their definitions for ESLint.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- package.json: Lists the project dependencies for the client and their version numbers.
- README.md: The README file that came with setting up a create-react-app project.
- yarn.lock: Dependency tree for the project. Lists all the client dependencies and their versions.
- functions: Folder for storing Firebase cloud functions. Currently not in use for anything.
- readme_images: Images used in the project README file.
- .firebaserc: Hidden file that allows you to quickly switch between projects with 'firebase use'.
- .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub when code is committed.
- firebase.json: Firebase configuration file required to deploy the app to Firebase.
- package.json: Lists the project dependencies and their version numbers.
- yarn.lock: Dependency tree for the project. Lists the project dependencies and their versions.
- server.js: Contains the code to set up express and make a post request using the Twilio API to create a voice messaging system.
- README.md: The README file that contains important information about this project.
- make-call.js: Contains the JavaScript code to make a phone call using the Twilio API.
The following section will take you through the steps of setting up this app and getting it running locally on your computer.
If you don't want to set up this project locally and just want to see the deployed app, go to https://tcsw-homeless.firebaseapp.com/.
To set up this app locally on your computer, perform the following steps:
- Clone the repository
- Install Node.js
- Install yarn
- Install the project dependencies
- Start the React development server
The first step is to clone the project repository to a local directory on your computer. To clone the repository, run the following commands:
git clone https://github.com/philipstubbs13/tcsw-sheltrus.git
cd ./tcsw-sheltrusIf you don't already have Node.js installed on your computer, you can install the latest version here.
To be able to install the dependencies and start the app locally, you will need to install yarn. Yarn is a package manager like npm.
To install yarn globally, run the following command:
npm install -g yarn
For more information about yarn and other installation options, see the yarn documentation: https://yarnpkg.com/en/.
Change directory into the client directory and run the following command to install the required client dependencies:
yarn installThe following packages are dependencies to the project.
- @material-ui/core
- @material-ui/icons
- classnames
- create-react-class
- google-map-react
- google-maps-react
- history
- lodash
- firebase
- prop-types
- react
- react-dom
- react-file-input
- react-firebase-file-uploader
- react-router-dom
- react-scripts
This project also uses ESLint, which includes the following dependencies:
- babel-eslint
- eslint
- eslint-config-airbnb
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
Version information for each of these packages is available in the package.json file in the client directory.
After you install the client dependencies, change directory to the project root directory (tcsw-sheltrus) and run
yarn installto install the remaining dependencies:
After performing all of the setup steps in the Getting started section, navigate to the project root directory (tcsw-sheltrus) and run the following command to start the React development server.
yarn start
After the development server has started, a Chrome browser window should open, and you should see the app. If the browser does not automatically open after the server starts, you can verify that the app is working locally on your computer by opening Chrome and going to http://localhost:3000. Note that by default, the development server will try to start up on port 3000. If port 3000 is already in use on your computer, then the development server will use a different port.
Tip: if you are having difficulty starting the React development server, try creating a .env inside of the client directory.
Inside of the .env file, add the following line. Don't forget to also add the .env file to your .gitignore file so that it is not pushed to GitHub when code is committed. This tip helped solve my server start issues, so I thought I would share it.
SKIP_PREFLIGHT_CHECK=trueComing soon...
This site is deployed to Firebase using Firebase Hosting. For more information on hosting with Firebase, see https://firebase.google.com/docs/hosting/. To deploy the app, you will need to build a production version of the app as well as have the Firebase CLI installed.
- If not already installed, install the Firebase CLI globally by running the following command:
npm install -g firebase-toolsThis installs the firebase command globally. To update to the latest version, simply re-run the same command.
- To connect your local machine to your Firebase account and obtain access to the Firebase project, run the following command:
firebase login-
Change directory to the tcsw-sheltrus/client directory.
-
If you have deployed the app before, there will be a build directory inside client. Delete the existing build directory.
-
Run the following command to build a clean, production version of the app.
yarn build
This command creates a directory called build inside of the client directory.
-
Commit changes to git (if not done already).
-
Run the following command to deploy your changes:
firebase deployThis command deploys the project to https://tcsw-homeless.firebaseapp.com/ on firebase.
- Firebase Hosting (https://firebase.google.com/docs/hosting/)
- Firebase Authentication (https://firebase.google.com/docs/auth/)
- Firebase Realtime Database (https://firebase.google.com/docs/database/)
- Twilio API (https://www.twilio.com/docs/usage/api)
- Express (https://expressjs.com/)
- HTML5
- CSS
- Javascript (ES6)
- React (https://reactjs.org/)
- Material UI (https://material-ui.com/)
- ESLint
- Lodash
- Google Maps
Source code will be developed over time to handle bug fixes and incorporate new features
The following is a list of potential enhancements for future code development.
- Add functionality that allows a user to actually submit shelter intake form to shelter directly from the app.
- Add additional forms of authentication like phone number, Facebook, Twitter, etc.
- Add a resources page that provides contact information for various resources like food shelves, soup kitchens, mental health facilities, health clinics, etc.
- Migrate app from Firebase to AWS.
If you find an issue while using the site or have a request, log the issue or request here. These issues will be addressed in a future code update.