Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
99 lines (54 sloc) 3.77 KB



Sportee makes it incredibly simple to play sports with people nearby. Inspired by MeetUp, this site allows users to create groups and events for specific sports. The goal is to create an easy to use interface for connecting people who share similar athletic interests.

Technology Stack

This project has been implemented using the Ruby on Rails web framework, a PostgreSQL database, and a frontend created with React.js following the Redux architecture. The app delivers content as needed on a single static page.


Home / Dashboard


Search Bar

The search bar allows for search by group name, distance (miles) from a city, or a combination of both. The ruby gem geokit-rails was used to provide functionality for location-oriented searches. The gem leverages the Google maps Geocoding API to convert an address (like "New York, NY") into geographic coordinates (like latitude 40.7128°, and longitude 74.0059° W). The gem also allows for ActiveRecord distance-based finders, identifying any points in the database within a specified distance.

Group Events

Pulls all groups into the homepage, filtered by the search query. Group title and location details are displayed for each group.

Group Events Tab




Users are able to RSVP to events and see a live update to the number of people attending the event. Users are also able to remove RSVPs via the same button.

Group Details

The group event tab is the landing page for each group. This page displays:

  • Location - The location of the group
  • Members - Total number of members
  • Organizer - The person who created the group
  • Group Description - User written description of group

Event Details

The group's events are listed with the following details:

  • Date - Date of event
  • Time - Time of event
  • Duration - Length of event
  • RSVP Count - Total number of users who have RSVP'd

Group New Event Tab


Edit/Delete Privileges

The privilege to edit/delete an event is only displayed on an event if the current user signed in is the creator of the event. In the example above, the current user has created the first event (note the edit and delete icons at top right). Likewise, only users who have created the group (organizer) have the ability delete the group (Delete group button on left sidebar).

Group Members Tab


Adding/Removing Membership

Users are able to add and remove membership to groups via the button on the group header. Clicking on the button updates the list of people see in the Members tab, as well as the total count of members seen on the left sidebar.

Calendar Tab


Calendar View

Calendar displays all of the groups events by month.

Future Direction

I plan to continue the project with the following features:

Text Updates

Users who are member of groups will receive text updates when new events are created. Users will be able to text back "In" if they want to RSVP to the event.

Google Maps View

Allow user to browse groups via a Google Maps.