Skip to main content

​
Meridian Frontend Developer Documentation

Welcome to the Meridian frontend documentation. This guide is designed to help developers navigate and understand the React-based frontend of the project. It will outline the key components, structure, and development workflow.

​
Overview

The Meridian frontend is built with React and styled using SCSS. The application is designed to deliver a seamless user experience for finding study spaces, managing preferences, collaborating with friends, and engaging with campus organizations.
  • Frontend Directory: Meridian/frontend
  • Primary Tech Stack:
    • React
    • SCSS
    • Context API for state management
    • WebSocket integration for real-time updates

​
Key Features

​
1. Context Management

The frontend uses the Context API to manage global state, allowing components to share data efficiently.
  • AuthContext.js: Manages user authentication state.
  • CacheContext.js: Handles caching for API responses.
  • ErrorContext.js: Tracks and manages application errors.
  • NotificationContext.js: Centralizes notification handling.
  • ProfileCreationContext.js: Facilitates the profile setup process.
  • WebSocketContext.js: Integrates WebSocket connections for real-time updates.

​
2. Routing

The project uses react-router-dom for handling page navigation. Key routes include:
  • /: Landing page.
  • /login: User login.
  • /register: User registration.
  • /profile: Profile management.
  • /classroom: Classroom-related functionality.

​
3. Component Highlights

The application’s UI is modular, with reusable components organized in the components/ directory.
Key Components:
  • CalendarComponents/:
    • Calendar.jsx: The primary calendar view.
    • DayColumn.jsx: Displays individual days within the calendar.
    • MobileCalendar.jsx: A mobile-friendly calendar interface.
  • Classroom/:
    • Classroom.jsx: The main page for classroom details.
    • Subcomponents include CheckedIn for live check-ins and RatingGraph for visualizing classroom ratings.
  • SearchBar/:
    • SearchBar.jsx: Provides users with a search interface for classrooms.
  • Popup/:
    • Popup.jsx: Displays modal dialogs with animations and blackout functionality.
  • Analytics/:
    • Analytics.jsx: A dashboard for viewing study metrics.

​
4. Hooks

Custom hooks simplify complex logic and promote reusability.
  • useAuth.js: Provides authentication utilities.
  • useFetch.js: Simplifies API calls.
  • useClickOutside.js: Handles clicks outside an element for popups.
  • useWebSocket.js: Manages WebSocket connections.
  • useGetAnalytics.js: Fetches and processes analytics data.

​
5. Assets and Styling

  • Fonts: Custom fonts (e.g., Satoshi-Black.otf) are stored in assets/fonts.css.
  • Icons and Images: Organized in assets/Icons and assets/Brand Image.
  • SCSS Files: Each component has a dedicated SCSS file for styling.

​
Frontend Directory Structure

Below is an overview of the frontend directory structure: 
frontend/
├── README.md
├── package.json
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── App.css
│   ├── assets/
│   │   ├── Fonts/
│   │   └── Icons/
│   ├── components/
│   │   ├── CalendarComponents/
│   │   ├── Classroom/
│   │   ├── SearchBar/
│   │   └── Popup/
│   ├── context/
│   │   ├── AuthContext.js
│   │   ├── CacheContext.js
│   │   └── WebSocketContext.js
│   ├── hooks/
│   │   ├── useAuth.js
│   │   ├── useFetch.js
│   │   └── useWebSocket.js
│   ├── pages/
│   │   ├── Login.jsx
│   │   ├── Register.jsx
│   │   └── Classroom.jsx
│   └── utils/
│       └── postRequest.js

​
Running the Frontend Locally

​
Prerequisites

  • Ensure Node.js (v12 or higher) and npm are installed.

​
Installation

Navigate to the frontend directory and install dependencies: 
cd frontend
npm install

​
Starting the Development Server

Run the following command to start the React development server: 
npm start
This will launch the frontend on http://localhost:3000.

​
Development Tips

​
Working with Context

Each context file in the context/ directory exports a provider and a custom hook for easier integration. Example: 
import { useAuth } from './context/AuthContext';

function Component() {
  const { user, login } = useAuth();

  return (
    <div>
      {user ? `Welcome, ${user.name}` : 'Please log in.'}
    </div>
  );
}

​
Styling Best Practices

  • Each component has a dedicated SCSS file. Follow the BEM (Block Element Modifier) naming convention for class names.
  • Example:
.Classroom {
  &__header {
    font-size: 1.5rem;
  }

  &__details {
    margin: 1rem 0;
  }
}

​
Debugging Tips

  • Use the React Developer Tools extension for Chrome/Firefox to inspect component hierarchies and state.
  • Enable Redux-like debugging for Context with middleware (if added).

​
Next Steps

  • Explore Components: Familiarize yourself with the modular components in the components/ directory.
  • Check Contexts: Review how state is managed with Context API.
  • Start Building: Modify or add new features as needed.
For further details, refer to the full documentation in the documentation/frontend/ directory or reach out to the project maintainer.