create-jinmankn-app 1.0.0

package/templates/blueprint/frontend/src/pages/Profile.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Profile() {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const handleRetrieve = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/auth/me', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      setUser(response.data.user);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+    } catch (err) {
+      const storedUser = localStorage.getItem('user');
+      if (storedUser) {
+        setUser(JSON.parse(storedUser));
+      } else {
+        setError(err.response?.data?.message || 'Failed to load profile');
+      }
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  if (loading) {
+    return <p className="text-slate-500">Loading profile...</p>;
+  }
+
+  if (!user) {
+    return (
+      <p className="text-slate-600">
+        {error || 'No profile data found. Try signing in again.'}
+      </p>
+    );
+  }
+
+  return (
+    <div className="max-w-lg">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">Profile</h1>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <div className="bg-white rounded-lg shadow-sm border border-slate-200 divide-y divide-slate-200">
+        <div className="px-6 py-4 flex justify-between gap-4">
+          <span className="text-sm font-medium text-slate-500">Name</span>
+          <span className="text-sm text-slate-800">{user.name}</span>
+        </div>
+        <div className="px-6 py-4 flex justify-between gap-4">
+          <span className="text-sm font-medium text-slate-500">Email</span>
+          <span className="text-sm text-slate-800">{user.email}</span>
+        </div>
+        {user.id && (
+          <div className="px-6 py-4 flex justify-between gap-4">
+            <span className="text-sm font-medium text-slate-500">User ID</span>
+            <span className="text-sm text-slate-800 font-mono truncate max-w-[200px]">
+              {user.id}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;

package/templates/blueprint/frontend/src/pages/Register.jsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Register() {
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post('http://localhost:5000/api/auth/register', {
+        name,
+        email,
+        password,
+      });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Account created successfully');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Registration failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-md p-8">
+        <h1 className="text-2xl font-bold text-slate-800 mb-6">Create account</h1>
+
+        {message && (
+          <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+            {message}
+          </p>
+        )}
+
+        {error && (
+          <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-1">
+              Name
+            </label>
+            <input
+              id="name"
+              name="name"
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              minLength={6}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white font-medium py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+          >
+            {loading ? 'Creating account...' : 'Register'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-sm text-slate-600 text-center">
+          Already have an account?{' '}
+          <Link to="/login" className="text-blue-600 hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Register;

package/templates/blueprint/frontend/src/pages/Report.jsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Report() {
+  const [user, setUser] = useState(null);
+  const [items, setItems] = useState([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [generatedAt] = useState(() => new Date().toLocaleString());
+
+  const getAuthHeaders = () => ({
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  });
+
+  const handleRetrieve = async () => {
+    try {
+      const [userRes, itemsRes] = await Promise.all([
+        axios.get('http://localhost:5000/api/auth/me', { headers: getAuthHeaders() }),
+        axios.get('http://localhost:5000/api/items', { headers: getAuthHeaders() }),
+      ]);
+      setUser(userRes.data.user);
+      setItems(itemsRes.data.items);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load report data');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  if (loading) {
+    return <p className="text-slate-500">Loading report...</p>;
+  }
+
+  return (
+    <div className="max-w-4xl">
+      <div className="flex flex-wrap items-start justify-between gap-4 mb-6 print:hidden">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Report</h1>
+          <p className="text-slate-600 mt-1">
+            Summary you can reuse in every project. Print or save as PDF from the browser.
+          </p>
+        </div>
+
+      </div>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2 print:hidden">
+          {error}
+        </p>
+      )}
+
+      <article className="bg-white rounded-lg shadow-sm border border-slate-200 p-6 print:shadow-none print:border-0">
+        <header className="border-b border-slate-200 pb-4 mb-6">
+          <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+            Project report
+          </p>
+          <h2 className="text-xl font-bold text-slate-800 mt-1">Blueprint summary</h2>
+          <p className="text-sm text-slate-500 mt-2">Generated: {generatedAt}</p>
+        </header>
+
+        <section className="mb-8">
+          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-3">
+            Account
+          </h3>
+          {user ? (
+            <dl className="grid gap-2 sm:grid-cols-2 text-sm">
+              <div>
+                <dt className="text-slate-500">Name</dt>
+                <dd className="font-medium text-slate-800">{user.name}</dd>
+              </div>
+              <div>
+                <dt className="text-slate-500">Email</dt>
+                <dd className="font-medium text-slate-800">{user.email}</dd>
+              </div>
+            </dl>
+          ) : (
+            <p className="text-sm text-slate-500">No user data available.</p>
+          )}
+        </section>
+
+        <section>
+          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-3">
+            Items ({items.length})
+          </h3>
+          {items.length === 0 ? (
+            <p className="text-sm text-slate-500">No items recorded.</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm text-left border border-slate-200 rounded-lg overflow-hidden">
+                <thead className="bg-slate-50 text-slate-600">
+                  <tr>
+                    <th className="px-4 py-2 font-medium">Title</th>
+                    <th className="px-4 py-2 font-medium">Description</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                  {items.map((item) => (
+                    <tr key={item._id}>
+                      <td className="px-4 py-2 text-slate-800">{item.title}</td>
+                      <td className="px-4 py-2 text-slate-600">
+                        {item.description || '—'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </article>
+    </div>
+  );
+}
+
+export default Report;

package/templates/blueprint/frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+  },
+});

package/templates/blueprint/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "blueprint",
+  "version": "1.0.0",
+  "description": "A reusable full-stack starter template with authentication, CRUD, and MongoDB. Copy or rename this folder to bootstrap any new project.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/templates/blueprint/scripts/pack-blueprint.ps1

@@ -0,0 +1,18 @@
+# Creates blueprint-source.zip (no node_modules/dist) for exact reproduction or sharing.
+$root = Split-Path (Split-Path $PSScriptRoot -Parent) -Parent
+if (Test-Path "$PSScriptRoot\..\backend\package.json") {
+  $root = Resolve-Path "$PSScriptRoot\.."
+}
+
+$out = Join-Path $root "blueprint-source.zip"
+$temp = Join-Path $env:TEMP "blueprint-pack-$(Get-Random)"
+
+New-Item -ItemType Directory -Path $temp | Out-Null
+robocopy $root $temp /E /XD node_modules dist .git /XF *.zip package-lock.json | Out-Null
+
+if (Test-Path $out) { Remove-Item $out -Force }
+Compress-Archive -Path "$temp\*" -DestinationPath $out -Force
+Remove-Item $temp -Recurse -Force
+
+Write-Host "Created: $out"
+Write-Host "Give another AI: unzip and run npm install in backend + frontend, copy .env.example files to .env"

package/templates/chom/Backend/app.js

@@ -0,0 +1,25 @@
+const express = require("express")
+const app = express()
+const cors = require("cors")
+const mongoose = require("mongoose")
+const dotenv = require("dotenv")
+dotenv.config()
+
+const PORT = process.env.PORT
+const MONGO = process.env.MONGO_UI
+
+const UserRoutes = require("./src/routes/users.r")
+
+app.use(cors())
+app.use(express.json())
+app.use("/api", UserRoutes)
+
+mongoose.connect(MONGO)
+    .then(() => console.log("Database Connected"))
+    .catch((err) => console.log("Error to connect database", err))
+
+app.get("/", async (req, res) => {
+    res.send("Hii, I'm working here.!!!!")
+})
+
+app.listen(PORT, console.log(`Server is running at http://localhost:${PORT}`))