Skip to content

Comments

feat: implement start page with Create/Join room forms#69

Merged
underscorekadji merged 4 commits intomainfrom
copilot/fix-13
Aug 5, 2025
Merged

feat: implement start page with Create/Join room forms#69
underscorekadji merged 4 commits intomainfrom
copilot/fix-13

Conversation

Copy link
Contributor

Copilot AI commented Aug 5, 2025

This PR implements the start page layout with Create new room and Join by UUID forms, replacing the previous test implementation at the root route (/).

Changes Made

Start Page Component (/src/app/page.tsx)

  • Replaced the live text sync test implementation with a proper start page
  • Created clean, responsive layout using existing Tailwind CSS styles
  • Implemented two main sections: Create Room and Join Room

Create New Room Feature

  • Added "Create Room" button that integrates with existing /api/room POST endpoint
  • Includes loading state with spinner animation during API call
  • Handles API errors gracefully with user-friendly error messages
  • Redirects to /room/{roomId} on successful room creation

Join Existing Room Feature

  • Added form with UUID input field for joining existing rooms
  • Implements client-side UUID format validation using regex pattern
  • Shows appropriate error messages for invalid UUIDs or empty input
  • Redirects to /room/{roomId} when valid UUID is provided
  • Includes loading state during navigation

UI/UX Improvements

  • Responsive design that works on mobile and desktop
  • Consistent styling with the existing application theme
  • Loading spinners for better user feedback
  • Clear error messaging for both validation and API failures
  • Proper form handling with prevent default and validation

Technical Details

  • Uses React hooks (useState) for state management
  • Proper TypeScript typing for API responses
  • Client-side navigation using window.location.href
  • Form validation with regex for UUID v4 format
  • Error boundary handling for network failures

The implementation follows the existing code patterns and maintains all build, lint, and test requirements. All 193 existing tests continue to pass.

![Start Page Implementation](https://github.com/user-attachments/assets/09f24b3c-5a11-429c-84bb-f896b2074e0a)

Fixes #13.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

- Replace test implementation with proper start page
- Add Create Room button with API integration
- Add Join Room form with UUID validation
- Implement responsive layout and error handling
- Add loading states for better UX

Co-authored-by: underscorekadji <3449713+underscorekadji@users.noreply.github.com>
Copilot AI changed the title [WIP] [2.1] Start Page / – layout, Create / Join forms feat: implement start page with Create/Join room forms Aug 5, 2025
Copilot AI requested a review from underscorekadji August 5, 2025 17:23
@underscorekadji underscorekadji requested a review from Copilot August 5, 2025 17:33
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR transforms the homepage from a live text sync testing interface into a proper start page with room creation and joining functionality. The implementation provides a clean, user-friendly interface for users to either create new rooms or join existing ones by UUID.

  • Replaces test implementation with production-ready start page interface
  • Implements room creation with API integration and error handling
  • Adds UUID-based room joining with client-side validation

@underscorekadji underscorekadji marked this pull request as ready for review August 5, 2025 20:28
@underscorekadji underscorekadji merged commit d800408 into main Aug 5, 2025
3 checks passed
@underscorekadji underscorekadji deleted the copilot/fix-13 branch August 5, 2025 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[2.1] Start Page / – layout, Create / Join forms

2 participants