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.
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
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.
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.
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
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
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
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 displays all of the groups events by month.
I plan to continue the project with the following features:
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.