Frontend & Mobile Application Development

<button id="load">Load products</button>
<ul id="products"></ul>

<script>
document.querySelector("#load").onclick = async () => {
  const response = await fetch("/api/products");
  const products = await response.json();
  document.querySelector("#products").innerHTML =
    products.map(p => "<li>" + p.name + "</li>").join("");
};
</script>

dist/
├── index.html
├── assets/app.a82fd9.js
├── assets/styles.91bc7.css
├── assets/vendor.27ac1.js
└── assets/logo.8b19.png

location /assets/ {
  try_files $uri =404;
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location / {
  try_files $uri $uri/ /index.html;
}

location /api/ {
  proxy_pass http://backend:8080/;
}

const routes = [
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductList /> },
  { path: "/products/:id", element: <ProductDetails /> },
  { path: "/account", element: <RequireLogin><Account /></RequireLogin> }
];

function ProductPage() {
  const [products, setProducts] = useState([]);
  const [status, setStatus] = useState("loading");

  useEffect(() => {
    fetch("/api/products")
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => { setProducts(data); setStatus("success"); })
      .catch(() => setStatus("error"));
  }, []);

  if (status === "loading") return <p>Loading…</p>;
  if (status === "error") return <p>Could not load products.</p>;
  return <ProductList products={products} />;
}

@Component({
  selector: "app-product-card",
  template: "<button (click)='selected.emit(product.id)'>" +
            "{{ product.name }}</button>"
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() selected = new EventEmitter<number>();
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 72rem) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

@Composable
fun ProductScreen(state: ProductUiState) {
  when {
    state.loading -> CircularProgressIndicator()
    state.error != null -> Text(state.error)
    else -> LazyColumn {
      items(state.products) { product ->
        ListItem(headlineContent = { Text(product.name) })
      }
    }
  }
}

struct ProductListView: View {
  let products: [Product]

  var body: some View {
    NavigationStack {
      List(products) { product in
        NavigationLink(product.name) {
          ProductDetailsView(product: product)
        }
      }
    }
  }
}

async function loadProducts() {
  render(await localDatabase.products.all());

  try {
    const fresh = await api.products.list();
    await localDatabase.products.replaceAll(fresh);
    render(fresh);
  } catch {
    showOfflineIndicator();
  }
}