.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.scss

@@ -0,0 +1,100 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+.recipe-form {
+	@include card;
+	max-width: 680px;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: $spacing-lg;
+	padding: $spacing-lg;
+
+	h2 {
+		margin: 0;
+		font-size: $font-size-xl;
+		color: $text-primary;
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: $spacing-xs;
+
+		&.field-inline {
+			flex-direction: row;
+			align-items: center;
+			gap: $spacing-md;
+		}
+
+		label {
+			color: $text-secondary;
+			font-size: $font-size-sm;
+			display: flex;
+			flex-direction: column;
+			gap: $spacing-xs;
+
+			input[type="text"],
+			input[type="email"],
+			input:not([type]),
+			select {
+				padding: $spacing-sm $spacing-md;
+				border: 2px solid $border-color;
+				border-radius: $radius-md;
+				font-size: $font-size-base;
+				background: $bg-primary;
+				color: $text-primary;
+				transition: border-color $transition-base, box-shadow $transition-base;
+			}
+
+			input:focus,
+			select:focus {
+				outline: none;
+				border-color: $primary;
+				box-shadow: 0 0 0 4px rgba($primary, 0.06);
+			}
+		}
+
+		.checkbox-label {
+			display: inline-flex;
+			align-items: center;
+			gap: $spacing-sm;
+			font-size: $font-size-base;
+			color: $text-primary;
+
+			input[type="checkbox"] {
+				width: 18px;
+				height: 18px;
+			}
+		}
+	}
+
+	.form-actions {
+		display: flex;
+		gap: $spacing-sm;
+		justify-content: flex-end;
+
+		.action-btn {
+			@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+		}
+	}
+}
+
+.form-subtitle {
+	margin: 0;
+	color: $text-secondary;
+	font-size: $font-size-sm;
+}
+
+.form-error {
+	background: rgba($error, 0.08);
+	color: $error;
+	padding: $spacing-sm $spacing-md;
+	border-radius: $radius-sm;
+}
+
+.select-input {
+	width: 100%;
+}
+

src/routes/Recipes/RecipeForm.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { apiService } from '../../services/api';
 import type { AbraServer } from '../../types';
+import './RecipeForm.scss';
 
 
 
@@ -50,14 +51,19 @@ function RecipeForm({ recipe, onClose }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form className="recipe-form" onSubmit={handleSubmit}>
       <h2>{recipe.name}</h2>
-      { loading ? (<p> Loading servers...</p> 
+      <p className="form-subtitle">Configure and deploy this recipe.</p>
+      {error && <div className="form-error">{error}</div>}
+
+      { loading ? (
+        <p className="loading">Loading servers...</p>
       ) : (
-      <div>
-        <label>
-            Choose a server to deploy to: 
+        <div className="field">
+          <label>
+            Choose a server to deploy to:
             <select
+              className="select-input"
               value={selectedServer}
               onChange={(e) => setSelectedServer(e.target.value)}
             >
@@ -68,43 +74,48 @@ function RecipeForm({ recipe, onClose }) {
                 </option>
               ))}
             </select>
-        </label>
-      </div>
+          </label>
+        </div>
       )}
-      <div> 
+
+      <div className="field">
         <label>
           Domain:
           <input
-            name="Domain"
-            value={formData.name}
+            name="domain"
+            placeholder="example.com"
+            value={formData.domain}
             onChange={handleChange}
           />
         </label>
       </div>
-      <div> 
-        <label>
-          Chaos Mode Enabled: 
+
+      <div className="field field-inline">
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="chaos"
-            onChange={handleChange}
+            checked={formData.chaos}
+            onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
           />
+          Chaos Mode
         </label>
-      </div>
 
-      <div> 
-        <label>
-          Autogenerate Secrets: 
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="secrets"
-            onChange={handleChange}
+            checked={formData.secrets}
+            onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
           />
+          Autogenerate Secrets
         </label>
       </div>
 
-      <button type="submit">Submit</button>
-      <button type="button" onClick={onClose}>Cancel</button>
+      <div className="form-actions">
+        <button className="action-btn primary" type="submit">Submit</button>
+        <button className="action-btn" type="button" onClick={onClose}>Cancel</button>
+      </div>
     </form>
   );
 }

src/routes/Recipes/Recipes.scss

@@ -11,9 +11,10 @@
   @extend .page-content;
 }
 
-// Servers grid
+// Recipes grid
 .recipes-grid {
   display: grid;
+  justify-content: stretch;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
@@ -23,20 +24,16 @@
   }
 }
 
-// Server card
+// Recipe card
 .recipe-card {
   @include card;
   @include card-dimensions(320px, 180px);
-  display: grid;
+  row-gap: 1em;
   grid-template-rows: 1fr 2fr auto 0.9fr;
   transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
+  max-width: 30em;
 
   .recipe-header {
     display: flex;

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';
 
@@ -51,7 +51,7 @@ export const Recipes: React.FC = () => {
   }, [recipesData]);
 
 
-  // Filter apps
+  // Filter recipes
   const filteredRecipes = useMemo(() => {
     return allRecipes.filter(recipe => {
       const matchesSearch = 
@@ -94,36 +94,20 @@ export const Recipes: React.FC = () => {
       <Header />
       <main className="recipes-content">
         <div className="page-header">
-          <h1>Applications</h1>
+          <h1>Recipes</h1>
           <p className="subtitle">{stats.total} recipes</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Recipes</p>
-            </div>
-          </div>
-        </div>
-
         {/* Filters */}
         <div className="filters">
           <input
             type="text"
-            placeholder="Search apps by name, recipe, or domain..."
+            placeholder="Search recipes by name or description..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
 
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
         </div>
 
         {/* Server Cards */}
@@ -135,7 +119,6 @@ export const Recipes: React.FC = () => {
               <div 
                 key={recipe.name} 
                 className="recipe-card"
-                style={{ cursor: 'pointer' }}
               >
                 <div className="recipe-header">
                   <div className="recipe-title">

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';