lfinney/competeme

CompeteMe

Table of Contents

• Overview
• Stack
• Screenshot
• Goals and Process
• In-Progress

Overview

CompeteMe is a pick-up sports application. It's goal is to connect individuals who seek to create and play in pick-up sporting competitions. Currently most pick-up sports events essentially rely on word-of-mouth between individuals who know one another. This application seeks to make pick-up sports more accessible by helping transform this nature of pick-up-sports.

Stack

CompeteMe was built using Redux, React, and React-Router with a Firebase backend. The app pulls from the Google Maps Places API in order to allow search of parks and rendering of park locations on Event Cards.

Screenshot

![CompeteMe Screenshot] (https://github.com/lfinney/competeMe/tree/master/src/assets/CompeteMe-1.0-Screenshot.png)

Goals and Process

While crafting this application my goals were to refine my understanding of React and Redux, gain exposure on how to interface with and build an empty backend, and gain exposure to part of the Google Maps API.

Comparing this application to my previous projects, one can notices a clear trajectory in my growth of understanding how and when to use stateful React components. With the addition of Redux to my stack, I am able to continue this growth and further architect an application that puts a heavy processing load on as few components as possible and instead, leverage Redux actions to execute on and pass data. This application features only three components that are wired up to the Redux store, and these components perform most of the heavy lifting in terms of passing data around and managing what is rendering on the page.

In terms of a backend, this was the first time I had ever stared with an empty backend when it was necessary. Thankfully, Firebase provides a streamlined system that could be implemented into this application. One hurdle to solve in this process though was how to manage a user's selected events (i.e. competitions they RSVP'ed to). Firebase allows for simple implementation of Google authentication, but a developer can not explicitly add any other data to the sign-ed in user. You are left with essentially two options:

1. Make copies of all your users and store them as objects in firebase
2. Take the user Id that comes with each authenticated user and map it to the other parts of your store. I chose the later approach, as I wanted to keep my backend as slim as possible. While the interface still needs some fine tuning, it provides a streamlined way to match users to their given events without needing to duplicate too much data.

Finally, I am quite the geography enthusiast. Prior to transitioning into web development, I taught high school social studies for six-years. My curiosity of geography found a natural place as a teacher, but I am excited now to take that curiosity in a different direction. Ever since I started school at Turing, I have been itching to get into Google's map data. While it is significantly more vast than I anticipated, I am excited by the possibilities it offers for development of future projects. In this project I was able to implement a simple park search feature so that users of this application can find and identify parks to meet at to play their given pick-up sports.

In-Progress

While the "project" portion of this is complete, I will continue working on it as I am excited by it's scalability. Some open issues I have are:

• Improving search functionality
  • Grab user location to pre-load map search with maps immediately near them
  • Autocomplete for users while they are typing
  • Better optimized search
• Creating using profiles
  • Users should be able to favorite parks they like to play at and sports they prefer to play.
  • Users should be notified if an event is created that is by them and a sport they like
  • Users should be able to have a "friends" list to accumulate people they enjoy playing with
  • Users should be given events that are near them and in chronological order
• Styling improvements
  • User should be able to tell which events they've already selected when on main page
  • Add visual queue for how recent events will be occurring
• Search features
  • Users should be able to search through active competitions to find ones that interest them or are near them

I am always open to feedback and suggestions, so drop me a line.

This project was bootstrapped with Create React App.

competeme's Issues

Popup Component for Errors

A popup should appear to redirect a user when two cases are met:

1. They try to create or join an event without being logged in
2. Their event submission field has missing information
   The popup component is written, however managing the store to determine when it should appear is proving tricky.

Refactor EventCreator Submit Handler

There is simple handleSubmit function in the userEventsHelper, however, the eventCreator handleSubmit is a little more complicated since it's being used on a stateful component. Needs to be refactored in some way to make use of the one helper function.

Fix testing environment

Currently getting the error message:

2017-10-30 21:44 node[22640] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at _errnoException (util.js:1026:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1360:9)
npm ERR! Test failed.  See above for more details.```

refactor all firebase logic into a utility

Any instance of firebase could / should be put into a FB utilities file

refactor the liveUser check

competeMe/src/Event/Event.js

Lines 49 to 50 in 44dcc6d

	if (liveUser) {
	userCompetitions(comp, activeUser);

you might want to consider having a middle function that determines if a live user is available and where to go from there.

refactor into a style object.

https://github.com/lfinney/competeMe/blob/master/src/Map/Map.js#L37
this could become a variable that is passed around.

Map Search

The api call to Google Places currently functions, but the destination is currently hardcoded. Need to refactor this so that a user can search for a particular park and that map will not only appear in their user form, but also have it's coordinates stored as part of the event object and then render the map when the event is rendered to the event stream.

Add user to your application

Add the ability for a user to log in and have their events populated in the store once they log in.

CORS

Need to fix CORS issue so that API calls can be made to Google maps API

Aysnc issues when loading events from firebase

Currently, events are sent to the firebase database, which is great, however the async flow is throwing off how the app retrieves that data so it can be appended to the event directory.

Populate user events with competitions they click to join

Can click on a given event card and click will register the correct data object. Need to figure out the best possible way to populate the empty comps array that is currently on the user object in store with the competitions clicked on. Clicking again should remove the object from the comps array. These objects should also be pushed up to firebase with the user information.