Plings Frontend Architecture – React & GraphQL with Lovable.dev

🎯 Overview

Plings web frontend is built with React 18, generated and managed through Lovable.dev. The application relies on a unified GraphQL API for all data access, real-time updates and authentication, and all component code, state management and build tooling are React-based.

Lovable.dev acts as both the visual builder and the dev-ops pipeline:

Visual editing & scaffolding of React components (no need for a separate CRA/Vite setup).
Automatic TypeScript + TailwindCSS configuration.
One-click deploy to a preview URL or custom domain.
Native GitHub & Supabase integration for CI/CD and database access.

🚀 Quick Start

1 — Spin up the backend

cd backend && uvicorn main:app --reload

2 — Open the Lovable workspace

Navigate to https://app.lovable.dev and open the Plings project (or create one from the repository if it is the first run).
The visual editor will boot a local dev server – typically on http://localhost:3000 – hot-reloading your React components as you edit.
Ensure the GraphQL endpoint URL in the Lovable Environment panel points to http://localhost:8000/graphql.
Hit the big green Run ▶︎ button to start the React preview.

3 — Log in & explore

Use your Supabase credentials to authenticate.
Open two browser tabs to observe real-time GraphQL Subscriptions in action (see next section).
Test touch interactions on a mobile device or the Chrome DevTools device emulator.

🔄 Real-time Architecture with GraphQL

The frontend technology choice does not affect the backend contract; all communication still funnels through the single /graphql endpoint.

Queries – fetch data on initial load.
Mutations – create / update / delete data.
Subscriptions – bi-directional WebSocket channel for live updates.

Lovable generates strongly-typed hooks (via Apollo or urql, configurable in the Integrations tab) so components can stay concise and type-safe.

🏗️ Technical Stack

Concern	Technology
UI Framework	React 18 (function components + hooks)
Visual Builder	Lovable.dev (generates & hosts the React code)
GraphQL Client	Apollo Client v3 (generated hooks)
State Management	React Context / Apollo cache (optionally Zustand)
Styling	Tailwind CSS + custom design tokens
Build Tool	Managed by Lovable (Vite under the hood)
Testing	Vitest + React Testing Library

✨ Touch & Drag-and-Drop Interactions (React)

Lovable ships with built-in React utilities for gestures, but you can also drop down to libraries like @dnd-kit/core. Below is a condensed example for moving Spatial Objects by drag-and-drop while performing an optimistic GraphQL mutation.

import { useMutation, gql } from "@apollo/client";
import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core";

const MOVE_OBJECT = gql`
  mutation MoveObject($id: ID!, $target: ID!) {
    moveObject(objectId: $id, newContainerId: $target) {
      id
      containerId
    }
  }
`;

function ObjectCard({ obj }: { obj: SpatialObject }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: obj.id });
  return (
    <div ref={setNodeRef} style= {...listeners} {...attributes} className="card">
      {obj.name}
    </div>
  );
}

function Container({ container }: { container: SpatialObject }) {
  const { isOver, setNodeRef } = useDroppable({ id: container.id });
  const [moveObject] = useMutation(MOVE_OBJECT);

  return (
    <div
      ref={setNodeRef}
      className={`container ${isOver ? "bg-blue-50" : ""}`}
      onDrop={({ active }) => {
        moveObject({
          variables: { id: active.id, target: container.id },
          optimisticResponse: {
            moveObject: { __typename: "SpatialObject", id: active.id, containerId: container.id },
          },
        });
      }}
    >
      {/* render children here */}
    </div>
  );
}

📋 Code Organisation

frontend/
└── src/
    ├── components/     # React components generated by Lovable (editable)
    ├── graphql/        # *.graphql files used to generate hooks
    ├── pages/          # Next-style route pages (optional)
    ├── hooks/          # Custom React hooks
    └── styles/         # Tailwind config & design tokens

Lovable keeps its own build folder; committing the generated code back to GitHub is optional but recommended for auditability.

🔧 Development Guidelines

Keep components pure – derive all data via props or GraphQL hooks.
Use optimistic updates for latency-sensitive actions (drag & drop, inline edits).
Co-locate GraphQL fragments with the component that uses them – Lovable’s generator will handle the rest.
Test on mobile early – React hooks + Tailwind ensure good responsiveness, but verify gesture ergonomics.

🧪 Testing Strategy

Unit Tests – logic in hooks & util functions.
Component Tests – React Testing Library snapshots.
E2E Tests – Playwright with the GraphQL inspector.
Performance – Lighthouse in mobile emulation.

🔮 Roadmap

Replace temporary Zustand stores with generated Apollo cache helpers.
Introduce Service Workers for offline support.
Generate shared TypeScript types for the native React Native app.

🤝 Contributing

Fork the repository & open the project in Lovable.
Commit changes via the Lovable GitHub integration or push locally.
All pull requests run the CI (lint + vitest) before merging.

🎉 The React + Lovable stack provides a solid foundation for web and future native apps while preserving the strongly-typed GraphQL contract that powers Plings.

Search Results: