Initial commit

2026-02-27 15:01:06 +03:00
commit fc06bb6fcd
52 changed files with 1355 additions and 0 deletions
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Salon Booking</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "salon-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0"
+  }
+}
@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { apiGet } from "./api/client";
+
+export default function App() {
+  const [salons, setSalons] = useState([]);
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState("idle");
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function load() {
+      setStatus("loading");
+      try {
+        const data = await apiGet(`/salons/?q=${encodeURIComponent(query)}`);
+        if (!ignore) {
+          setSalons(data);
+          setStatus("ready");
+        }
+      } catch (error) {
+        if (!ignore) {
+          setStatus("error");
+        }
+      }
+    }
+
+    load();
+    return () => {
+      ignore = true;
+    };
+  }, [query]);
+
+  return (
+    <div className="page">
+      <header className="hero">
+        <p className="eyebrow">Salon Booking Platform</p>
+        <h1>Find, compare, and book top salons near you.</h1>
+        <p className="subtitle">
+          Search by city or service, compare pricing, and lock in your slot in seconds.
+        </p>
+        <div className="search">
+          <input
+            type="text"
+            placeholder="Search by salon or service"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+        </div>
+      </header>
+
+      <section className="results">
+        <h2>Salons</h2>
+        {status === "loading" && <p>Loading salons...</p>}
+        {status === "error" && (
+          <p className="error">Unable to load salons. Start the backend API to see results.</p>
+        )}
+        {status === "ready" && salons.length === 0 && <p>No salons found.</p>}
+        <div className="grid">
+          {salons.map((salon) => (
+            <article className="card" key={salon.id}>
+              <div className="card-header">
+                <h3>{salon.name}</h3>
+                <span className="rating">{salon.rating_avg} / 5</span>
+              </div>
+              <p>{salon.description || "No description yet."}</p>
+              <div className="meta">
+                <span>{salon.city}</span>
+                <span>{salon.phone_number || "Phone unavailable"}</span>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,14 @@
+const API_BASE = import.meta.env.VITE_API_BASE || "/api";
+
+async function handleResponse(response) {
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || `Request failed: ${response.status}`);
+  }
+  return response.json();
+}
+
+export async function apiGet(path) {
+  const response = await fetch(`${API_BASE}${path}`);
+  return handleResponse(response);
+}
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -0,0 +1,114 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap");
+
+:root {
+  color: #1c1b1f;
+  background: linear-gradient(160deg, #fdf1e5 0%, #f7f2ec 40%, #eef1ff 100%);
+  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+.page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px 80px;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 32px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 20px 40px rgba(26, 26, 26, 0.08);
+}
+
+.eyebrow {
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 40px;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 18px;
+  margin: 0;
+  max-width: 640px;
+}
+
+.search input {
+  width: 100%;
+  max-width: 520px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid #dad3ca;
+  font-size: 16px;
+}
+
+.results {
+  margin-top: 48px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.card {
+  background: white;
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 12px 24px rgba(21, 21, 21, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.rating {
+  background: #ffcc80;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  color: #5c5a5f;
+  font-size: 14px;
+}
+
+.error {
+  color: #b00020;
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: 30px;
+  }
+
+  .hero {
+    padding: 24px;
+  }
+}
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": "http://localhost:8000"
+    }
+  }
+});