create-softeneers-app 0.1.0

package/templates/next-fullstack/apps/server/config/config.cjs

@@ -0,0 +1,24 @@
+"use strict";
+
+require("dotenv").config();
+
+const shared = {
+    username: process.env.DB_USER || "root",
+    password: process.env.DB_PASSWORD || "",
+    database: process.env.DB_NAME || "monolith_demo_dev",
+    host: process.env.DB_HOST || "127.0.0.1",
+    port: Number(process.env.DB_PORT || 3306),
+    dialect: "mysql",
+};
+
+module.exports = {
+    development: { ...shared },
+    test: {
+        ...shared,
+        database: process.env.DB_NAME_TEST || "monolith_demo_test",
+    },
+    production: {
+        ...shared,
+        database: process.env.DB_NAME_PROD || process.env.DB_NAME || "monolith_demo_prod",
+    },
+};

package/templates/next-fullstack/apps/server/controller/carController.ts

@@ -0,0 +1,62 @@
+import { Request, Response } from "express";
+import Car from "../models/car";
+
+const getAllCars = async (_req: Request, res: Response) => {
+    const cars = await Car.findAll({ order: [["id", "ASC"]] });
+    res.status(200).json(cars);
+};
+
+const getCarById = async (req: Request, res: Response) => {
+    const carId = Number(req.params.id);
+    const car = await Car.findByPk(carId);
+
+    if (!car) {
+        return res.status(404).json({ message: "Car not found." });
+    }
+
+    return res.status(200).json(car);
+};
+
+const createCar = async (req: Request, res: Response) => {
+    const { brand, model, year } = req.body;
+
+    if (!brand || !model || !year) {
+        return res.status(400).json({ message: "brand, model and year are required." });
+    }
+
+    const createdCar = await Car.create({ brand, model, year: Number(year) });
+    return res.status(201).json(createdCar);
+};
+
+const updateCar = async (req: Request, res: Response) => {
+    const carId = Number(req.params.id);
+    const car = await Car.findByPk(carId);
+
+    if (!car) {
+        return res.status(404).json({ message: "Car not found." });
+    }
+
+    const { brand, model, year } = req.body;
+
+    await car.update({
+        brand: brand ?? car.brand,
+        model: model ?? car.model,
+        year: year ? Number(year) : car.year,
+    });
+
+    return res.status(200).json(car);
+};
+
+const deleteCar = async (req: Request, res: Response) => {
+    const carId = Number(req.params.id);
+    const car = await Car.findByPk(carId);
+
+    if (!car) {
+        return res.status(404).json({ message: "Car not found." });
+    }
+
+    await car.destroy();
+    return res.status(200).json({ message: "Car deleted successfully." });
+};
+
+export { getAllCars, getCarById, createCar, updateCar, deleteCar };

package/templates/next-fullstack/apps/server/index.ts

@@ -0,0 +1,50 @@
+import "dotenv/config";
+import cors from "cors";
+import express, { NextFunction, Request, Response } from "express";
+import { sequelize } from "./models/car";
+import carRouter from "./routes/carRoutes";
+
+const app = express();
+const PORT = Number(process.env.PORT ?? 4000);
+const FRONTEND_URL = process.env.FRONTEND_URL ?? "http://localhost:3000";
+
+// Permitem request-uri din frontend (ex: Next.js pe localhost:3000).
+app.use(
+    cors({
+        origin: FRONTEND_URL,
+    })
+);
+
+// Parseaza automat JSON-ul trimis in body de frontend.
+app.use(express.json());
+
+// Endpoint simplu de health-check ca sa verifici rapid daca API-ul merge.
+app.get("/health", (_req: Request, res: Response) => {
+    res.status(200).json({ ok: true });
+});
+
+// Grupam toate endpoint-urile pentru masini sub /api/cars.
+app.use("/api/cars", carRouter);
+
+// Middleware minimal de tratare erori, ca sa nu cada serverul fara raspuns util.
+app.use((error: unknown, _req: Request, res: Response, _next: NextFunction) => {
+    console.error("Unhandled error:", error);
+    res.status(500).json({ message: "Internal server error." });
+});
+
+// Pornim serverul doar dupa ce conexiunea la MySQL este valida.
+const startServer = async () => {
+    try {
+        await sequelize.authenticate();
+        console.log("MySQL connection established.");
+
+        app.listen(PORT, () => {
+            console.log(`Backend running on http://localhost:${PORT}`);
+        });
+    } catch (error) {
+        console.error("Failed to connect to database:", error);
+        process.exit(1);
+    }
+};
+
+startServer();

package/templates/next-fullstack/apps/server/migrations/20260414160000-create-cars-table.js

@@ -0,0 +1,39 @@
+"use strict";
+
+/** @type {import("sequelize-cli").Migration} */
+module.exports = {
+    async up(queryInterface, Sequelize) {
+        await queryInterface.createTable("cars", {
+            id: {
+                allowNull: false,
+                autoIncrement: true,
+                primaryKey: true,
+                type: Sequelize.INTEGER,
+            },
+            brand: {
+                type: Sequelize.STRING,
+                allowNull: false,
+            },
+            model: {
+                type: Sequelize.STRING,
+                allowNull: false,
+            },
+            year: {
+                type: Sequelize.INTEGER,
+                allowNull: false,
+            },
+            createdAt: {
+                allowNull: false,
+                type: Sequelize.DATE,
+            },
+            updatedAt: {
+                allowNull: false,
+                type: Sequelize.DATE,
+            },
+        });
+    },
+
+    async down(queryInterface) {
+        await queryInterface.dropTable("cars");
+    },
+};

package/templates/next-fullstack/apps/server/models/car.ts

@@ -0,0 +1,70 @@
+import { DataTypes, Model, Optional, Sequelize } from "sequelize";
+
+const environment = process.env.NODE_ENV ?? "development";
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const dbConfig = require("../config/config.cjs")[environment];
+
+const sequelize = new Sequelize({
+    dialect: "mysql",
+    host: dbConfig.host,
+    port: dbConfig.port,
+    database: dbConfig.database,
+    username: dbConfig.username,
+    password: dbConfig.password,
+    logging: false,
+});
+
+type CarAttributes = {
+    id: number;
+    brand: string;
+    model: string;
+    year: number;
+    createdAt?: Date;
+    updatedAt?: Date;
+};
+
+type CarCreationAttributes = Optional<CarAttributes, "id" | "createdAt" | "updatedAt">;
+
+class Car extends Model<CarAttributes, CarCreationAttributes> implements CarAttributes {
+    declare id: number;
+    declare brand: string;
+    declare model: string;
+    declare year: number;
+    declare readonly createdAt: Date;
+    declare readonly updatedAt: Date;
+}
+
+Car.init(
+    {
+        id: {
+            type: DataTypes.INTEGER,
+            autoIncrement: true,
+            primaryKey: true,
+        },
+        brand: {
+            type: DataTypes.STRING,
+            allowNull: false,
+        },
+        model: {
+            type: DataTypes.STRING,
+            allowNull: false,
+        },
+        year: {
+            type: DataTypes.INTEGER,
+            allowNull: false,
+            validate: {
+                min: 1886,
+                max: 3000,
+            },
+        },
+    },
+    {
+        sequelize,
+        modelName: "Car",
+        tableName: "cars",
+    }
+);
+
+export type { CarAttributes, CarCreationAttributes };
+export { sequelize };
+export default Car;

package/templates/next-fullstack/apps/server/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "server",
+    "version": "1.0.0",
+    "description": "",
+    "main": "dist/index.js",
+    "scripts": {
+        "dev": "nodemon index.ts",
+        "build": "tsc",
+        "start": "node dist/index.js",
+        "db:migrate": "sequelize-cli db:migrate --config config/config.cjs",
+        "db:seed": "sequelize-cli db:seed:all --config config/config.cjs",
+        "db:reset": "sequelize-cli db:migrate:undo:all --config config/config.cjs && sequelize-cli db:migrate --config config/config.cjs && sequelize-cli db:seed:all --config config/config.cjs"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "type": "commonjs",
+    "dependencies": {
+        "cors": "^2.8.6",
+        "dotenv": "^17.4.2",
+        "express": "^5.2.1",
+        "mysql2": "^3.22.0",
+        "nodemon": "^3.1.14",
+        "sequelize": "^6.37.8"
+    },
+    "devDependencies": {
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/node": "^25.6.0",
+        "sequelize-cli": "^6.6.5",
+        "ts-node-dev": "^2.0.0",
+        "typescript": "^6.0.2"
+    }
+}

package/templates/next-fullstack/apps/server/routes/carRoutes.ts

@@ -0,0 +1,18 @@
+import { Router } from "express";
+import {
+    createCar,
+    deleteCar,
+    getAllCars,
+    getCarById,
+    updateCar,
+} from "../controller/carController";
+
+const carRouter = Router();
+
+carRouter.get("/", getAllCars);
+carRouter.get("/:id", getCarById);
+carRouter.post("/", createCar);
+carRouter.put("/:id", updateCar);
+carRouter.delete("/:id", deleteCar);
+
+export default carRouter;

package/templates/next-fullstack/apps/server/seeders/20260414160500-seed-cars.js

@@ -0,0 +1,34 @@
+"use strict";
+
+/** @type {import("sequelize-cli").Migration} */
+module.exports = {
+    async up(queryInterface) {
+        await queryInterface.bulkInsert("cars", [
+            {
+                brand: "Dacia",
+                model: "Duster",
+                year: 2021,
+                createdAt: new Date(),
+                updatedAt: new Date(),
+            },
+            {
+                brand: "Volkswagen",
+                model: "Golf 7",
+                year: 2019,
+                createdAt: new Date(),
+                updatedAt: new Date(),
+            },
+            {
+                brand: "Tesla",
+                model: "Model 3",
+                year: 2023,
+                createdAt: new Date(),
+                updatedAt: new Date(),
+            },
+        ]);
+    },
+
+    async down(queryInterface) {
+        await queryInterface.bulkDelete("cars", null, {});
+    },
+};

package/templates/next-fullstack/apps/server/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "rootDir": ".",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["index.ts", "controller/**/*.ts", "models/**/*.ts", "routes/**/*.ts"],
+  "exclude": ["dist", "node_modules", "src"]
+}

package/templates/next-fullstack/apps/web/README.md

@@ -0,0 +1,38 @@
+# Frontend Quick Start
+
+Frontend-ul este o aplicatie Next.js care consuma API-ul backend-ului (`/api/cars`)
+si afiseaza demo-ul CRUD in pagina `masini`.
+
+## 1) Instaleaza dependintele
+
+```bash
+cd frontend
+npm install
+```
+
+## 2) Configureaza URL-ul backend-ului (optional, recomandat)
+
+```bash
+echo "NEXT_PUBLIC_API_URL=http://localhost:4000" > .env.local
+```
+
+Daca nu ai `.env.local`, aplicatia foloseste implicit `http://localhost:4000`.
+
+## 3) Porneste frontend-ul
+
+```bash
+npm run dev
+```
+
+Aplicatia ruleaza pe `http://localhost:3000`.
+
+## 4) Pagini utile
+
+- `http://localhost:3000/` - overview tehnologii monolith
+- `http://localhost:3000/docs` - documentatie completa
+- `http://localhost:3000/masini` - demo CRUD complet
+
+## Important
+
+Backend-ul trebuie sa fie pornit in paralel (`backend: npm run dev`) ca pagina
+`/masini` sa poata face request-uri CRUD.

package/templates/next-fullstack/apps/web/app/components/Footer.tsx

@@ -0,0 +1,19 @@
+const Footer = () => {
+    const currentYear = new Date().getFullYear();
+    const currentDate = new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "2-digit",
+        year: "numeric",
+    }).format(new Date());
+
+    return (
+        <footer className="border-t ">
+            <div className="mx-auto flex w-full items-center justify-between px-6 py-4 text-sm">
+                <p>© {currentYear} Demo Repo</p>
+                <p>Updated {currentDate}</p>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

package/templates/next-fullstack/apps/web/app/components/Navbar.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+const navItems = [
+    { label: "Home", href: "/" },
+    { label: "Masini", href: "/masini" },
+    { label: "Docs", href: "/docs" },
+];
+
+const Navbar = () => {
+    return (
+        <header className="border-b border-zinc-200 bg-zinc-50 font-sans dark:border-zinc-800 dark:bg-black">
+            <nav className="mx-auto flex w-full max-w-5xl items-center justify-between px-6 py-4">
+                <Link href="/" className="font-semibold tracking-tight">
+                    Demo Repo
+                </Link>
+
+                <ul className="flex items-center gap-6 text-sm">
+                    {navItems.map((item) => (
+                        <li key={item.href}>
+                            <Link
+                                href={item.href}
+                                className="text-zinc-700 transition-colors hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-100"
+                            >
+                                {item.label}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </header>
+    );
+};
+
+export default Navbar;

package/templates/next-fullstack/apps/web/app/docs/page.tsx

@@ -0,0 +1,170 @@
+export default function Docs() {
+    return (
+        <section className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-10">
+            <header className="space-y-3">
+                <h1 className="text-4xl font-bold">Documentatie - Monolith CRUD Demo</h1>
+                <p className="text-base text-zinc-700 dark:text-zinc-300">
+                    Aceasta aplicatie este un exemplu super simplu de monolith web app:
+                    frontend Next.js + backend Express + MySQL + Sequelize.
+                </p>
+                <p className="text-base text-zinc-700 dark:text-zinc-300">
+                    Scopul ei este dublu: suport educational pentru juniori si punct de
+                    pornire pentru proiecte mici care au nevoie de CRUD rapid.
+                </p>
+            </header>
+
+            <article className="space-y-4 rounded-lg border border-zinc-200 p-5 dark:border-zinc-700">
+                <h2 className="text-2xl font-semibold">Ce demonstreaza aplicatia</h2>
+                <ul className="list-disc space-y-2 pl-6 text-zinc-700 dark:text-zinc-300">
+                    <li>Arhitectura monolitica simpla (un frontend + un backend).</li>
+                    <li>Flux complet CRUD pentru resursa `cars` (masini).</li>
+                    <li>Separare clara pe layere: rute, controller, model, baza de date.</li>
+                    <li>Migrare si seed pentru popularea initiala a bazei de date.</li>
+                    <li>Conectare frontend-backend prin API REST si CORS.</li>
+                </ul>
+            </article>
+
+            <article className="space-y-4 rounded-lg border border-zinc-200 p-5 dark:border-zinc-700">
+                <h2 className="text-2xl font-semibold">Flux CRUD (cap-coada)</h2>
+                <ol className="list-decimal space-y-2 pl-6 text-zinc-700 dark:text-zinc-300">
+                    <li>
+                        Utilizatorul deschide pagina <code>/masini</code> si apasa butoane CRUD.
+                    </li>
+                    <li>
+                        Frontend-ul trimite request-uri la backend:{" "}
+                        <code>GET/POST/PUT/DELETE /api/cars</code>.
+                    </li>
+                    <li>
+                        Router-ul backend directioneaza request-ul catre controller-ul potrivit.
+                    </li>
+                    <li>
+                        Controller-ul valideaza input-ul si foloseste modelul Sequelize <code>Car</code>.
+                    </li>
+                    <li>
+                        Modelul executa query-uri in MySQL pe tabela <code>cars</code>.
+                    </li>
+                    <li>Backend-ul raspunde cu JSON, iar frontend-ul re-randeaza tabelul.</li>
+                </ol>
+            </article>
+
+            <article className="space-y-4 rounded-lg border border-zinc-200 p-5 dark:border-zinc-700">
+                <h2 className="text-2xl font-semibold">Documentatie backend pe fisiere</h2>
+
+                <div className="space-y-4">
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/index.ts`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Punctul de intrare al serverului. Configureaza CORS si JSON parser,
+                            adauga endpoint-ul de health-check, inregistreaza rutele CRUD si
+                            porneste serverul doar dupa conexiunea reusita la MySQL.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/routes/carRoutes.ts`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Defineste endpoint-urile REST pentru masini:
+                            <code> GET /</code>, <code>GET /:id</code>, <code>POST /</code>,{" "}
+                            <code>PUT /:id</code>, <code>DELETE /:id</code>.
+                            Este stratul de routing.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/controller/carController.ts`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Contine logica CRUD efectiva. Aici se face validarea simpla a
+                            datelor, cautarea dupa id, crearea, actualizarea si stergerea
+                            inregistrarilor din tabela `cars`.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/models/car.ts`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Defineste modelul Sequelize `Car` (campurile tabelului) si conexiunea
+                            la MySQL folosind setarile din `config/config.cjs`.
+                            Acesta este stratul care vorbeste direct cu baza de date.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/config/config.cjs`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Configurarea centrala a DB pentru medii (`development`, `test`,
+                            `production`) citita din variabile de mediu. Este folosita de
+                            `sequelize-cli` la comenzi de migrate/seed.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">
+                            `backend/migrations/20260414160000-create-cars-table.js`
+                        </p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Creeaza tabela `cars` cu structura corecta (`id`, `brand`, `model`,
+                            `year`, `createdAt`, `updatedAt`). Functia `down` sterge tabela.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">
+                            `backend/seeders/20260414160500-seed-cars.js`
+                        </p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Introduce date initiale in tabela `cars` (exemple de masini) pentru
+                            demo rapid. Functia `down` sterge datele inserate.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/.env.example`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Contin variabilele de mediu necesare: port backend, URL frontend,
+                            host/user/parola/nume DB pentru MySQL.
+                        </p>
+                    </div>
+
+                    <div className="rounded-md bg-zinc-50 p-4 dark:bg-zinc-900">
+                        <p className="font-semibold">`backend/package.json`</p>
+                        <p className="text-zinc-700 dark:text-zinc-300">
+                            Lista de dependinte si script-uri utile:
+                            <code> dev</code>, <code>build</code>, <code>db:migrate</code>,{" "}
+                            <code>db:seed</code>, <code>db:reset</code>.
+                        </p>
+                    </div>
+                </div>
+            </article>
+
+            <article className="space-y-4 rounded-lg border border-zinc-200 p-5 dark:border-zinc-700">
+                <h2 className="text-2xl font-semibold">Comenzi utile pentru demo</h2>
+                <div className="space-y-2 text-zinc-700 dark:text-zinc-300">
+                    <p>
+                        1. In backend: <code>npm run db:migrate</code>
+                    </p>
+                    <p>
+                        2. In backend: <code>npm run db:seed</code>
+                    </p>
+                    <p>
+                        3. In backend: <code>npm run dev</code>
+                    </p>
+                    <p>
+                        4. In frontend: <code>npm run dev</code>
+                    </p>
+                    <p>
+                        5. Deschizi <code>/masini</code> si testezi create, read, update, delete.
+                    </p>
+                </div>
+            </article>
+
+            <article className="space-y-4 rounded-lg border border-zinc-200 p-5 dark:border-zinc-700">
+                <h2 className="text-2xl font-semibold">Pentru cine este acest demo</h2>
+                <ul className="list-disc space-y-2 pl-6 text-zinc-700 dark:text-zinc-300">
+                    <li>Juniori care invata primul flux CRUD full-stack.</li>
+                    <li>Echipe mici care vor un boilerplate monolitic simplu.</li>
+                    <li>Proiecte web mici/medii unde viteza de livrare este importanta.</li>
+                </ul>
+            </article>
+        </section>
+    );
+}

package/templates/next-fullstack/apps/web/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/next-fullstack/apps/web/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+
+// change the title and description according to the project
+export const metadata: Metadata = {
+    title: "Demo Repo",
+    description: "Demo Repo by Softeneer",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html
+            lang="en"
+            className="h-full antialiased bg-white text-black dark:bg-black dark:text-white"
+        >
+            <body className="min-h-full flex flex-col">
+                <Navbar />
+                <main className="flex-1">{children}</main>
+                <Footer />
+            </body>
+        </html>
+    );
+}