easy-starter 1.0.0

package/template/src/styles.scss

@@ -0,0 +1,283 @@
+// Premium Dark Theme
+$bg: #09090b;
+$surface: #18181b;
+$primary: #6366f1; // Indigo
+$primary-hover: #818cf8;
+$text: #f4f4f5;
+$text-muted: #a1a1aa;
+$border: #27272a;
+
+body {
+    font-family: 'Inter', system-ui, sans-serif;
+    background-color: $bg;
+    color: $text;
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+}
+
+a {
+    color: $primary;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.2s;
+
+    &:hover {
+        color: $primary-hover;
+    }
+}
+
+.container {
+    max-width: 800px;
+    margin: 50px auto;
+    padding: 40px;
+    background: $surface;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    border: 1px solid $border;
+
+    .hero {
+        text-align: center;
+        margin-bottom: 40px;
+
+        h1 {
+            margin: 0 0 10px;
+            color: $text;
+            font-size: 2.5rem;
+            background: linear-gradient(90deg, #818cf8, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        p {
+            color: $text-muted;
+            font-size: 1.1rem;
+        }
+
+        .app-icon {
+            width: 140px;
+            height: 140px;
+            margin: 0 auto 20px;
+            background-image: url("./images/icon.png?as=webp");
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+}
+
+.api-test {
+    margin-top: 40px;
+    padding: 30px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 12px;
+    border: 1px solid $border;
+
+    h2,
+    h3 {
+        margin-top: 0;
+        color: #fff;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+
+        li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 15px 20px;
+            background: $bg;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            border: 1px solid $border;
+            transition: transform 0.2s, border-color 0.2s;
+
+            &:hover {
+                transform: translateY(-2px);
+                border-color: $primary;
+            }
+        }
+    }
+
+    .item-details {
+        padding: 20px;
+        background: $bg;
+        margin-top: 20px;
+        border-radius: 8px;
+        border: 1px solid $primary;
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
+
+        h3 {
+            color: $primary;
+            margin-bottom: 10px;
+        }
+
+        p {
+            margin: 5px 0;
+            color: $text;
+        }
+    }
+
+    form {
+        display: flex;
+        gap: 12px;
+        margin-top: 20px;
+        flex-wrap: wrap;
+    }
+}
+
+// Global Controls
+input {
+    padding: 12px 16px;
+    background: $bg;
+    border: 1px solid $border;
+    border-radius: 8px;
+    color: $text;
+    outline: none;
+    transition: border-color 0.2s;
+    flex: 1;
+    min-width: 150px;
+
+    &:focus {
+        border-color: $primary;
+    }
+}
+
+button {
+    padding: 12px 24px;
+    background: $primary;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.2s, transform 0.1s;
+
+    &:hover:not(:disabled) {
+        background: $primary-hover;
+        transform: scale(1.02);
+    }
+
+    &:active:not(:disabled) {
+        transform: scale(0.98);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    &.btn-danger {
+        background: #ef4444;
+        &:hover:not(:disabled) {
+            background: #dc2626;
+        }
+    }
+}
+
+// --- ADMIN DASHBOARD ---
+.admin-login {
+    padding: 40px;
+    max-width: 400px;
+    margin: 0 auto;
+    text-align: center;
+
+    h2 { color: $text; }
+    
+    .back-link {
+        margin-bottom: 20px;
+    }
+    
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        margin-top: 20px;
+    }
+
+    input { width: 100%; box-sizing: border-box; }
+}
+
+.admin-container {
+    padding: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 30px;
+
+        h2 { margin: 0; color: $text; }
+        a { color: $primary; text-decoration: none; font-weight: bold; }
+    }
+
+    .controls {
+        display: flex;
+        gap: 15px;
+        align-items: center;
+        margin-bottom: 30px;
+        flex-wrap: wrap;
+
+        strong { font-size: 1.1rem; color: $text; }
+
+        .btn-logout {
+            margin-left: auto;
+            background: #ef4444;
+            &:hover { background: #dc2626; }
+        }
+    }
+
+    .chart-container {
+        margin-bottom: 40px;
+        background: rgba(255, 255, 255, 0.02);
+        padding: 25px;
+        border-radius: 12px;
+        border: 1px solid $border;
+
+        h3 {
+            margin: 0 0 20px;
+            font-size: 1.1rem;
+            color: $text;
+        }
+
+        .chart {
+            display: flex;
+            align-items: flex-end;
+            height: 150px;
+            gap: 4px;
+
+            .bar-wrapper {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-end;
+                height: 100%;
+
+                .count { font-size: 11px; color: $text; margin-bottom: 4px; font-weight: bold; }
+                .date { font-size: 10px; margin-top: 8px; color: $text-muted; }
+                
+                .bar {
+                    width: 100%;
+                    max-width: 24px;
+                    border-radius: 4px 4px 0 0;
+                    transition: height 0.3s ease;
+                }
+                
+                .bar.active {
+                    background: $primary;
+                }
+            }
+        }
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+    }
+}

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*",
+    "server/**/*",
+    "types.d.ts"
+  ]
+}

package/template/types.d.ts

@@ -0,0 +1,26 @@
+import { APIDefinition, Endpoint, Token } from "typed-client-server-api";
+
+// The API type defines the contract between your React frontend and Express backend.
+// Every property here represents an endpoint. Both the client and server use this
+// to ensure type safety. If you change a parameter here, TypeScript will immediately
+// warn you if you forgot to update the frontend or backend!
+export type API = APIDefinition<{
+    getItems: Endpoint<{}, Item[]>;
+    getItem: Endpoint<{ id: string }, Item>;
+    addItem: Endpoint<Omit<Item, "_id">, string>;
+    removeItem: Endpoint<{ id: string }, boolean>;
+
+    getEasyAnalyticsData: Endpoint<{ password: string, month: string }, any[]>;
+}>;
+
+export type Item = {
+    _id: string;
+    name: string;
+    value: number;
+};
+
+// The Database type defines the structure of your JSON files managed by easy-db-node.
+// Each property represents a 'table' (or a separate JSON file).
+export type Database = {
+    item: Omit<Item, "_id">;
+};