With the Charity Finder app you'll not only get to refine your Web Developer
The Charity Finder app helps you refine your web development skills while contributing to a good cause.
skills, but you will also have an opportunity to see how you can do good. The
It uses the [Global Giving API](https://www.globalgiving.org/api/) to let users search and explore global charities that match their interests.
objective of this app is to utilize the [Global Giving](https://www.globalgiving.org/) organizations API to provide your users with a list of global charities they
can search to find a charity that matches their philanthropic interests.
### Constraints
---
- Since the app is asking the user to choose and contribute to a charitable
cause it's important that the presentation of information be clear and concise.
Just as important is the need for the UI/UX to be polished and engaging to use.
Although this is true of all apps, its even more the case here since each
## Features
user that abandons the site represents the loss of an opportunity to do good
(see ['What is Web Site Conversion?](##useful-links-and-resources)) below.
- Search for charities by organization name, home country, or countries served.
- Display detailed information cards for matching organizations.
- View charity logos and visit each organization’s website.
- Clean, responsive UI for an engaging and trustworthy user experience.
- Optional filters for themes, projects, and impact areas.
---
## User Stories
## User Stories
- [ ] User can see a page heading containing the application name.
- [ ] User can see a page heading with the application name.
- [ ] User can see an overview of what the app is intended for in 'splash'
- [ ] User can see an overview of the app in a splash or introduction page.
page format.
- [ ] User can search for charities using dropdown filters:
- [ ] User can see a search area containing an set of drop down boxes that
- Organization name
allow the user to specify search criteria for charitable organizations
- Home country
including:
- Countries served
- Organization name
- [ ] User can click a "Search" button to display information cards.
- Organizations home country
- [ ] User can view charity information cards containing:
- Countries the organization serves
- ID
- [ ] User can see a 'Search' button
- Name
- [ ] User can click on the 'Search' button to display information cards
- Address
for the matching organizations in a search results area.
- Logo
- [ ] User can see organization information cards in the search results area
- [ ] User can click a charity logo to open the organization’s website in a new tab.
containing:
- [ ] User can see a footer with links to GitHub and social media accounts.
- ID
- Name
---
- Address
- Logo
## Bonus Features
- [ ] User can click the logo in the organizations information card to open a
new window to that organizations home page.
- [ ] Add a dropdown filter for charity themes (e.g., Health, Education, Environment).
- [ ] User can see a page footer with links to your GitHub and social media
- [ ] Allow multiple selections in dropdown filters.
accounts including social media icons (like the Twitter icon).
- [ ] Display a project link (for example, "PROJECT") on the information card.
- [ ] Clicking the project link shows detailed project information from the Global Giving API.
Hint: Examine the JSON or XML data returned by the API to understand how projects and organizations are linked.
s-weibe
12 months ago
committed by
GitHub