A website that connects charities to donors.
Contributors »
Christian Peterson
·
Pongsak Pattamasaevi
·
Amanda Klein
·
Dylan Reid
·
Eric Cruz
Table of Contents
The objective of the Common Good website was to make a site that allowed charity organizations to connect with prospective donors in order to exchange donated goods. Our team of software engineers was given one week to create the application. It is comprised of the features and pages detailed below.
Home Page --Amanda Klein
Features:
- Nav Bar
- Charity Information
- Charity Feature Cards
- Footer
- Routing
Profile Page -- Eric Cruz
Features:
- Profile Picture: Created using the Material UI Avatar component and also has an added Edit Icon using Material UI Badges if the user is viewing their own profile.
- Profile Information: Displays the user's basic contact information and location.
- Offer Detail Cards Display: The Card Display/Profile Feed is a list of all the offers/requests made by that particular user.
- Editable Information: By clicking on the Edit Icon, a modal will appear for the user to modify any of their profile information. These changes occur real-time.
Listings and Search -- Pongsak Pattamasaevi
Features:
- Charitable requests & donations listing: User is able to toggle between an interface displaying all requests from organizations, sorted by urgency, and one showing all charitable donations, sorted by time to expiration. Data is paginated and fetched as needed to improve performance, and presented on animated, interactive Material-UI cards. From within each card, the user can view more details about the listing, its owner, or initiate a live chat with the associated account.
- Search Feature: A case-insensitive search by item name, allowing the user to quickly find relevant donations or requests on the listings page. On the "Charities" page, more criteria is available for search, including by name, city, state, and charitable theme.
Details Page -- Dylan Reid
Features:
- Details: renders the item picture, title, description, quantity, and time stamp dynamically.
- Map: a map of the approximate location is shown using the google maps api. The marker shown is the user's profile picture.
- Profile: the donor or organization's profile is listed at the bottom of the page with their profile picture, title, and bio.
- Other Features: links to the chat application and profile pages. If the item is listed as urgently needed, an alert is conditionally rendered.
Chat -- Christian Peterson
Features:
- Makes full use of user authentication and sessions.
- Designed to be fast and easy to understand.
- Persists messages via a firebase database.
- Renders a dynamic notification icon when new messages are recieved.
| Frontend Languages |
|
|---|---|
| Frameworks & Libraries |
|
| Backend Languages |
|
| Utilities |
|
| Workflow |
|
| Deployment |
|
Our team used Agile workflow for this sprint.
A Trello board was used to create and track tickets. We held daily scrum meetings to discuss accomplishments, challenges, and upcoming tickets. To effectively collaborate remotely while allowing for quick communication if needed, we utilized Discord, Slack, and Zoom.
We implemented Git Feature Branch Workflow. All pull requests in Github were reviewed by another team member before being merged into the main branch.
git clone https://github.com/hratx-blue-ocean/adriatic-common-ground
npm install
npm start
npm run build
To properly render the map in the details page, you must create a Google Maps API token and place it into config.js within the src directory.
To create an API key:
- Go to: https://console.cloud.google.com/project/_/apiui/credential
- On the credentials page, click Create credentials > API Key. The API key created dialog displays your newly created API key.
- Click Close. The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)