Environmental engagement ebbs and flows in our culture just like our personal lives. Despite our best efforts and intentions, we simply don't have enough time to deep dive into everything. EAH was built to make environmental education efficient and approachable. Unlike local weather patterns, which we casually notice, the climate of our planet carries momentum. That's exactly why our choices today can have such a powerful impact down the road. Information can empower us to make intelligent decisions beneficial in the long-term. Whether you're pursuing the journey of a visitor or curator... Environmental Advocacy Hub is going places - watch it run!
Users: Anyone who has been overwhelmed by social media competition for attention - anyone fed up with promotion - anyone ready to pledge themselves to a worthy cause.
Problem: Environmental advocacy organizations have been empowered by social media, enabling them to easily expand their audience. Social feeds quickly grab audience attention but inherently struggle with retention. Advocacy orgs could benefit from an app intentionally built to redirect like-minded users directly to their org's domain.
Purpose: An app that seeks first to understand what topics the user is interested in. An app that identifies a fitting org to motivate the user. An app that encourages impactful avenues of change that will lead to widespread movement instead of reposting. EAH is a service designed to be left behind!
- Express
- Node.js
- Mongoose
- EJS templates for server-side rendering
- MaterializeCSS design framework
- PassportJS authentication
- Heroku (Hosted)
- As a visitor, I want to find motivation, so that I can do something different today
- As a visitor, I want to read a curated snippet of verified environmental data, so that I can understand the urgency behind organizations of change
- As a curator, I want to add snippets via CRUD, to diversify the user's experience
- As a visitor, I want to be able to re-roll snippets, so that I can read topical info that speaks to me
- As a visitor, I want to be able to filter topics, so that I can receive suggestions I'm interested in learning more about
- As a visitor, I want to choose between orgs relating to the current snippet, so that I can focus my attention
- As a visitor, I want to read a brief summary for each org, so that I can begin to understand the relationship between advocacy orgs, data, and the environment
- As a visitor, I want the app to ELIF (explain like I'm five), so that I pursue redirecting to an advocacy website for more educational material (instead of their donations/contributions/social media page)
- As a visitor, I want to be able to filter topics, so that I can receive suggestions I'm interested in learning more about
- As a visitor, I want the app to display a recent redirects feed, so that I can see what other visitors are interested in
- As a visitor, I want snippet refs to render orgs via animation and sources to render org redirects, so that a new tab isn't opened until the user is shown an avenues of change flow
- As a curator, I want to be able to hide/unhide orgs/snippets, so they aren't permanently delete them
The biggest hurdle I overcame this project was adding authentication for curators. I was able to ensure that visitors aren't required to login to view snippets. All the while, curators who connect their google account have full crud access! I also found implementing the Materialize sidenav was challenging due to out of date documentation. Eventually, sidenav got running; however, this was at the expense of building a mobile friendly layout. I plan on continuous updates and project maintenance.
Randomized Snippet
Sidenav - Visitor
Sidenav - Curator (Authenticated via PassportJS)
Snippet Index Route
Snippet Show Route
Snippet New Route
Snippet Edit Route
Footer - Mobile View
- Tackles a concrete issue with a unique solution!
- User Stories with multiple roles
- Many-to-Many . . . -to-Many (Curators-to-Snippets-to-Organizations)
This portfolio project is my first official full-stack application!