Oliver Gomes
6 years ago
committed by
GitHub
commit
54a2b6fea1
@ -0,0 +1,150 @@
|
||||
# Charity Finder
|
||||
|
||||
**Tier:** 2-Intermediate
|
||||
|
||||
With the Charity Finder app you'll not only get to refine your Web Developer
|
||||
skills, but you will also have an opportunity to see how you can do good. The
|
||||
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 consise.
|
||||
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
|
||||
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.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a page heading containing the application name.
|
||||
- [ ] User can see an overview of what the app is intended for in 'splash'
|
||||
page format.
|
||||
- [ ] User can see a search area containing an set of drop down boxes that
|
||||
allow the user to specify search criteria for charitable organizations
|
||||
including:
|
||||
- Organization name
|
||||
- Organizations home country
|
||||
- Countries the organization serves
|
||||
- [ ] User can see a 'Search' button
|
||||
- [ ] User can click on the 'Search' button to display information cards
|
||||
for the matching organizations in a search results area.
|
||||
- [ ] User can see organization information cards in the search results area
|
||||
containing:
|
||||
- ID
|
||||
- Name
|
||||
- Address
|
||||
- Logo
|
||||
- [ ] User can click the logo in the organizations information card to open a
|
||||
new window to that organizations home page.
|
||||
- [ ] User can see a page footer with links to your GitHub and social media
|
||||
accounts including social media icons (like the Twitter icon).
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a search dropdown for themes the charity focuses on.
|
||||
- [ ] User can select multiple options in the search dropdowns.
|
||||
- [ ] User can see a project link (e.g. 'PROJECT') on the organization
|
||||
information card.
|
||||
- [ ] User can click on the project link to display a page with information
|
||||
describing the Global Giving project the organization is associated with.
|
||||
Hint: examine the structure of the JSON returned from the API to understand
|
||||
the relationship between projects and organizations.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)
|
||||
- [Global Giving API](https://www.globalgiving.org/api/)
|
||||
- Sample JSON for a project returned through the API:
|
||||
```
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<projects numberFound="26842">
|
||||
<hasNext>true</hasNext>
|
||||
<nextProjectId>367</nextProjectId>
|
||||
<project>
|
||||
<active>false</active>
|
||||
<activities>To fund the training of health professionals including nurses, psychologists, and social workers, and buy medicine and equipment.</activities>
|
||||
<additionalDocumentation>https://www.globalgiving.org/pfil/359/projdoc.doc</additionalDocumentation>
|
||||
<approvedDate>2004-06-01T12:43:27-04:00</approvedDate>
|
||||
<contactAddress>28 Pine Street</contactAddress>
|
||||
<contactCity>Mechanic Falls</contactCity>
|
||||
<contactCountry>United States</contactCountry>
|
||||
<contactPostal>04256</contactPostal>
|
||||
<contactState>Maine</contactState>
|
||||
<contactUrl>http://groups.yahoo.com/group/FOCUSonCambodia</contactUrl>
|
||||
<country>Cambodia</country>
|
||||
<funding>8239.33</funding>
|
||||
<goal>55000.00</goal>
|
||||
<id>359</id>
|
||||
<image id="0">
|
||||
<imagelink size="small">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_grid1.jpg</url>
|
||||
</imagelink>
|
||||
<imagelink size="thumbnail">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_thumbnail.jpg</url>
|
||||
</imagelink>
|
||||
<imagelink size="medium">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_med.jpg</url>
|
||||
</imagelink>
|
||||
<imagelink size="large">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_grid7.jpg</url>
|
||||
</imagelink>
|
||||
<imagelink size="extraLarge">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_large.jpg</url>
|
||||
</imagelink>
|
||||
<imagelink size="original">
|
||||
<url>https://www.globalgiving.org/pfil/359/pict_original.jpg</url>
|
||||
</imagelink>
|
||||
<title>Improving the Health of Children in Cambodia</title>
|
||||
</image>
|
||||
<imageGallerySize>1</imageGallerySize>
|
||||
<imageLink>https://www.globalgiving.org/pfil/359/pict.jpg</imageLink>
|
||||
<iso3166CountryCode>KH</iso3166CountryCode>
|
||||
<longTermImpact>This project will help improve the mental and physical health of orphaned children in Cambodia. This project will also ensure the sustainability of the Nutrition Center in Child Mental Health Center.</longTermImpact>
|
||||
<need>Our beneficiaries will be orphaned children suffering from AIDS/HIV and other diseases and children with mental health problems whose parents do not know how to cope because they were deprived of family experiences by the forced separations of the Pol Pot regime. At the Nutrition Center in Phnom Penh, we will help urban orphans from brothels and hospitals that have abandoned them. At the Child Mental Health Center, we will help families, largely the working poor, from all over Cambodia.</need>
|
||||
<numberOfDonations>102</numberOfDonations>
|
||||
<organization>
|
||||
<activeProjects>0</activeProjects>
|
||||
<addressLine1>1062 Lewiston Road</addressLine1>
|
||||
<addressLine2></addressLine2>
|
||||
<bridgeId>5824171103</bridgeId>
|
||||
<city>New Gloucester</city>
|
||||
<countries>
|
||||
<country>
|
||||
<iso3166CountryCode>KH</iso3166CountryCode>
|
||||
<name>Cambodia</name>
|
||||
</country>
|
||||
</countries>
|
||||
<country>United States</country>
|
||||
<id>10</id>
|
||||
<iso3166CountryCode>US</iso3166CountryCode>
|
||||
<mission>The mission of FOCUS is to pursue humanitarian programs that include medical aid, school construction and supplies, distribution of rice and rice seeds, road improvements, agricultural improvements, fish farms, basic housing, hospital restoration, school scholarships, and loans for infrastructure improvements. We want to help disadvantaged youth and their families, if they have any, in a country where the infrastructure is still weak due to Khmer Rouge depredations.</mission>
|
||||
<name>Friends of Cambodia in the U.S. (FOCUS)</name>
|
||||
<postal>4260</postal>
|
||||
<state>Maine</state>
|
||||
<themes>
|
||||
<theme>
|
||||
<id>health</id>
|
||||
<name>Health</name>
|
||||
</theme>
|
||||
</themes>
|
||||
<totalProjects>2</totalProjects>
|
||||
<url></url>
|
||||
</organization>
|
||||
<progressReportLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/updates/</progressReportLink>
|
||||
<projectLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/</projectLink>
|
||||
<region>Asia and Oceania</region>
|
||||
<remaining>46760.67</remaining>
|
||||
<status>funded</status>
|
||||
<summary>To help abandoned children, many afflicted with HIV/AIDS, and children with mental health problems. We want to address lack of food, medicine and staff training.</summary>
|
||||
<themeName>Health</themeName>
|
||||
<title>Improving the Health of Children in Cambodia</title>
|
||||
<type>project</type>
|
||||
</project>
|
||||
</projects>
|
||||
```
|
||||
|
||||
## Example projects
|
||||
|
||||
[Playing with card layout](https://codepen.io/bradjdouglas/pen/xOZJRz)
|
||||
@ -0,0 +1,110 @@
|
||||
# Contribution Tracker
|
||||
|
||||
**Tier:** 3-Advanced
|
||||
|
||||
In the [Charity Finder](./Charity-Finder-App.md) project you created an app to
|
||||
help you locate a charity worthy of your contributions. Once a contribution
|
||||
has been made the goal of the Contribution Tracker app is to track it so to
|
||||
provide users with a record of all contributions for use in monitoring how
|
||||
funds are being directed and to provide records for financial reporting
|
||||
purposes. For example, for tax reporting.
|
||||
|
||||
### Constraints
|
||||
|
||||
- Developers may use Vanilla JS, or a framework of their choice (like React,
|
||||
VueJS, etc.).
|
||||
|
||||
- Developers should not use libraries for calculating and manipulating monetary
|
||||
amounts. All calculation and formatting should be done in the language chosen
|
||||
to develop the application.
|
||||
|
||||
- Developers may use a graphics presentation library or service of their choice,
|
||||
like [AMCharts](https://www.amcharts.com/).
|
||||
|
||||
- Developers may choose to have transactions persist across sessions using
|
||||
either files or databases. Sensitive data, like transactions, must not be
|
||||
maintainined in local storage. Remember that although you can implement
|
||||
protections it is impossible to totally secure browser applications.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a Navigation Bar at the top of each page containing the
|
||||
application name and a "hamburger" menu with these option:
|
||||
- Dashboard
|
||||
- Transactions
|
||||
- [ ] User can see a Footer Bar at the bottom of each page containing an
|
||||
About link
|
||||
|
||||
### Dashboard Page
|
||||
- [ ] User can see the Dashboard page when the app is started containing
|
||||
graphical summaries of the following key metrics. The graphical representation
|
||||
for each is left up to the Developer.
|
||||
- Contributions by month for the current year
|
||||
- Total contributions by year
|
||||
- Contribution increase/decrease by year
|
||||
- Average contribution amount by month and year
|
||||
- [ ] User can return to the Dashboard page, if currently on another page, by
|
||||
clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.
|
||||
|
||||
### Transactions Page
|
||||
- [ ] User can see a transaction input panel containing the following:
|
||||
- Transaction date
|
||||
- Payee name
|
||||
- Amount
|
||||
- Memo
|
||||
- Action buttons - 'Clear', 'Add'
|
||||
- [ ] User can see a tabular transaction ledger containing previously
|
||||
entered transactions. Each row will also contain a 'Modify' and a 'Delete'
|
||||
button.
|
||||
- [ ] User can enter values describing the transaction into the input fields
|
||||
- [ ] User can click the 'Clear' button to reset all input fields to an
|
||||
empty state.
|
||||
- [ ] User can click the 'Add' button to validate the input that has been
|
||||
entered, add the validated entry to the transaction ledger, and clear the input
|
||||
fields.
|
||||
- [ ] User can see a consolidated error message detailing any errors detected
|
||||
in input fields, including:
|
||||
- Invalid date
|
||||
- Blank Payee name
|
||||
- Non-numeric amount field
|
||||
- [ ] User can click on the 'Update' button to modify a previously entered
|
||||
transaction. The transaction details will be copied to the transaction input
|
||||
panel and the 'Add' button will change to 'Modify'.
|
||||
- [ ] User can change values in the input fields and click the 'Modify' to
|
||||
validate the input and update that transactions entry in the ledger. If
|
||||
successful the 'Modify' button will change back to 'Add' and the input fields
|
||||
will be cleared.
|
||||
- [ ] User can click the 'Delete' button to remove a previously entered
|
||||
transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay'
|
||||
buttons to cancel or confirm the delete. If the delete is confirmed the
|
||||
transaction will be removed from the ledger.
|
||||
- [ ] User can return to the Transactions page, if currently on another page,
|
||||
by clicking on the 'Transactions' option in the hamburger menu in the Navigation
|
||||
Bar.
|
||||
|
||||
### About Page
|
||||
- [ ] User can click the About link in the Footer Bar to display information
|
||||
about the Developer.
|
||||
- [ ] User can see links to the Developers GitHub and social media accounts
|
||||
including social media icons (like the Twitter icon).
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can click in the transaction date field to display a calendar
|
||||
the date can be selected from rather than manually entering it.
|
||||
- [ ] User can see alternating row background colors in the transaction ledger.
|
||||
- [ ] User can click on a column heading in the transaction ledger to toggle
|
||||
the sort sequence on the values in that column.
|
||||
- [ ] User can see a PDF option near the Transaction Ledger to create a PDF
|
||||
of all transactions (Hint: checkout how this capability can be implemented via
|
||||
[Puppeteer](https://github.com/GoogleChrome/puppeteer)).
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript)
|
||||
- [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/)
|
||||
- [Mintable (GitHub)](https://github.com/kevinschaich/mintable)
|
||||
|
||||
## Example projects
|
||||
|
||||
N/a
|
||||
@ -0,0 +1,72 @@
|
||||
# GitTweet
|
||||
|
||||
**Tier:** 3-Advanced
|
||||
|
||||
In the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to
|
||||
create a timeline of your repos. What could be more powerful that using an API
|
||||
such as this? Why using two API's, of course.
|
||||
|
||||
The goal of GitTweet is to create a GitHub app to tweet when a pull requst
|
||||
is created for one of your repos.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see an input area tabular display prepopulated with rows for
|
||||
each of the GitHub repos she owns and a selection checkbox next to each repo
|
||||
name, a single input date field, and a 'Scan' button.
|
||||
- [ ] User can click the checkboxes in the repo list to select or deselect
|
||||
repos for processing.
|
||||
- [ ] User can enter a date into the date field. This defines the point after
|
||||
which any new PR requests will be tweeted.
|
||||
- [ ] User can click the 'Scan' button to identify repos that have had a new
|
||||
PR created that has not been previously tweeted. In other words. Consecutively
|
||||
entering the same date to scan from should only generate tweets for PR's that
|
||||
have not yet been tweeted.
|
||||
- [ ] User can see an error message if no date was entered, if it is not a
|
||||
valid date, or if it is a future date.
|
||||
- [ ] User can see repos highlighted if a tweet will be generated for them
|
||||
and the 'Scan' button will change to 'Tweet'.
|
||||
- [ ] User may deselect a repo by clicking on its checkbox. Doing this will
|
||||
change the button back to 'Scan' and clicking it will repeat the search for
|
||||
repos that have had new PR's (not yet tweeted) created since the scan date
|
||||
entered by the user.
|
||||
- [ ] User may enter an new scan date at this point which also changes the
|
||||
button back to 'Scan'.
|
||||
- [ ] User may click the 'Tweet' button to send a tweet bearing the following
|
||||
message - `Pull Requst #<pr-number> created for repo <repo name> - <repo description>`.
|
||||
- [ ] User can see this tweet send from her Twitter account.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User does not need to manually enter a scan date. If omitted the scan
|
||||
will resume from the last scan date which must persist across sessions.
|
||||
- [ ] User may enter a custom tweet message
|
||||
- [ ] User repo selections will persist across sessions so they do not have
|
||||
to be reselected each time.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Twitter Developer Docs](https://developer.twitter.com/en.html)
|
||||
- [GitHub Apps](https://developer.github.com/apps//)
|
||||
- GitHub offers two API's you may use to access repo data. You may also choose
|
||||
to use an NPM package to access the GitHub API. Documentation for the GitHub
|
||||
API can be found at:
|
||||
|
||||
- [GitHub REST API V3](https://developer.github.com/v3/)
|
||||
- [GitHub GraphQL API V4](https://developer.github.com/v4/)
|
||||
|
||||
Sample code showing how to use the GitHub API's are:
|
||||
|
||||
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)
|
||||
- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)
|
||||
|
||||
You can use this CURL command to see the JSON returned by the V3 REST API for
|
||||
your repos:
|
||||
|
||||
```
|
||||
curl -u "user-id" https://api.github.com/users/user-id/repos
|
||||
```
|
||||
|
||||
## Example projects
|
||||
|
||||
[Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter)
|
||||
@ -0,0 +1,63 @@
|
||||
# Pearson Regression
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
There are few, if any, applications that don't require some form of
|
||||
cross-disciplinary knowledge in order to implement useful functionality for
|
||||
a user. In the case of an app for the medical profession it might be domain
|
||||
expertise in biology or pharmacology. A paint manufacturer or a crop science
|
||||
business might rely on apps with an intimate knowledge of chemistry. And, a
|
||||
payroll application will certainly incorporate HR and accounting concepts.
|
||||
|
||||
Regardless of the industry segement an app is developed for one cross domain
|
||||
expertise in common with them all is mathematics. As an application developer
|
||||
you don't have to be a mathemetician, but it's useful to have an understanding
|
||||
of how to apply mathematical concepts to the problems you are trying to solve.
|
||||
|
||||
The objective of this app is to apply the Pearson Correlation Coefficient
|
||||
against two sets of data to provide the user with the degree to which they
|
||||
may or may not be related. For example, given a set of temperatures and another
|
||||
set of car prices this would let the user test whether or not they are related
|
||||
(spoiler alert: they are unrelated!).
|
||||
|
||||
### Constraints
|
||||
|
||||
- The Developer must program all calculations without relying on a package.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see an input panel with two input fields allowing entry of `x`
|
||||
and `y` coordinates, and 'Add' and 'Calculate' buttons.
|
||||
- [ ] User can enter numbers into these boxes where `x` and `y` are observations
|
||||
from the two data sets.
|
||||
- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular
|
||||
output area listing the pairs of observations.
|
||||
- [ ] User can see and error message if either of the two input fields are
|
||||
empty or do not contain valid real numbers.
|
||||
- [ ] User can see the 'Calculate' button is disabled until errors have been
|
||||
corrected.
|
||||
- [ ] User can click the 'Calculate' button to perform the regression analysis
|
||||
and to display its results.
|
||||
- [ ] User can see results of the calculation which include:
|
||||
- Arithmetic means for both the `x` and `y` observations
|
||||
- Standard deviations for both the `x` and `y` observations
|
||||
- Pearson correlation coefficient with one of the following interpretations:
|
||||
- No correlation
|
||||
- Neutral
|
||||
- Some correlation
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a scatter plot of the observations
|
||||
- [ ] User can upload observations from a file on the local machine.
|
||||
- [ ] User can see a regression line overlaying the scatter plot
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient)
|
||||
- [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression)
|
||||
- [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml)
|
||||
Loading…
Reference in new issue