Developer Handbook

This guide introduces the Solid Watchparty project, a platform for shared media viewing experiences online. This document covers the project's structure, technologies, and development guidelines.

Getting Started

Frontend

1. Clone the Repository

   git clone [email protected]:SolidLabResearch/solid-watch-party.git
   

2. Navigate to directory

   cd watchparty/solid-watchparty/
   

3. Install Dependencies

   npm install
   

4. Run the Development Server

   npm run dev
   

Backend

It is recommended to use the Community Solid Server (CSS) as backend while developing. More information is available on the css github page.

Technology Stack

Frontend Technologies

The frontend is built with React as framework, Tailwind for styling purposes, and Vite for frontend tooling.

Backend Technologies

The backend architecture is decentralized, using SOLID Pods, SPARQL queries and query engines such as Communica and Incremunica. Inrupt Client Libs are used for authentication, session management and permission management.

Data layout

The datalayout (v1.3.0) is modelled in the following way: The code snippet for generating this layout can be found here.

Some points regarding this layout:

1. The creator of a watchparty stores all relevant information in his own pod, namely the Host Pod. If this creator also participates int the party, he himself also becomes an attendee.
2. At the moment specific storage locations are used, a user cannot yet modify these locations.
   • MessageBox and Message are stored in the attendee's pod under (single file per watchparty):

   {pod-url}/watchparty/myMessages/MSG{room-url}
   

   • Room, Watching Event, ControlAction are stored in the host pod under:

   {pod-url}/watchparty/myRooms/{original-room-name}{creation-date}/room
   

   • RegisterAction for a room are saved under:

   {pod-url}/watchparty/myRooms/{original-room-name}{creation-date}/register
   

Project Structure and Naming Conventions

Directory overview

Root Directory (./)

• Configuration Files:
  • .editorconfig: Ensures consistent coding styles across various editors.
• Main Project Folder (solid-watchparty/):
  • The central hub containing all the source files and subdirectories.

Main Project Directory (solid-watchparty/)

• Configuration Files:
  • Specific files for tools (.eslintrc.cjs, postcss.config.js, tailwind.config.js, vite.config.js) guide the project setup.
• Package Files:
  • package.json and package-lock.json for npm, yarn.lock for Yarn handle dependency management.
• Entry Points:
  • index.html as the main HTML file and main.jsx for JavaScript entry.
• Source Code (src/):
  • Central code repository, including React components (App.jsx), configuration (config.js), and various specialized subdirectories:
    • assets/: Static assets like images and fonts.
    • components/: React components, named in PascalCase or prefixed with SW for project-specific components (e.g., SWNavbar.jsx).
    • pages/: Contains individual page components, aiding in routing and page structure.
    • services/: Service logic files, particularly those handling SOLID Pod operations (e.g., message.solidservice.js).
    • styles/: Styling files, following kebab-case naming (e.g., general.css).
    • utils/: Utility functions and helpers, named in camelCase.
• Public Assets (public/):
  • For publicly accessible assets.

Naming Conventions Summary

• JavaScript and JSX Files:
  • React components and Pages in PascalCase (App.jsx), project-specific components prefixed with SW (SWLoginButton.jsx), and other JS files in camelCase (config.js).
• CSS Files:
  • Use kebab-case (e.g., general.css).
• Service Files:
  • SOLID Pod-related files with a .solidservice.js suffix.
• Directories:
  • Named in lowercase, hyphens for separation (e.g., assets, services).

This structure and naming convention ensure that each file and directory's purpose is easily identifiable, making the Solid Watchparty project navigable and easier to maintain for developers.