update README, add build script for NoMock

Reviewed-on: #8

.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/assets/scss/_global.scss

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+
 body {
   margin: 0;
   padding: 0;
@@ -85,6 +86,7 @@ body {
   // Modifier classes for colored borders
   &.upgrade {
     border-left: 4px solid $primary-light;
+    cursor: none;
   }
 
   &.chaos {
@@ -242,6 +244,9 @@ body {
     box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
   }
 }
+.filter-chip {
+  cursor: default;
+}
 
 // Results count
 .results-count {

src/components/Header/Header.tsx

@@ -17,15 +17,15 @@ return(
         <img className="logo" src={logo}/>
       </h1>
       <nav className="nav">
-        <button onClick={() => navigate('/dashboard')} className="nav-link">
-          Dashboard
-        </button>
         <button onClick={() => navigate('/apps')} className="nav-link">
           Apps
         </button>
         <button onClick={() => navigate('/servers')} className="nav-link">
           Servers
         </button>
+        <button onClick={() => navigate('/recipes')} className="nav-link">
+          Recipes
+        </button>
       </nav>
     </div>
   </header>

src/components/Header/_Header.scss

@@ -27,12 +27,14 @@
     margin: 0;
     display: inline-block;
     max-width: 100%;
+    cursor: pointer;
   }
 
   .nav {
     display: flex;
     gap: $spacing-sm;
     flex: 1;
+    text-align: center;
 
     @media (max-width: 768px) {
       width: 100%;

src/routes/Apps/App.scss

@@ -1,6 +1,8 @@
 @use '../../assets/scss/variables' as *;
 @use '../../assets/scss/mixins' as *;
 @use '../../assets/scss/global' as *;
+@use "sass:color";
+
 
 .app-detail-page {
   @extend .page-wrapper;
@@ -51,7 +53,7 @@
 
   &.primary {
     background: $primary;
-    color: white;
+    color: $text-primary;
     border-color: $primary;
 
     &:hover:not(:disabled) {
@@ -64,10 +66,6 @@
     background: $bg-secondary;
     color: $text-primary;
     border-color: $border-color;
-
-    &:hover:not(:disabled) {
-      background: darken($bg-secondary, 5%);
-    }
   }
 
   &.danger {
@@ -76,7 +74,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: darken($error, 10%);
+      background: color.adjust($error, $lightness: -10%);    
     }
   }
 }
@@ -119,34 +117,34 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: $spacing-lg;
-  
-  .info-item {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-xs;
-    
-    label {
-      font-size: $font-size-xs;
-      color: $text-secondary;
-      font-weight: $font-weight-medium;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    
-    span {
-      font-size: $font-size-base;
-      color: $text-primary;
-    }
-    
-    .no-value {
-      color: $text-muted;
-      font-style: italic;
-    }
-    
-    .chaos-active {
-      color: darken($info, 10%);
-      font-weight: $font-weight-medium;
-    }
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+
+  label {
+    font-size: $font-size-xs;
+    color: $text-secondary;
+    font-weight: $font-weight-medium;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  span {
+    font-size: $font-size-base;
+    color: $text-primary;
+  }
+
+  .no-value {
+    color: $text-muted;
+    font-style: italic;
+  }
+
+  .chaos-active {
+    background: color.adjust($info, $lightness: -10%);    
+    font-weight: $font-weight-medium;
   }
 }
 
@@ -268,7 +266,7 @@
         transition: all $transition-base;
 
         &:hover:not(:disabled) {
-          background: darken($warning, 10%);
+          background: color.adjust($warning, $lightness: -10%);
           transform: translateY(-1px);
         }
 
@@ -283,7 +281,7 @@
   .version-latest {
     padding: $spacing-md;
     background: rgba($success, 0.1);
-    color: darken($success, 10%);
+    background: color.adjust($success, $lightness: -10%);
     border-radius: $radius-md;
     text-align: center;
     font-size: $font-size-base;

src/routes/Apps/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } 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';
@@ -203,7 +203,7 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Domain</label>
                   {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
+                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
                       {app.domain} ↗
                     </a>
                   ) : (
@@ -212,13 +212,14 @@ export const AppDetail: React.FC = () => {
                 </div>
 
                 <div className="info-item">
-                  <label>Server</label>
-                  <button 
-                    onClick={() => navigate(`/servers/${app.server}`)}
-                    className="server-link"
+                  <label htmlFor="server-link">Server</label>
+                  <Link
+                    id="server-link"
+                    to={`/servers/${app.server}`}
+                    className="link"
                   >
-                    {app.server} →
-                  </button>
+                    {app.server} ↗
+                  </Link>
                 </div>
 
                 <div className="info-item">

src/routes/Apps/Apps.tsx

@@ -135,7 +135,7 @@ export const Apps: React.FC = () => {
           </button>
           
           <button
-            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
+            className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
             onClick={toggleUpgrades}
             title="Click to toggle apps with upgrades available"
             disabled={stats.needsUpgrade === 0}
@@ -145,7 +145,7 @@ export const Apps: React.FC = () => {
           </button>
           
           <button
-            className={`stat-chip ${showChaosOnly ? 'active' : ''}`}
+            className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
             onClick={toggleChaos}
             title="Click to toggle chaos mode apps"
             disabled={stats.chaosApps === 0}
@@ -185,7 +185,7 @@ export const Apps: React.FC = () => {
                 <th>Server</th>
                 <th>Version</th>
                 <th>Status</th>
-                <th>Actions</th>
+                {/* <th>Actions</th> */}
               </tr>
             </thead>
             <tbody>
@@ -243,7 +243,7 @@ export const Apps: React.FC = () => {
                         {app.status}
                       </span>
                     </td>
-                    <td>
+                    {/* <td>
                       <div className="actions">
                         <button 
                           className="action-btn" 
@@ -268,7 +268,7 @@ export const Apps: React.FC = () => {
                           </button>
                         )}
                       </div>
-                    </td>
+                    </td> */}
                   </tr>
                 ))
               )}

src/routes/Dashboard/Dashboard.tsx

@@ -89,7 +89,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/apps')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Apps</h3>
-              <p className="stat-number">{apps.length}</p>
               <p className="stat-label">
                 {deployedAppsCount} deployed
               </p>
@@ -99,7 +98,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/servers')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Servers</h3>
-              <p className="stat-number">{servers.length}</p>
               <p className="stat-label">
                 {serversWithAppsCount} connected
               </p>

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

@@ -1,6 +1,7 @@
 @use '../../assets/scss/variables' as *;
 @use '../../assets/scss/mixins' as *;
 @use '../../assets/scss/global' as *;
+@use "sass:color";
 
 .server-detail-page {
   @extend .page-wrapper;
@@ -66,7 +67,7 @@
     border-color: $border-color;
 
     &:hover:not(:disabled) {
-      background: darken($bg-secondary, 5%);
+      background: color.adjust($bg-secondary, $lightness: -10%);
     }
   }
 
@@ -76,7 +77,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: darken($error, 10%);
+      background: color.adjust($error, $lightness: -10%);
     }
   }
 }
@@ -106,7 +107,7 @@
   gap: $spacing-xs;
   padding: $spacing-xs $spacing-md;
   background: rgba($warning, 0.1);
-  color: darken($warning, 20%);
+  background: color.adjust($error, $lightness: -20%);
   border-radius: $radius-md;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
@@ -171,11 +172,11 @@
     color: $text-primary;
 
     &.warning {
-      color: darken($warning, 10%);
+      background: color.adjust($warning, $lightness: -10%);
     }
 
     &.chaos {
-      color: darken($info, 10%);
+      background: color.adjust($info, $lightness: -10%);
     }
   }
 

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';
@@ -190,7 +190,7 @@ export const Server: React.FC = () => {
               {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
             </button>
             <button 
-              className="action-btn primary"
+              className="action-btn"
               onClick={() => handleAction('deploy-all')}
               disabled={!!actionLoading}
             >

src/routes/Servers/Servers.scss

@@ -122,9 +122,9 @@
       @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
-        background-color: $primary;
-        color: white;
-        border-color: $primary;
+        // background-color: $primary;
+        // color: white;
+        // border-color: $primary;
 
         &:hover {
           background-color: $primary-light;

src/routes/Servers/Servers.tsx

@@ -147,7 +147,7 @@ export const Servers: React.FC = () => {
           </button>
 
           <button
-            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
+            className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
             onClick={() => setShowUpgradesOnly(prev => !prev)}
             title="Click to filter by servers with upgrades"
             disabled={stats.totalUpgrades === 0}
@@ -157,7 +157,7 @@ export const Servers: React.FC = () => {
           </button>
 
           <button
-            className={`stat-chip ${showChaosOnly ? 'active' : ''}`}
+            className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
             onClick={() => setShowChaosOnly(prev => !prev)}
             title="Click to filter servers with chaos apps"
             disabled={stats.totalChaos === 0}
@@ -233,27 +233,6 @@ export const Servers: React.FC = () => {
                   )}
                 </div>
 
-                <div className="server-actions">
-                  <button 
-                    className="action-btn primary"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      navigate(`/servers/${server.name}`);
-                    }}
-                  >
-                    View Apps
-                  </button>
-                  <button 
-                    className="action-btn"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      navigate(`/servers/${server.name}`);
-                    }}
-                  >
-                    Manage
-                  </button>
-                </div>
-
                 {server.upgradeCount > 0 && (
                   <div className="server-alert">
                     <span className="alert-text">

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