​

Compass Frontend Development

​

Overview

​

Key Technologies

• React - UI framework
• SCSS - Styling
• Context API - State management
• React Router - Navigation
• WebSocket - Real-time updates

​

Component Structure

​

Core Components

frontend/src/
├── components/
│   ├── CalendarComponents/    # Calendar views for room booking
│   │   ├── Calendar.jsx
│   │   ├── DayColumn.jsx
│   │   └── MobileCalendar.jsx
│   ├── Classroom/            # Room detail views
│   │   ├── Classroom.jsx
│   │   ├── CheckedIn.jsx
│   │   └── RatingGraph.jsx
│   ├── SearchBar/            # Room search functionality
│   └── Popup/                # Modal dialogs
├── pages/
│   ├── Classroom.jsx         # Room detail page
│   └── CreateEvent.jsx       # Event creation
└── context/
    ├── AuthContext.js        # User authentication
    ├── CacheContext.js       # API caching
    └── WebSocketContext.js  # Real-time updates

​

Key Features

​

Room Discovery

• Browse available rooms by location, capacity, and amenities
• View real-time availability calendars
• Filter by specific requirements (projector, whiteboard, etc.)
• See ratings and reviews from other users

​

Booking System

// Example booking component
import { useAuth } from '../context/AuthContext';
import { useWebSocket } from '../context/WebSocketContext';

const BookingComponent = () => {
  const { user } = useAuth();
  const { sendMessage } = useWebSocket();
  
  const handleBooking = async (roomId, timeSlot) => {
    // Booking logic
    await bookRoom(roomId, timeSlot);
    sendMessage('booking_created', { roomId, timeSlot });
  };
  
  return (
    // Booking UI
  );
};

​

Real-time Updates

• Live availability updates
• Instant booking confirmations
• Real-time occupancy status
• Notification of room changes

​

State Management

​

Context Providers

const { user, login, logout } = useAuth();

const { getCached, setCache } = useCache();

const { isConnected, sendMessage, subscribe } = useWebSocket();

​

Routing

• / - Landing page with room search
• /classroom/:id - Room detail page
• /create-event - Event creation with room booking
• /feature-admin/compass - Admin dashboard for Compass

​

Styling Guidelines

.Classroom {
  &__header {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  &__details {
    display: flex;
    gap: 1rem;
  }
  
  &--featured {
    border: 2px solid var(--primary-color);
  }
}

​

Development Workflow

1. Start Development Server
   cd Meridian/frontend
   npm start
   
2. Make Component Changes
   • Edit files in src/components/
   • Changes auto-reload via hot module replacement
3. Test Components
   npm test
   

​

Best Practices

• Component Reusability: Create reusable components for common UI patterns
• Performance: Use React.memo for expensive components
• Accessibility: Follow WCAG guidelines for inclusive design
• Error Handling: Implement error boundaries for graceful failures

​

Integration Points

• Backend API: RESTful endpoints for room and event data
• WebSocket Server: Real-time updates and notifications
• Calendar Systems: External calendar integration
• Authentication: SAML/OAuth for user login

​

Related pages