0% found this document useful (0 votes)
6 views18 pages

Executive Summary

Uploaded by

ipayles.shop
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views18 pages

Executive Summary

Uploaded by

ipayles.shop
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Executive Summary

SimbaPetShop is a single-vendor pet e-commerce site built with [Link] (App


Router) and TypeScript. Key features include user accounts, pet
management, product catalog, search, cart/checkout, and admin
dashboards. The tech stack uses MySQL on Hostinger (via Prisma ORM),
[Link] (NextAuth v5) for authentication, Sharp for image processing, and
Tailwind CSS (with a custom ginger palette and Nunito font). This document
pack provides all necessary specs and guides: README, architecture, DB
schema, API, UI/UX, roadmap, tasks, auth flows, SEO, deployment,
contributing, and release checklist. Citations to official docs ([Link], Prisma,
[Link], Sharp, Hostinger) are included for reference. All assumptions are
noted: single-vendor (no marketplace), Hostinger Business managed
hosting, default payment via Stripe, and images stored on Hostinger or
external S3.

[Link]

SimbaPetShop
SimbaPetShop is a pet e-commerce web app (single-vendor). It allows
pet owners to browse pet products, manage pet profiles, and place orders.
The site includes an admin dashboard for site management. We use modern
technologies:
 Framework: [Link] 14+ (App Router)[1]
 Language: TypeScript (type-safe code)
 Database: MySQL on Hostinger (access via Prisma ORM)[2]
 Auth: [Link] (NextAuth v5) with Email+Social login[3][4]
 Styling: Tailwind CSS with “ginger cat” colors and Nunito font (via
next/font/google).
 Images: Sharp for on-the-fly optimization[5].
 Deployment: Hostinger Business ([Link] hosting with GitHub
integration)[6][7].

Quick Start
1. Prerequisites: [Link] 18+, Yarn/NPM, Hostinger account (for DB and
hosting).
2. Clone: git clone [Link]
3. Install: cd simbapetshop && npm install
4. Environment: Copy .[Link] and fill in DATABASE_URL,
NEXTAUTH_URL, NEXTAUTH_SECRET, etc.
5. Run (Dev): npm run dev (app available at [Link]
6. Build & Start: npm run build && npm start.

Project Structure
 /app – [Link] App Router pages and layouts
 /prisma – Prisma schema and migrations
 /components – React UI components (Tailwind + Framer Motion)
 /pages/api – API routes (NextAuth, Stripe webhooks, etc.)
 /styles – Tailwind config (includes ginger palette)
 Other docs (architecture, API spec, etc.) in root.

More Documentation
 [Link] – overall system design
 DATABASE_SCHEMA.md – tables and Prisma models
 API_SPEC.md – API routes and schemas
 UI_UX_GUIDELINES.md – UI design tokens and patterns
 FEATURE_ROADMAP.md – feature phases (MVP vs future)
 TASK_BREAKDOWN.md – development tasks
 AUTH_FLOW.md – authentication & RBAC flows
 SEO_STRATEGY.md – SEO/meta strategy
 [Link] – Hostinger CI/CD setup
 [Link] – code standards & PR process
 RELEASE_CHECKLIST.md – pre-launch checklist
Please review all docs before coding. For questions, see [Link].

[Link]

Architecture
SimbaPetShop uses a monolithic [Link] app (no microservices) deployed
on Hostinger. Key components:
 Frontend (App Router): React pages and components for user and
admin views[1]. Uses Server Components for data fetching and layouts
for shared UI.
 API Layer: [Link] API Routes (app directory routes or /pages/api) for
business logic (auth, CRUD, Stripe, etc.). Each route uses [Link]
auth() or middleware for access control.
 Database: MySQL (InnoDB) with Prisma ORM. Tables mirror
application models (Users, Products, Orders, Pets, etc.) (see
DATABASE_SCHEMA.md).
 Authentication: [Link] (NextAuth v5) handles login/signup. Session
stored in JWT with user info (id, role). Supports email/password and
OAuth (Google, etc.). A Prisma Adapter stores sessions in MySQL[4].
 Role-Based Access: Two roles — Owner (site owner) and Admin.
The Owner can manage their products and view orders; the Admin can
manage users, products, and analytics. Middleware checks roles on
protected routes (see AUTH_FLOW.md).
 Image Handling: On image upload (product or pet images), the
backend uses Sharp to resize and convert to WebP[5]. Images are
saved on Hostinger storage or S3 (configurable).
 Styling & UI: Tailwind CSS with a custom color palette and Nunito font
ensures a consistent look (see UI_UX_GUIDELINES.md). Animations (e.g.
on product cards) use Framer Motion.
Data Flow Example (Checkout): When an Owner checks out, the client
posts order data to /api/orders (Items + shipping). The API route creates an
Order and OrderItems in the DB, then calls Stripe API to charge the
customer. On success, it updates the order status and notifies the user
(email). The sequence is:
sequenceDiagram
participant Client
participant NextAPI
participant DB
participant Stripe
Client->>NextAPI: POST /api/orders (order items, shipping)
NextAPI->>DB: INSERT Order + OrderItems
NextAPI->>Stripe: Charge payment
alt Payment success
Stripe-->>NextAPI: Payment confirmation
NextAPI->>DB: UPDATE [Link]="Paid"
NextAPI-->>Client: {orderId, status: "Paid"}
else Payment fail
Stripe-->>NextAPI: Error
NextAPI->>DB: UPDATE [Link]="Failed"
NextAPI-->>Client: {error}
end

Security: All inputs are validated with Zod schemas[8]. Routes enforce CSRF
tokens via NextAuth[9]. The architecture is designed for performance (SSR
pages, CDN) and maintainability (TypeScript + Prisma).
DATABASE_SCHEMA.md

Database Schema
We use Prisma to define the MySQL schema. Key models:
model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String // Hashed
role Role @default(OWNER) // OWNER or ADMIN
isActive Boolean @default(true)
createdAt DateTime @default(now())
pets Pet[]
orders Order[]
}

model Pet {
id Int @id @default(autoincrement())
owner User @relation(fields: [ownerId], references: [id])
ownerId Int
name String
breed String
age Int
medical String?
createdAt DateTime @default(now())
}

model Product {
id Int @id @default(autoincrement())
name String
description String
category String?
price Float
stock Int @default(0)
seoTitle String?
seoDesc String?
imageUrls String[] // Array of image URLs
createdAt DateTime @default(now())
// Full-text index on name+description for search
@@fulltext([name, description])
}

model Order {
id Int @id @default(autoincrement())
user User @relation(fields: [userId], references: [id])
userId Int
status String @default("Pending") // e.g. "Pending", "Paid",
"Shipped"
total Float
createdAt DateTime @default(now())
items OrderItem[]
}

model OrderItem {
id Int @id @default(autoincrement())
order Order @relation(fields: [orderId], references: [id])
orderId Int
product Product @relation(fields: [productId], references: [id])
productId Int
quantity Int
price Float // Snapshot of product price
}

model Wishlist {
id Int @id @default(autoincrement())
user User @relation(fields: [userId], references: [id])
userId Int
product Product @relation(fields: [productId], references: [id])
productId Int
createdAt DateTime @default(now())
}

model LoyaltyPoint {
id Int @id @default(autoincrement())
user User @relation(fields: [userId], references: [id])
userId Int @unique
points Int @default(0)
}

 Enumerations: Define enum Role { OWNER, ADMIN } for user roles.


 Indexes: FULLTEXT index on Product(name, description) for fast
search[10].
 Environment: The connection string in DATABASE_URL (e.g.
mysql://user:pass@host:3306/simba_db) is set in .env. Prisma CLI will
apply migrations and generate the client.
 SQL Notes: If needed, raw SQL schema for MySQL would match the
above models. Ensure InnoDB engine and utf8mb4 charset for text
fields. Example FULLTEXT creation:
CREATE TABLE Product (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
description TEXT,
price FLOAT,
stock INT,
FULLTEXT (name, description)
) ENGINE=InnoDB;
 Sample Record: A User row with role ADMIN might be seeded for the
first admin account.

API_SPEC.md

API Specification
The backend exposes RESTful JSON APIs. All endpoints expect/return JSON.
Authentication uses HTTP-only cookies (NextAuth session).

Auth Request Response


Method Path Required Body Body
POST /api/ No { name, { success:
auth/ email, true,
signup password } user:
{id,name,e
mail} }
POST /api/ No { email, { success:
auth/login password } true,
user:
{...},
token }
POST /api/ Yes (none) { success:
auth/ true }
logout
GET /api/ Yes (via { user:
auth/ cookie) {id,name,e
session mail,role}
,
expires }

| GET | /api/users/me | Yes (Owner/Admin) | - |


{ id,name,email,role,pets,wishlist,orders } | | PUT | /api/users/me | Yes
(Owner/Admin) | { name?, email?, password? } | { success: true } |
| GET | /api/pets | Yes (Owner) | - | [{ id,name,breed,age,medical }] | |
POST | /api/pets | Yes (Owner) | { name, breed, age, medical } |
{ id,name,... } | | PUT | /api/pets/:id | Yes (Owner) | { name?, breed?,
age?, medical? } | { success: true } | | DELETE | /api/pets/:id | Yes
(Owner) | - | { success: true } |
| GET | /api/products | Public | ?search=&page=1 (filters optional) |
{ products: [...], total } | | GET | /api/products/:id | Public | - |
{ id,name,desc,price,stock,imageUrls,... } | | POST | /api/products | Yes
(Owner) | { name, description, price, stock, images[], seoTitle?,
seoDesc? } | { id,name,... } | | PUT | /api/products/:id | Yes (Owner) |
{ name?, description?, price?, stock?, images? } | { success: true } | |
DELETE | /api/products/:id | Yes (Owner) | - | { success: true } |
| GET | /api/wishlist | Yes (Owner) | - | [{ productId, productDetails }] | |
POST | /api/wishlist | Yes (Owner) | { productId } | { success: true } | |
DELETE | /api/wishlist/:id | Yes (Owner) | - | { success: true } |
| GET | /api/orders | Yes (Owner) | - | { orders: [...], total } | | GET |
/api/orders/:id | Yes (Owner/Admin) | - | { order } | | POST | /api/orders |
Yes (Owner) | { items: [{productId, qty}], shipping:{addr,...},
paymentMethod } | { id,status,total,... } | | PUT | /api/orders/:id | Yes
(Owner) | { status } (e.g. cancel) | { success: true } |
| GET | /api/admin/users | Yes (Admin) | - | { users: [...], total } | | PUT |
/api/admin/users/:id | Yes (Admin) | { role?, isActive? } | { success:
true } | | GET | /api/admin/analytics | Yes (Admin) | ?range=7d (or custom
filter) | { totalSales, totalOrders, bestProducts: [...] } | | GET |
/api/admin/orders | Yes (Admin) | ?from=&to= | { orders: [...], total } |

Zod-like Schemas
We validate inputs with Zod. Examples:
// Create Order Request
const CreateOrderSchema = [Link]({
items: [Link]([Link]({
productId: [Link]().int().positive(),
qty: [Link]().int().min(1)
})).min(1),
shipping: [Link]({
address1: [Link](),
city: [Link](),
postalCode: [Link](),
country: [Link]()
}),
paymentMethod: [Link]()
});

// Create Product Request


const CreateProductSchema = [Link]({
name: [Link]().min(1),
description: [Link]().min(5),
price: [Link]().positive(),
stock: [Link]().int().min(0),
images: [Link]([Link]().url()).optional(),
seoTitle: [Link]().optional(),
seoDesc: [Link]().optional()
});
Responses are straightforward JSON. For example, creating a product returns
the created object; list endpoints return arrays with pagination info.

UI_UX_GUIDELINES.md

UI/UX Guidelines
These define the visual style for SimbaPetShop:
 Color Palette: Use the custom ginger shades defined in
[Link]:
 --tw-color-ginger-50: #fdf8ee; (light background)
 --tw-color-ginger-100: #ebdcc0; (light accent)
 --tw-color-ginger-500: #e1ac67; (primary brand)
 --tw-color-ginger-600: #d68d5c; (hover)
 --tw-color-ginger-700: #b67339; (links/active)
 Text on light backgrounds uses --tw-color-slate: #5f5e5a; (dark
slate).
 Typography: Nunito font from Google Fonts. In code:

import { Nunito } from 'next/font/google';


const nunito = Nunito({ subsets: ['latin'], weight:
['400','700'], display: 'swap' });
<main className={[Link]}>...</main>

 Buttons: Rounded corners (pill shape), primary buttons use bg-


ginger-500 text-white, hover bg-ginger-600. Secondary (outline) use
border border-ginger-500 text-ginger-500.
 Cards: Product/Pet cards have subtle shadow and scale-up on hover
(Framer Motion). Use consistent padding.
 Spacing: Use Tailwind spacing (e.g., p-4, m-2) to keep layout clean.
 Forms: Input fields with border border-gray-300, focus outline
focus:border-ginger-600.
 Icons: Use Lucide icons (light weight) matching context (e.g. shopping
cart, paw, edit).
 Accessibility: Maintain high contrast (ginger-500 on white passes AA).
Add aria-labels to icon buttons. All images must have alt text.
 Responsive: Mobile-first design. Navbar collapses to hamburger menu
on small screens. Product grid stacks on mobile.
This style guide ensures a friendly, trustworthy brand identity matching the
ginger-cat theme.
FEATURE_ROADMAP.md

Feature Roadmap
This outlines phases for SimbaPetShop, prioritized for a $50k project.
Phase 1 (MVP, 4–6 weeks):
 User auth (signup/login via email, OAuth)[3][4]
 Owner can add/edit/delete pets (profiles).
 Product catalog (CRUD by owner), product listing UI.
 Search (MySQL FULLTEXT)[10].
 Shopping cart and Stripe checkout integration.
 Order history and tracking.
 Admin can view users, orders, and basic analytics.
 Deployment pipeline (GitHub → Hostinger)[6][7].
Phase 2 (Post-launch):
 Wishlist feature for owners.
 Loyalty points system.
 Enhanced SEO (product schema, meta tags).
 Email notifications (order updates).
 Dark mode toggle (if time allows).
Phase 3 (Future):
 Vendor features if multi-vendor needed.
 Mobile app or PWA.
 Blog or content section (with admin moderation).
 Internationalization (multi-language).
This phased plan prevents scope creep and ensures core value is delivered
first.

TASK_BREAKDOWN.md

Task Breakdown
Below is a breakdown of development tasks (can be used to create tickets in
Trello/Notion):
1. Project Setup:

2. Initialize [Link] (TS) project with App Router.

3. Configure Tailwind CSS and add ginger color palette.


4. Install Prisma, NextAuth, Sharp, Framer Motion, etc.

5. Authentication:

6. Set up NextAuth routes (app/api/auth) with Prisma adapter[4].

7. Create UI for signup/login (including social buttons). Validate with Zod.


8. Test protected routes (middleware for Admin/Owner).

9. Database & Models:

10. Define Prisma schema (prisma/[Link]) (see


DATABASE_SCHEMA.md).

11. Run migrations (prisma migrate dev).


12. Seed initial data (Admin user).

13. API Endpoints:

14. Implement user endpoints (/api/users).

15. Pet endpoints (/api/pets).


16. Product endpoints (/api/products) with full-text search query.
17. Cart/Order endpoints (/api/orders) with Stripe integration.
18. Wishlist endpoints.
19. Admin endpoints (/api/admin/*).

20. UI Pages (Owner):

21. Home/Landing page with product carousel.

22. Product list page (with search bar).


23. Product detail page (with images and add-to-cart).
24. Cart page, checkout page.
25. Orders page (list of orders).
26. Pet profile page (list and form).
27. Account settings page.

28. UI Pages (Admin):

29. Admin dashboard (overview stats).

30. Users management page.


31. Products management page.
32. Orders management page.

33. Integrations:

34. Integrate Stripe checkout (use test keys).

35. Configure email service (SendGrid/Mailgun) for order emails (if


included).
36. Set up NextAuth providers (Google, etc.).

37. Security & Validation:

38. Add Zod validation for all forms and API requests[8].

39. Implement CSRF protection (built-in by NextAuth for auth, add


token for other POSTs).
40. Ensure password hashing (bcrypt).

41. Testing:

42. Write unit tests for utility functions (e.g. price calc).

43. Integration tests for API endpoints.


44. E2E tests (Playwright) for key flows (login, add to cart, checkout).

45. SEO & Performance:

o Add meta tags and Open Graph to all pages.


o Generate [Link].
o Optimize images (Sharp) and leverage <Image> component.
o Test Lighthouse performance and aim for 90+ scores.
46. Deployment:

o Configure Hostinger environment (node app, DB).


o Set up GitHub repo and auto-deploy[7].
o Monitor logs, set up backups.
47. Polish & Launch:

o Bug fixes, UI polish.


o Accessibility audit (ARIA labels, contrast).
o Deploy to production and announce.
This checklist can be assigned to team members with task tracking.
AUTH_FLOW.md

Authentication & Authorization Flow


Strategy: Use [Link] (NextAuth v5) with Prisma adapter for our MySQL
DB[4]. Default session strategy is JWT in cookie. We include these providers:
Email (magic link or password), Google OAuth, etc.
Process:
1. Sign Up / Login: User uses sign-up form (POST /api/auth/signup) or
NextAuth's built-in sign-in (e.g. /api/auth/callback/email).
2. Session: On login, NextAuth issues a session cookie. API routes use
auth() to get session:

import { auth } from "@/auth";


export default async function handler(req, res) {
const session = await auth(req, res);
if (!session) return [Link](401).send({ error:
"Unauthorized" });
// [Link] { id, email, role }
}

1. Roles (RBAC): We check [Link]. Two roles: OWNER and


ADMIN. For example, an Owner cannot access admin routes.
2. Middleware (RBAC): In [Link]:
import { auth } from "@/auth";
import { NextResponse } from "next/server";
export default async function middleware(req) {
const { pathname } = [Link];
const session = await auth(req);
if ([Link]("/admin") && session?.[Link] !== "ADMIN")
{
return [Link](new URL("/login", [Link]));
}
if ([Link]("/owner") && session?.[Link] !== "OWNER")
{
return [Link](new URL("/login", [Link]));
}
return [Link]();
}

1. [Link] Integration: In [Link], configure NextAuth:


import NextAuth from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/prisma";
export const { handlers } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [
// GoogleProvider({clientId, secret}), EmailProvider({...}), etc.
],
callbacks: {
async session({ session, user }) {
[Link] = [Link];
[Link] = [Link]; // make role available
return session;
}
}
});
export { handlers as GET, handlers as POST }; // for
/api/auth/[...nextauth]

1. Password Reset / Email: Use [Link]’s email provider (magic link) or


build a custom reset flow. Ensure tokens are stored
(VerificationRequest model).
2. CSRF & Security: NextAuth handles CSRF for auth routes[9]. For
custom forms, use next-auth CSRF token or Double Submit Cookies.
This flow ensures secure login and strict access control by role.

SEO_STRATEGY.md

SEO Strategy
We use [Link]’s server-side rendering for SEO-friendly pages:
 Meta Tags: Each page has dynamic <title> and <meta
name="description">. For products/pets, use their seoTitle/seoDesc
from DB.
 Open Graph: Include OG tags (og:title, og:description, og:image)
for link previews.
 URLs: Use clean URLs (e.g. /products/golden-retriever-puppy).
Implement getStaticPaths or use slugs.
 Sitemap: Generate [Link] listing all product and category
pages.
 Robots: [Link] allows all crawling.
 Semantic HTML: Use headings (<h1> on product name, etc.). Alt
attributes on images.
 Performance: Fast loading is also SEO. Aim for TTFB < 300ms.
Optimize images (target <100KB WebP after Sharp).
 [Link]: Add JSON-LD for products (price, availability) and
reviews (if any).
 Content: For admin content (site title, tagline), ensure relevant
keywords (e.g. “pet store”, “dog food”).
 Analytics: Integrate Google Analytics for user behavior (optional).
By following best practices and dynamic meta tags, we aim to rank well for
pet product keywords.

[Link]

Deployment Instructions
Deploy SimbaPetShop on Hostinger Business (managed [Link] hosting).
1. Build Settings: In hPanel → [Link] Apps → choose Setup. Set Build
command to npm install && npm run build.
2. Environment Variables: Add the following in hPanel:

3. DATABASE_URL (e.g. mysql://USER:PASS@HOST:PORT/DB)

4. NEXTAUTH_URL (your domain, e.g. [Link]


5. NEXTAUTH_SECRET (random 32+ char secret)
6. STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET (for Stripe)
7. HOSTINGER_STORAGE (if using Hostinger’s filesystem path) or S3
credentials if using S3.
8. GitHub Integration: In hPanel → [Link] Apps → Git, enter your Git
repo URL and branch (main). Click Enable Auto Deploy. Hostinger will
deploy on each push to main[7].

9. After linking, click Pull to fetch the latest code.

10. Webhook URL is auto-generated: configure this in your GitHub


repo under Settings → Webhooks to trigger on push (Hostinger
doc[11]).
11. Domain & SSL: Point your domain’s A record to Hostinger. In
hPanel, enable SSL (free Let’s Encrypt).
12. Database: Use the MySQL database provided by Hostinger.
Create a database and user via hPanel → Databases, and use those
credentials in DATABASE_URL.
13. Deploy: Once the repo is linked, push to main. Hostinger will run
build. Check logs in hPanel. The app URL (or your domain) should show
the site.
14. Backups: Set up automatic backups of the MySQL database
(hPanel → Databases → Backup). Also backup the /public and /.next if
storing files locally.
15. Webhook for CI/CD: Ensure your GitHub’s webhook is active
(see Hostinger support). A push triggers npm install and npm run
build.
16. Testing: After deployment, test key flows (signup, listing,
checkout) on staging before DNS switch.
This CI/CD setup ensures a smooth pipeline from GitHub to live site[6][7].

[Link]

Contributing Guidelines
Thank you for contributing to SimbaPetShop!
 Code Style: Use TypeScript and follow the existing code style. Run npm
run lint before commits.
 Branching: Use feature branches named feature/feature-name.
Rebase/merge often to avoid conflicts.
 Pull Requests: Always open a PR to develop (not main). Assign at
least one reviewer. PR title should be clear (e.g. “Add product search”).
 Commits: Write meaningful commit messages (Imperative tense). E.g.
“Fix login form validation”.
 Tests: Add tests for new features. PR must pass all CI checks (lint,
tests).
 Documentation: Update relevant docs ([Link], etc.) when adding
features.
 Issues: Link PRs to related issue tickets.
By following these rules, we keep the project consistent and maintainable.

RELEASE_CHECKLIST.md

Release Checklist
Before launching a new version, complete the following:
 [ ] Feature Complete: All planned MVP features implemented and
tested.
 [ ] Code Review: All PRs merged into main after reviews.
 [ ] Testing: Unit/integration/E2E tests passing in CI. No high severity
bugs open.
 [ ] Performance: Pages load fast (TTFB < 300ms). Image sizes
optimized (<100KB typical).
 [ ] Security: No known vulnerabilities (run npm audit). Ensure env
secrets are set.
 [ ] SEO: Meta tags in place, sitemap generated.
 [ ] Backup: Database backup taken.
 [ ] Docs: README and docs updated for new changes.
 [ ] Environment: Production env variables verified.
 [ ] Deployment: Auto-deploy pipeline configured and tested.
 [ ] Announcement: Prepare deployment notes or email to notify users
if needed.
Once all checks are green, deploy to production and celebrate!

Implementation Timeline
(Approximate, assumes a team of 3–4 developers)

Phase Duration Milestones


Planning & Setup 1–2 weeks Finalize docs, repo
setup
Auth & Core APIs 2–3 weeks NextAuth login,
User & Pet APIs
Products & Cart 3–4 weeks Product CRUD,
Search,
Cart/Checkout
UI Development 3–4 weeks Frontend pages
(owner/admin)
Testing & QA 2 weeks Complete test
suite, bug fixes
Deployment 1 week Hostinger config,
launch
Total 9–14

Team Composition (est. for \$50k project)


 2–3 Full-Stack Developers ([Link], Node, TS, Prisma)
 1 UI/UX Designer (branding, mockups)
 1 QA Engineer (testing, CI)
This documentation pack is designed to be actionable. Developers or AI-
assisted tools can use it to start implementation immediately. All key details,
schemas, endpoints, and configs are specified.

References
 [Link] App Router docs[1]
 Prisma MySQL support[2]
 [Link] (NextAuth v5) & Prisma adapter[4]
 Sharp image processing[5]
 Hostinger Git/Node hosting[6][7]
 Zod validation library[8]
 MySQL full-text search[10]

[1] [Link] Docs: App Router | [Link]


[Link]
[2] MySQL database connector | Prisma Documentation
[Link]
[3] [9] [Link]
[Link]
[4] [Link] | Prisma
[Link]
[5] High performance [Link] image processing | sharp
[Link]
[6] Deploy Your [Link] App | [Link] Hosting Made Easy
[Link]
[7] [11] How to Deploy a Git Repository in Hostinger
[Link]
in-hostinger/
[8] Using NextAuth v5, Prisma, Zod and Shadcn with [Link] 14 for building
an authentication app | by Ahmed Bouchefra | Medium
[Link]
shadcn-with-next-js-14-for-building-an-authentication-app-5f1b9bec0ebe
[10] How to Handle Full-Text Search in MySQL
[Link]

You might also like