aburg15 / do-goodr-fe

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Do Goodr - by Michele Comfort, Adam Burgess, Colgan Meanor, Matt Holmes, Ted Staros

Mod4 2108 Cohort

Deployed Link: Click Here to Try Do Goodr

Application Preview

overview

Table of Contents

Install + Setup

  • clone this repo: here
  • On the command line, type: $ npm install
  • On the command line, type: $ npm start
  • The app will run on port 5000.
  • Visit (http://localhost:5000/) in your browser.

Project Specs

  • The project spec & rubric can be found here

Abstract

Do Goodr is an application designed to help people find volunteer opportunities in their local areas. The truth is that many of us are looking for ways to give back to our communities, and searching online for local volunteer opportunities can be cumbersome, and disorganized. Thus, Do Goodr was born out of a desire to solve this problem. General users will have the ability to search for volunteer events or opportunities in their area by performing a search based on their zip code and the distance in miles from their desired zip code. Meanwhile, an organization has the ability to register their organization to the app to post new events or opportunities that will appear when users are searching for opportunities in their local area.

Main Dashboard

overview

Create Event Form

overview

Create Organization Form

overview

Organization Sign-In

overview

Zip Code/Mileage Search Results

overview

Successful Organization Creation

overview

Architecture

The front end component of this app was developed using the React Framework, along with Typescript, HTML, CSS, and tested via Cypress Testing Framework.

All data for Do Goodr is housed in a separately deployed back-end component for the project which can be found here. When users are choosing an organization to make posts as, the front end application is fetching all of the organizations housed in the back end server to populate a dropdown menu with the choices of organization names. When an organization is posting an event, it is posted to the back end server and that post will be fetched from the back end to appear for other users if they are searching for events in the same area. In general, data comes to the front end from the back end only when it is explicitly requested via user actions and interactions. When data lands in the front end application, it is held in state and distributed as necessary to relevant React child components.

Technologies

  • React
  • React Router
  • JSX
  • JavaScript
  • TypeScript
  • Cypress
  • NPM
  • HTML5
  • CSS3
  • Figma
  • VSCode

Contributors

Wins

  • As a team of front-end and back-end engineers, we conceptualized and designed the entire application from idea/planning stage to completion.
  • Successfully built using Typescript in place of vanilla Javascript.
  • Successfully implemented continous integration building via CircleCI and automatic deployment to Heroku upon successful builds in working/Beta development branch.

Challenges + Improvements

  • Setting up CircleCI continuous integration in the early stages of the project was a bit challenging. But it was a productive process to engage in earlier rather than later in the project.
  • Sketching out functionality and responsibilities could be challenging at times with our joint FE and BE teams, but it got easier over time as we grew more comfortable with having conversations about what can and cannot be done respectively by both teams.

About


Languages

Language:TypeScript 52.5%Language:JavaScript 23.8%Language:CSS 20.2%Language:HTML 3.5%