Urban-Shire

Install:

npm install

json-server --watch database.json --port 8088

npm start

Description: UrbanShire is an application that shows users their net annual C02 emissions and offers solutions to reduce their carbon footprint.

Plan: UrbanShire (MVP) Welcome

• Display “Welcome to UrbanShire” this app is create for local Nashvillians
• Register and Login (btn pop-up modal)
• Mission Statement (purpose): Address global climate change and offer local solutions

Register/Login

• Firebase Authentication
• Save username and userId to session storage
• Register Directs to the Emissions form
• Login Directs to Emissions Page (main page)

Emissions Form

• Collect user input and return users Net Annual CO2 Emissions
  • HOME- amount spent in $ on natural gas, electricity, fuel oil, and propane
  • CAR- miles driven per week or year and car fuel economy
  • WASTE- avg 692 lbs CO2 per person if you don’t recycle
• PUSH form inputs to local JSON server (userEmissions)

Emissions (Main Page)

• Display Users Net Annual C02 Emissions
• Display the users completed Emissions Form (editable)
• Display Action Plan (section)
• BTN add Action

Action Plan

• Action Plan Btn.onClick( Modal pop-up )
• Display selectable suggested actions from site
• Adds Action to Action Plan section on Emissions page
• Once action is checked as complete-- reduce Users CO2 Emission & Delete Action from Emissions Page

Stretch Goals

• Charts.js
• ABOUT
  • Avg. Nashvillians CO2
  • Nashville Statistics
  • Climate Science
  • etc
• Display real-time Air Quality of Nashville
• Add Animations (react spring)
• Logo
• Rank users (somehow?)
• When completing an Action Plan (Celebration Animation)
• Shire (Newsfeed)
  • users can post ideas, solutions, news, plans, msg, etc. (CRUD)
• Group Projects
• NAV

Mockup:

Database:

Completion: