Skip to content

jeremiahtenbrink/volunteer-platform-fe

 
 

Repository files navigation

MIT React Code style: prettier Netlify Status

1️⃣ Volunteer Platform

1️⃣ You can find the deployed projectHere.

Contributors

Shane Gooch Ethan Hickey Jeremiah Tenbrink Kimberly Mai Ho Max David Penny Lee Blake Goms Oscar Ortiz


Project Overview

Trello Board

Product Canvas

UX Design files

The goal of this project is to connect volunteers and non-profits together, streamlining the validation process of volunteers to events.

4️⃣ Key Features

  • release canvas 1
    • Initial user onboarding (one type of user)
    • user can create a nonprofit organization; CRUD functionality on events for the nonprofit]
  • release canvas 2
    • Users (volunteers) are able to search and filter volunteer opportunities
    • Users (volunteers) can sign up (or cancel) for a specific event after searching and using interactive filters to find volunteer opportunities close by]
  • release canvas 3 We unfortunately ran out of time after completion of release canvas 2 but we thought it would be nice if the following features could be incorporated:
    • Organizations can verify their status via uploading of 501(c)(3) form
    • Organizations can validate hours after volunteers had completed an event
    • Users (volunteers) can view history in their profiles that show events that they had completed and hours that they had accumulated
    • Users (volunteers) can rate the organization (on a scale of 1-5 stars) after they had completed an event

1️⃣ Tech Stack

Front end built using:

ReactJS

Our groups familiarity is only with React as a FE Framework. We are aware of other viable options (Angular, Vue, Next), however, none of us have familiarity with these frameworks and due to time, these options were not going to be considered. Since most of the group will be introduced to Firebase on the BE, we did not want to also be spending our valuable time learning another framework. React provides us with enough comfort and flexibility for this project. We will utilize React Hooks along with the other many, well-developed npm packages that have been made for React (React Router, React Joyride, etc.). The largest potential challenge we foresee will be state management and separation of concerns for our file structure.

Back end built using:

Firebase

We chose firebase for the following reasons:

  • New technology that almost no one on the team had used so it is new and exciting to us
  • No need to set up backend
  • No need to use library like knex.
  • No need to create migration files.
  • Can change as the app changes.
  • Subscriptions
  • Google auth comes built in.

🚫 back end framework goes here

  • point one
  • point two
  • point three

APIs

2️⃣ Authentication API here

Google autho code

 useEffect (() => {
  this.unregisterAuthObserver = firebase.auth()
              .onAuthStateChanged( ( user ) => {
                  if( user ){
                      //user is logged in or just logged out.
                  }else{
                      //user is logged out or just logged out.
                  }

              } );
 }, [])

2️⃣ Payment API here

We are not using any payment API

3️⃣ Misc API here

Geoip-db API

Detect the user's location by IP address, for the purpose of fetching events that are close to the user.

Sample response format

 {
  "country_code":"US",
  "country_name":"United States",
  "city": ,
  "postal": ,
  "latitude": ,
  "longitude": ,
  "IPv4": ,
  "state": 
 }

3️⃣ Environment Variables

In order for the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

*  REACT_APP_apiKey - this is your Google API key, which can be generated in the Google Cloud Console
*  REACT_APP_authDomain - when you set up your Firebase project, this information will be in the dashboard
*  REACT_APP_databaseURL - in the Firebase dashboard
*  REACT_APP_projectID - in the Firebase dashboard
*  REACT_APP_storageBucket - in the Firebase dashboard
*  REACT_APP_messagingSenderId - in the Firebase dashboard
*  REACT_APP_ipinfoKey - API key for Geoip-db

5️⃣ Content Licenses

Image Filename Source / Creator License
doodles.png Nicole Bennett Creative Commons
rings.svg Sam Herbert MIT

4️⃣ Testing

🚫Document what you used for testing and why

4️⃣ Installation Instructions

🚫explain how to install the required dependencies to get this project up and running with yarn and NPM

Other Scripts

🚫replace these examples with your own

* typecheck - runs the TypeScript compiler
* build - creates a build of the application
* start - starts the production server after a build is created
* test - runs tests in **tests** directory \* eject - copy the configuration files and dependencies into the project so you have full control over them

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct. Please follow it in all your interactions with the project.

Issue/Bug Request

If you are having an issue with the existing project code, please submit a bug report under the following guidelines:

  • Check first to see if your issue has already been reported.
  • Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
  • Create a live example of the problem.

Feature Requests

We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.

Pull Requests

If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.

Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.

Pull Request Guidelines

  • Ensure any install or build dependencies are removed before the end of the layer when doing a build.
  • Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
  • Ensure that your code conforms to our existing code conventions and test coverage.
  • Include the relevant issue number, if applicable.
  • You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.

Documentation

See Backend Documentation for details on the backend of our project.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.0%
  • Other 1.0%