CodeFellows 301 level final project for creating a single page web app that helps users develop their emergency preparedness plan
This plan was created by Joe McClenahan, Phillip Nguyen, Rick Stoner and Greg Magdsick
Technologies used: Firebase, JavaScript, jQuery, handlebars, page.js, Node.js, nodemailer, socket.io
Logo created at logomakr.com http://logomakr.com/1AF6l5 Flame graphic by Freepik and Solid graphic by Sarfraz Shoukat and People graphic by Picol from Flaticon are licensed under CC BY 3.0. Made with Logo Maker
The scope of this project is outlined in the user stories below: MVP: As a user I want to: - be able to login securely to the website so that I have peace of mind while using the site. - be able to taken through the process of creating my emergency preparedness plan so that I don’t get frustrated putting the plan together. - be able to send myself an email of my current plan so I can reference my plan anywhere I access my email. - have my plan saved on the website, so I can edit it or retrieve it later - have a website that has links to other sites for more information so I can learn more about disaster preparedness when I want to. - have a website that has a clean, easy to use interface so I’m not frustrated using the website. - be able to use all the functionality of the website regardless of what device I use so that it’s easy to create or update my disaster plan.
As a developer I want to : - utilize client-side routing so that we are maximizing performance - utilize OOP techniques so that we streamline development of the app. - Implement functional programming so that we increase efficiency and minimize errors in code. - use an external database to store all user’s data so that their data is available from any computer/device. - implement a secure login system so that our users feel safe using our site and that their data is secure. - be able to pull all the information from the database for a given user at once, so that we maximize site performance - create a form that guides the user through the process of creating their disaster preparedness plan so that the user doesn’t get lost or frustrated in the process. - implement functionality for sending the user an email from our created website so that they can easily reference the preparedness plan without needing to login to the website - Build a page that has additional resources so that our site is a worthwhile stop even if you are not actively working on your emergency plan.
STRETCH: As a user I want to: - be able to upload images of loved ones to the site so that I have access to them in an emergency - have a map in my emergency preparedness plan that marks my rally point, secondary rally point, home, and work addresses so that I can visualize how to get to the rally point from either work or home. - Be able to customize my emergency preparedness kit for the disasters most likely in my region so I am prepared for what will most likely happen where I live. - Be able to customize my emergency preparedness kit for my unique needs, so that I don’t forget to pack medications or other important equipment that is unique to my situation.
As a developer I want to : - Implement image uploads for the emergency preparedness kit as well as head shots for each person listed in the plan so the user doesn’t need to search through their pictures on their phone to try and find a picture of a missing loved one during an emergency - Use the google maps API to display the relevant locations listed in the emergency preparedness plan so that the locations are more usable. - integrate the Twitter API to display relevant disaster preparedness related tweets on the homepage - Have unique add-on packing lists for multiple specific emergency situations so they can be added to the base emergency preparedness kit plan. - Allow the user to input user-specific items into their preparedness kit list so that they can ensure they have a complete list.