.env.example

@@ -1,5 +0,0 @@
-# API base URL for the backend that wraps the abra CLI
-VITE_API_URL=http://localhost:3000/api
-
-# Set to 'true' to use mock data
-VITE_MOCK_AUTH=true

README.md

@@ -1,7 +1,52 @@
-# Coop Cloud Front 
+# Coop Cloud Front
 
-This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users set up and manage VPSs and docker images through a web UI.
+Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for
+managing VPSs, containers and application deployments.
 
-## Still a work in progess!
+This repository contains a Vite + React + TypeScript app styled
+with SCSS.
 
-## This is built with react, typescript, scss, and vite
+## Quick start
+
+- Install dependencies (pnpm is recommended):
+
+pnpm install
+pnpm dev
+
+```
+
+The app uses Vite; start the dev server with `pnpm dev`.
+
+## Environment
+
+- The app reads runtime flags from Vite env variables. The default build uses mocked api data.
+-To deploy on a real API without mocking, run:
+pnpm start:prod
+
+Modify `.env` file at the project root if you need to override values for
+development (see Vite docs for env var conventions).
+
+## Scripts
+
+- `pnpm dev` — start dev server
+- `pnpm build` — run TypeScript and build production assets
+- `pnpm preview` — preview production build locally
+- `pnpm lint` — run ESLint
+- `pnpm lint:scss` — run Stylelint
+- `pnpm format` — format with Prettier
+
+## Notes about local development
+
+- The repo contains mock JSON and a `mockApi` service to develop UI without
+	a backend. Toggle mock mode with `VITE_MOCK_AUTH=true`.
+- Routes are client-side using `react-router-dom`.
+
+## Next steps / suggested work items
+
+- Add form validation and better UX for `RecipeForm`.
+- Improve accessibility.
+- Add unit tests.
+- Improve responsive layouts and card grid behaviour on narrow screens.
+- Add deployment docs and production environment variables.
+
+---

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
+    "start:prod": "VITE_MOCK_AUTH=false pnpm start",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

src/routes/Apps/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
 import { Terminal } from '../../components/Terminal/Terminal';
 import { apiService } from '../../services/api';

src/routes/Recipes/RecipeForm.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { apiService } from '../../services/api';
 import type { AbraServer } from '../../types';
 import './RecipeForm.scss';

src/routes/Recipes/Recipes.scss

@@ -11,7 +11,7 @@
   @extend .page-content;
 }
 
-// Servers grid
+// Recipes grid
 .recipes-grid {
   display: grid;
   justify-content: stretch;
@@ -24,7 +24,7 @@
   }
 }
 
-// Server card
+// Recipe card
 .recipe-card {
   @include card;
   @include card-dimensions(320px, 180px);

src/routes/Recipes/Recipes.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
 import { apiService } from '../../services/api';
-import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
+import type { AbraApp, AbraRecipe, AppWithServer } from '../../types';
 import RecipeForm from './RecipeForm.tsx'
 import './Recipes.scss';
 

src/routes/Servers/Server.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
 import { Terminal } from '../../components/Terminal/Terminal';
 import { apiService } from '../../services/api';

src/services/api.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
 
 // Log entry type
 export type LogEntry = {

src/services/mockApi.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
 import appsData from './mock-apps.json';
 import serversData from './mock-servers.json';
 import logsData from './mock-logs.json';