/match-sports-mobile-app

iOS & Android Application with the aim to connect people with the love for sports!

Primary LanguageJavaScript

Match - Play Sports And Meet Friends.

photo_2021-07-22 10 38 27

This is a "Code Preview" repository

I uploaded a minimal part of the App Code only.

This repo contains only the front end code.

Technologies

Match-Tech

App Purpose

The app goal is to find participate in sport events hapening nearby. Users are defines as athletes and users can connect and and schedule a sport event, from surfing in the beach to play basketball in a local basketball court. The app is complete and ready to use.

Onboarding Page.

App Explenation

App Introduction

Screen Shot 2021-07-22 at 10 09 55

Events

Screen Shot 2021-07-22 at 10 10 12.

Joining Events

Screen Shot 2021-07-22 at 10 10 22

Become coach

Screen Shot 2021-07-22 at 10 10 34

Signup

Sports aviliable in the App:

Screen Shot 2021-08-12 at 22 00 55

Every sport has his unique color and will appear with this color in the athletes profile and event feed that will be shown below.

App's Signup screen

"Signup With" / or be classic

Screen Shot 2021-07-22 at 10 14 25

Classic signing up

login

Log in

  • Log in with Facebook/Google/Email.
  • User will be asked for favorite sport (required).
  • After first log in, a tour in the app "Show me around" will be optional.
  • Maximum 3 steps registering - MUST!

App's Log-in screen:

loginx

TYPE OF USERS

1.Athlete:

The basic user, has profile:

  1. Photo (from facebook, google, instagram, gallery).
  2. Basic information (required): Name, Favorite sports, Location (based on gps).
  3. Statistics & Seasons - information about current athlete record event participations.
  4. every Athlete that creates an event becomes the event "captain".

2.Captains:

Are users who created the event. When captain leaves an event, other user will randomly become the captain (notification will be sent to the user).

Captains & Athletes will have the same profile style

Athlete profile view: (as owner):

  • can edit photo.
  • edit app settings.
  • see inbox.
  • manage events (can exit or see details, if exit a notification will be sent to the captain advising that someone left the event)
  • add more favorite sports.
  • Activity - notifications ( ex. someone wants to join a private event or someone cancelled their arrival).
  • Can accept or decline notification directly
  • Click on notification will show more details.

Athlete/Captain Page:

Screen Shot 2021-07-22 at 10 13 14

Athlete's user & app settings:

settings

Athlete profile view: (as visitor):

athlete-profile-visitor

  • See their upcoming events and ask to join them.
  • See statistical & Seasonal information (if user is not private)
  • Send a connection invitation.
  • ONLY if players are connected, visitor will be able to send a message.
  • Invite to an event/ if doesn't have an event will be directed to 1-Step create an event.

3.Coaches

Coaches are Athletes but Athletes are NOT coaches.

Besides all the athletes fields will have:

  1. Booking Schedule - Athletes can ask for an appointment, if the coach accepts the appointment the date and time will be occupied.
  2. Rating & Feedback - from athletes that had a training session with him.
  3. Images - a gallery of up to 5 images that the coach can "Show Off" his work.
  4. Other users can leave feedback and see other's feedback.
  5. "ATHLETE VIEW" button - navigates to the coaches athlete profile.

Coach Page:

Screen Shot 2021-07-22 at 10 13 39

  • Coaches cannot be private, and will be open to chat with everyone.

4. Admin - access to: bug & user report

Nearby Teams/Events

Only relevant events will appear, user can see how many members are in the event, and maximum amount of members.

An event will have a status bar of matching from the user to the event ( based on distance).

  • If there are few spots left a "Hurry up" message will appear.

  • Can mark as "Liked" and save potential events

(need to be added to prototype). (swipe left/right). (NOT in the first update).

Event + Coach Feed Preview:

Screen Shot 2021-07-22 at 10 11 26

Search event filters:

  • Search for event according to day and specific sport.
  • Search by keywords

Preview of event searched - Tennis only:

tennis-events

Event features:

  • Member that appears in:
  1. Blue: I'm in!
  2. Red: I'll Decide Later.
  3. Black & White: yet to answer!! (members that was invited)
  • Users will see themselves first in this screen, than Event captain and the others after them.

Those who didn't approve the event request will not appear.

  • Can be a one time event or scheduled every specific day.

Event page:

Screen Shot 2021-07-22 at 10 12 20

Event info in feed

  • Avatar of the event captain
  • City of the event
  • Distance from current device location to event location
  • Day counter - how many days until event, less than 2 days will appear in RED, less than 10 will appear in black, otherwise will appear in white.
  • Color of the event component will be based on the sport color
  • Event level: (Beginner, Amatuer, Proffesional, Legendery)
  • Current players amount / Max players amount
  • Event description - 2 lines of maximum

Event page with map view:

Screen Shot 2021-07-22 at 10 12 49

  • When sent an invitation it will appear as an invitation and a notification will be sent with all the details.

  • Event time & place can be imported to phone calendar.

  • One time event or a regular event:

  • Option A: A notification will be sent to the team members in order to know if they want to play again next week in the same time and place.

  • Option B: when creating event, captain will be asked if he wants the event to be regular or not.

  • import to calendar button.

  • who brings the ball button. (for events that marked as "with ball").

  • Nevigate to event button.

Chat messages notifications will be muted by default.

Users can unmute in "control panel".

When clicking on one of the profile pictures of your team members the user will be directed to his profile and be able to send a personal message.

Options when creating event:

1 Steps creating event..

Info to be collected:

  • Kind of sport, if has a few favorite sport - need do define which sport. (only user favorite sports will appear!).
  • Amount of people that can join.
  • Where & When the event will occur.
  • Level of the event - Slider with options (Beginner, Amatuer, Proffesional, Legendery)

Event creation initial state.

Screen Shot 2021-07-22 at 10 13 21

Event details filled:

create-event-filled

After creating the event, the user will be navigated to the event page.

Open event: (Events are open by default)

  • Everyone can join.
  • Everyone can see the members of the group.

Close event:

The picture when the event is private will appear grey.

people can join by invitation link and/or by asking to join (needs to be approved by captain)

Event Features:

Captain: (creator of the event)

will have all of the team member features and:

  1. Will decide if event is public (open for people to see & ask to join the event)
  2. only captain can approve new players (notification will be sent to group captain).
  3. for close & open events invite athletes nearby/friends.
  4. change event description

Chat:

  • Users can write custom message.
  • Every event chat will be automatically created with all Team Members.
  • Private chat will be possible only between event members

inbox will show private messages and event messages.

Push Notifications

Push notifications:

  1. When invited to an event.
  2. Private message.
  3. If user responded "Maybe" to an event, notification will be sent again closer to the event time (5 hours before).
  4. Was approved to an event, If he was not approved he will not receive anything.

Activity panel notifications:

  1. Captain: when someone left the event.
  2. Someone joined the event.
  3. A day after the match a notification will be sent to in order to know if they want to play again next week (Make a one time event usual). (maybe on create event page only, not sure yet).
  • Event chat messages are muted by default.

  • by default only "common event members" can send messages. Can be changed to "Everyone".

  • Language will be Hebrew or English (Same as system language).

Copyrights ©

  • App idea
  • App SRS
  • Ui/Ux design
  • Backend & Frontend

Created by David Abenhaim

© All rights reserved to David Abenhaim. Before forking/downloading repo please contact me. ©