Skip to content

Sprint4

Jump to bottom
HardCoder19 edited this page Apr 22, 2025 · 4 revisions

Sprint 4 Report - Sportify

Work Completed in Sprint 4

In Sprint 4, we focused on enhancing the user interaction features and making the platform more integrated and intuitive. We implemented chat functionality for event participants, enabling smoother communication within events. The backend was refined to better support frontend needs, such as adding missing participant and owner details in the event queries and fixing endpoint inconsistencies. Additionally, Google SSO was finally integrated for login, and the frontend was synced with backend APIs to bring full-stack functionality to the platform. Over this sprint, our frontend team implemented several significant enhancements to the Sportify platform, dramatically improving both functionality and user experience. We completely revamped the Home page with an intuitive search feature that allows users to filter events by title or description, complemented by a clean card-based UI displaying event details with sport-specific emojis and participant counts. The EventDetails page received a major upgrade with an interactive map integration, real-time participant tracking, and a WebSocket-powered chat system enabling event attendees to communicate seamlessly. We also refined the event creation workflow with Google Maps location selection, making it easier for users to precisely pinpoint event locations. The authentication flow was strengthened with proper JWT token handling and profile verification, ensuring users are directed to appropriate pages based on their profile status. Additionally, we implemented responsive design improvements across all pages, enhanced navigation between components, and added visual feedback for user actions like joining or leaving events. These frontend changes collectively create a more cohesive, intuitive, and engaging platform for sports enthusiasts to connect and organize activities.

Issues for Sprint 4

Issue Number Title Objective Status
74 Enable Chat for Event Participants Allow users to chat within events they joined Completed
75 Simplified GET Events Endpoint Create new GET endpoint without requiring body Completed
78 Add Participants to Event List Modify query to include participant details Completed
79 Include Owner Details in Events Fetch event owner info in GET all events Completed
80 Simplify Profile API Payload Use middleware context to fetch user email Completed
82 Frontend-Backend Event Integration Complete integration of event-related APIs on frontend Completed
12 Implement Google SSO Add Google login for streamlined authentication Completed
81 Update DB Migrations for Google SSO Modify database to support Google SSO user model Completed

1. Chat Feature for Events

We introduced a real-time chat feature that enables participants of an event to communicate with each other directly through the platform. This supports:

  • Pre-event coordination (timing, equipment, etc.)
  • Quick Q&A between attendees
  • Last-minute changes or cancellations

Each event now has a dedicated chatroom, accessible once a user joins the event.

2. Backend API Improvements

Event API Enhancements

  • Created a new lightweight GET /events-simple endpoint, which returns all the events without needing a request body.
  • Enhanced the original GET /events to include:
    • Event participants list
    • Event owner's details (name, email, etc.)

Profile API Fixes

  • Previously required email in PUT/POST payload. Now, email is fetched from middleware context, ensuring data security and consistency.

3. Google SSO Integration

We finally rolled out Google Single Sign-On (SSO) to simplify the login process and reduce signup friction. This feature:

  • Allows users to log in with their Google account
  • Stores relevant user data via updated migrations
  • Works seamlessly with our existing auth middleware

4. Full Frontend Integration

We completed the frontend integration with all event endpoints, including:

  • Displaying participant info
  • Owner info on event tiles
  • Updating profile without needing user email
  • Ensuring chat, join, and leave functionalities are fully synced with backend
  • integrating google sso

5. Database Migrations

To support Google SSO, we made several database updates:

  • Added new fields for OAuth authentication in our auth tables
  • Updated user model and login flow to handle both email/password and Google login methods

6. Major Frontend Changes and enhancements -

Home Page Enhancements

  • Intuitive Search Feature: Implemented dynamic filtering of events by title or description, allowing users to quickly find relevant activities.

Event Details Improvements

  • Interactive Map Integration: Added map visualization of event locations to help users easily find where activities are taking place.

Profile Page Development

  • Comprehensive User Profiles: Created a robust profile page where users can manage personal information, sports preferences, and view a personalized dashboard of their activity.

My Events Dashboard

  • Event Management Interface: Added sections in the profile page that display events created by the user and events they've joined, enabling easy tracking and management of sports activities.

Event Creation Workflow

  • Streamlined Event Creation: Developed an intuitive form with validation for creating new sports events with all necessary details including title, sport type, location, and participant limits.

Event Update Functionality

  • Event Modification System: Implemented a dedicated page for event owners to update event details, with pre-populated fields and real-time validation for a seamless editing experience.

Real-time Communication

  • WebSocket-powered Chat System: Enabled seamless communication between event participants through a real-time messaging interface.

Location Selection

  • Google Maps Integration: Refined event creation workflow with precise location selection capabilities for more accurate event coordination.

Authentication Enhancements

  • JWT Token Handling: Strengthened user authentication with proper token management and profile verification for secure access control.

UI/UX Improvements

  • Responsive Design: Implemented responsive layouts across all pages for optimal viewing on various devices and screen sizes.

Navigation Refinements

  • Enhanced Component Navigation: Improved the flow between different sections of the application for a more intuitive user journey.

User Feedback

  • Visual Action Feedback: Added clear visual indicators for user actions like joining or leaving events to improve interaction clarity.

Backend and Frontend Integration

  • Seamless API Communication: Optimized the data exchange between React frontend and Go backend through standardized API calls, implementing proper error handling and state management to ensure consistent user experience across all features.

Jest Unit Tests

  • src/__tests__/CreateEvent.test.js - Tests for event creation form rendering and validation
  • src/__tests__/Login.test.js - Tests for login form functionality and navigation
  • src/__tests__/Main.test.js - Tests for main landing page components and navigation
  • src/App.test.js - Basic tests for the main App component

Cypress End-to-End Tests

  • cypress/e2e/login.cy.js - End-to-end tests for login flow, profile access, and event creation

Cypress Component Tests

  • cypress/component/Main.cy.js - Component tests for the main landing page navigation and UI elements
  • cypress/component/Profile.cy.js - Component tests for profile creation form validation and interactions
  • cypress/component/MyProfile.cy.js - Component tests for user profile dashboard and event management
  • cypress/component/Register.cy.js - Component tests for user registration form validation and navigation
  • cypress/component/Forgotpass.cy.js - Component tests for password reset functionality

Testing Configuration

  • jest.config.js - Jest configuration with JSDOM environment setup
  • jest.setup.js - Global test setup with testing library imports
  • cypress.config.js - Cypress configuration with webpack preprocessor
  • src/setupTests.js - Setup file for React Testing Library

7. API Documentation & Backend Endpoints

Event APIs

GET /events/all

  • Description: Retrieves a list of events with full detail.
  • Response (200 OK):
[
  {
    "id": 1,
    "event_owner": 2,
    "owner_first_name": "Alice",
    "owner_last_name": "Smith",
    "owner_email": "alice@example.com",
    "sport": "Basketball",
    "event_datetime": "2025-05-10T14:00:00Z",
    "max_players": 10,
    "location_name": "Community Center",
    "latitude": 40.712776,
    "longitude": -74.005974,
    "description": "Pickup basketball game",
    "title": "Weekend Hoops",
    "is_full": false,
    "created_at": "2025-04-18T10:00:00Z",
    "updated_at": "2025-04-18T10:00:00Z",
    "registered_count": 3,
    "participants": [
      {
        "id": 101,
        "event_id": 1,
        "user_id": 4,
        "first_name": "John",
        "last_name": "Doe",
        "joined_at": "2025-04-18T12:00:00Z"
      },
      {
        "id": 102,
        "event_id": 1,
        "user_id": 5,
        "first_name": "Jane",
        "last_name": "Smith",
        "joined_at": "2025-04-18T12:30:00Z"
      }
    ]
  }
]

GET /events/:id/chat

  • Description: Retrieves chat messages for a specific event ID.
  • Headers:
Authorization: Bearer JWT_TOKEN_HERE
  • Response: Returns a list of chat messages (structure varies based on implementation).

GET /auth/google

  • Description: Initiates Google SSO login.
  • Response: Redirects to Google OAuth.

GET /auth/google/callback

  • Description: Handles callback from Google SSO and processes the login.
  • Response: Creates user session or returns JWT token.

8. Backend Unit Tests

WebSocket and Chat Tests

The backend includes comprehensive unit tests for the WebSocket and chat functionality, ensuring reliable real-time communication:

WebSocket Hub Tests (backend/internal/websocket/websocket_test.go):

  1. TestNewHub: Verifies proper hub initialization with all required channels and maps
  2. TestHubRun: Tests the hub's main event loop, including:
    • Client registration
    • Client unregistration
    • Message broadcasting
  3. TestHandleWebSocket: Tests WebSocket connection handling:
    • Connection establishment
    • Message sending/receiving
    • Client registration in the hub
  4. TestMessageBroadcast: Validates message broadcasting between multiple clients:
    • Message delivery to all connected clients
    • Proper message formatting
    • Correct sender information
  5. TestMessageHistory: Ensures new clients receive message history when joining:
    • Message storage
    • History retrieval
    • Proper message ordering
  6. TestMessageJSON: Verifies proper JSON serialization/deserialization of chat messages

Event Integration Tests (backend/cmd/api/events_test.go):

  1. TestEventStore_Join: Tests event joining functionality:
    • Successful join operation
    • Duplicate join prevention
    • Invalid event handling
  2. TestCreateEventHandler: Validates event creation with WebSocket support
  3. TestGetEventHandler: Tests event retrieval with participant information
  4. TestUpdateEventHandler: Ensures proper event updates
  5. TestDeleteEventHandler: Verifies event deletion and cleanup

Authentication Tests (backend/internal/auth/jwt_test.go):

  1. TestJWTAuthenticator_GenerateToken: Validates token generation for WebSocket authentication
  2. TestJWTAuthenticator_ValidateToken_Success: Tests successful token validation
  3. TestJWTAuthenticator_ValidateToken_InvalidToken: Verifies rejection of invalid tokens
  4. TestJWTAuthenticator_ValidateToken_WrongSecret: Ensures token security

These tests ensure the reliability and security of our chat and WebSocket implementation, covering:

  • Connection handling
  • Message broadcasting
  • Authentication and authorization
  • Error handling
  • Data persistence
  • Real-time communication
  • Client management

9. Github Repository Link

Here's our Github Repository for Sportify - Sportify Repo

10. Github Project

Here's our Github Project Board - Sportify Project Board

11. Docs

This document is also available in our Github Wiki Page

We have also updated our Design Docs with the latest architecture and changes in this sprint.

Clone this wiki locally