Trendexa Documentation | ThemeForest Ready

1. Introduction

Project Overview ThemeForest Ready

Trendexa is a fullstack Next.js platform for technology-focused publishing and product content management. It includes a public frontend and a protected admin dashboard to manage articles, reviews, products, comparisons, buying guides, web stories, static pages, ads, users, and SEO content.

Main Features

Modern public website for tech news, reviews, and gadget listings.
Admin dashboard for dynamic content management.
Prisma ORM with PostgreSQL/Neon support.
Ad slot system with AdSense-ready architecture.
SEO-ready setup: metadata, sitemap, robots.txt, Open Graph, Twitter card.
S3-compatible image upload support.

What You Get

Full source code (frontend + admin + backend logic).
Database schema and migration support with Prisma.
Ads and admin authentication flow.
Production build and deployment compatibility.

Technology Stack

Next.js 14 (App Router)
React 18
TypeScript
Tailwind CSS

Prisma ORM
PostgreSQL / Neon
NextAuth (Auth.js v5)
AWS S3-compatible storage

2. Requirements

Node.js: Recommended Node.js 20 LTS or newer.
Package Manager: npm, yarn, or pnpm.
Database: PostgreSQL (Neon recommended for managed hosting).
ORM: Prisma CLI and Prisma Client.
Optional Storage: S3-compatible object storage (AWS S3, Cloudflare R2, MinIO, etc.).
Basic Knowledge: Environment variables, terminal commands, and basic Next.js deployment flow.

Note You can run Trendexa without S3 configuration if your current feature scope does not require admin image upload.

3. Folder Structure

Important project folders and their purpose:

trendexa/
├─ src/
│  ├─ app/                # Routes, pages, API routes (App Router)
│  ├─ components/         # Reusable UI and feature components
│  ├─ data/               # Ads + static/default data sources
│  ├─ lib/                # Utilities and shared helpers
│  ├─ server/             # Server-side query/services
│  └─ types/              # Shared TypeScript types
├─ prisma/
│  ├─ schema.prisma       # Database schema
│  ├─ migrations/         # Prisma migration history
│  └─ seed.ts             # Seed logic
├─ public/                # Public assets (images, static files)
├─ scripts/               # Diagnostic/reset helper scripts
├─ next.config.js         # Next.js config (images, etc.)
└─ package.json           # Scripts and dependencies

Customize Carefully

prisma/schema.prisma and migrations (database integrity).
src/auth.ts and admin auth flow.
src/data/ads.ts (ads slot mapping and ads behavior).
src/app/(admin) routes (admin business flow).

4. Installation

Download and extract the Trendexa ZIP package.
Open terminal inside the project root.
Install dependencies with your preferred package manager.

npm install
# or

yarn install
# or

pnpm install

Tip Use only one package manager in a project to avoid lockfile conflicts.

5. Environment Variables

Create .env or .env.local in your project root. Example template:

AUTH_SECRET=""
AUTH_URL=""
AUTH_TRUST_HOST=""

DATABASE_URL=""
DIRECT_URL=""

ADMIN_INITIAL_EMAIL="[email protected]"
ADMIN_INITIAL_PASSWORD="Admin@1234"

NEXT_PUBLIC_SITE_URL=""
NEXT_PUBLIC_CONTACT_EMAIL=""

# S3 CONFIG
AWS_ACCESS_KEY_ID=""
AWS_SECRET_ACCESS_KEY=""
AWS_REGION=""
AWS_BUCKET=""

NEXT_PUBLIC_S3BUCKET=""

Warning Do not commit real secret values to Git. Keep secrets only in environment config on local machine or hosting provider.

Variable	Required	Description	Example
DATABASE_URL	Yes	Main runtime PostgreSQL connection string.	postgresql://user:pass@host/db?sslmode=require
DIRECT_URL	Recommended	Direct DB URL for Prisma migrations.	postgresql://user:pass@host/db?sslmode=require
AUTH_SECRET	Yes	Secret used to sign authentication tokens.	Generated secure random string
AUTH_URL	Yes	Canonical app URL used by auth callbacks.	https://yourdomain.com
AUTH_TRUST_HOST	Optional	Trust host header for authentication in proxied environments.	true
ADMIN_INITIAL_EMAIL	Yes	Bootstrap admin login email for fresh database setup.	[email protected]
ADMIN_INITIAL_PASSWORD	Yes	Bootstrap admin login password for fresh database setup.	Change this in production
AWS_ACCESS_KEY_ID	Optional*	Access key for S3 API.	AKIA...
AWS_SECRET_ACCESS_KEY	Optional*	Secret key for S3 API.	********
AWS_REGION	Optional*	S3 region.	us-west-2
AWS_BUCKET	Optional*	Bucket name for uploads.	my-app-uploads
NEXT_PUBLIC_S3BUCKET	Optional*	Public S3 bucket name for client-side references.	my-app-uploads
NEXT_PUBLIC_SITE_URL	Yes	Public site URL used by SEO and metadata helpers.	https://yourdomain.com
NEXT_PUBLIC_CONTACT_EMAIL	Optional	Contact email displayed on site.	[email protected]

* Required when using S3/image upload features.

6. Database Setup

Step-by-step

Create PostgreSQL/Neon database and set DATABASE_URL and DIRECT_URL.
Validate Prisma schema.
Generate Prisma Client.
Apply migrations.
Seed required data.

npx prisma validate
npx prisma generate
npx prisma migrate deploy

# Development migration flow
npx prisma migrate dev

# Seed (project script)
npm run db:seed

# If your package has alias script
npm run seed

Note Ads seed can be inserted automatically. If demo/default content is removed, create your production content from the admin panel.

Tip Always review prisma/schema.prisma before deploying migrations to production.

7. Running the Project Locally

npm run dev

Frontend URL: http://localhost:3000

Admin URL: http://localhost:3000/admin

Warning Admin route may require login depending on authentication setup and user records in your current database.

8. Build for Production

npm run type-check
npx prisma validate
npm run build
npm run start

A successful type-check, Prisma validation, and production build means your project is generally production-ready. Always run these checks after environment changes, schema updates, or content model updates.

9. Admin Dashboard Guide

The admin dashboard allows dynamic content management without editing source files.

Manage Articles
Manage Reviews
Manage Products
Manage Comparisons
Manage Buying Guides
Manage Categories
Manage Ads and Ad Slots
Manage Static Pages
Manage SEO
Manage Users
Manage Settings

Note In production workflows, add/edit content from admin panel rather than hardcoding content in source files.

10. Ads / Google AdSense Setup

Set your own AdSense client/publisher ID via environment variable (project-specific).
Configure slots from admin where applicable.
Ad slots are mapped and expected by the ads system.
src/data/ads.ts should remain intact if your project logic depends on it.
AdSense account approval is required before real ads appear.
Use test ads during QA; use production ads only after approval.

Critical Warning Never use another person’s AdSense client ID. Always use your own verified account details.

11. Image Upload / Storage Setup

Trendexa supports S3-compatible storage for media upload in admin. Configure storage variables in environment, then ensure your Next.js image domains are allowed.

Next.js Remote Image Host Example

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "your-domain.com",
    },
  ],
}

Common Issue If image host is not configured in next.config.js, Next.js image component may fail to render remote images.

12. SEO Setup

Set global site title/description and metadata defaults.
Configure Open Graph title, description, and preview image.
Configure Twitter card metadata.
Ensure slug fields are clean and unique.
Use canonical URL patterns for indexable pages.
Verify /sitemap.xml and /robots.txt output.
Manage per-content SEO from admin panel where supported.

13. Customization Guide

You can customize the project to match your brand:

Logo and favicon
Color palette and typography
Header and footer layout
Homepage sections and order
Categories and navigation
Ads placement
SEO content and static pages
Theme style and section-level components

Warning Avoid modifying core auth, database, and ads logic unless you understand impact and dependencies.

14. Deployment Guide

Vercel Deployment

Push project to GitHub.
Import repository in Vercel.
Add all required environment variables.
Set build command: npm run build.
Set start command: npm run start (if required by host flow).
Deploy and verify routes and admin login.

Netlify Deployment

Connect repository in Netlify.
Set build command: npm run build.
Configure Next.js runtime support for App Router.
Add environment variables and redeploy.

VPS / Dedicated Server Deployment

npm install
npm run build
pm2 start npm --name trendexa -- start

Install Node.js 20+ on server.
Set environment variables securely.
Use reverse proxy (Nginx/Caddy) and HTTPS.
Keep Prisma migrations in release process.

15. Updating the Project

Backup production database before update.
Pull latest code.
Install/update dependencies.
Run migrations.
Build and restart application.

git pull
npm install
npx prisma migrate deploy
npm run build

Problem	Reason	Solution
Database connection error	Invalid or unreachable DB URL	Verify `DATABASE_URL`, SSL params, and DB network access.	Verify `DATABASE_URL`, SSL params, and DB network access.
Prisma client not generated	Prisma generate was not run	Run `npx prisma generate`.
Missing environment variables	Required env values not configured	Compare with env template and restart app after changes.
Next.js image hostname error	Remote image domain not allowed	Add host in `next.config.js` `images.remotePatterns`.
Build failed	Type or config mismatch	Run `npm run type-check` and fix listed errors before build.
Admin login issue	Admin user missing or wrong password hash	Use bootstrap env credentials and/or reset admin password script.
S3 upload not working	Invalid bucket/keys/host config	Validate S3 credentials, bucket policy, endpoint URL, and region.
Ads not showing	No AdSense approval, wrong client ID, or slot inactive	Use approved AdSense account, verify slot setup, and check admin ad config.
Empty content on fresh DB	No content records created yet	Create content from admin panel, run seed if needed for required system data.

17. FAQ

Can I use my own database?

Yes. Any PostgreSQL-compatible database is supported.

Can I remove demo data?

Yes. You can operate with admin-created data only.

Can I use Google AdSense?

Yes, with your own approved AdSense account and correct slot configuration.

Can I customize colors and design?

Yes. You can customize Tailwind styles, components, and assets.

Can I deploy on Vercel?

Yes. Trendexa is deployment-friendly for Vercel.

Can I use Neon database?

Yes. Neon is fully supported as PostgreSQL provider.

Can I change logo and branding?

Yes. Replace logo assets and update branding text/metadata.

Can I add additional pages/features?

Yes. Extend routes, Prisma schema, and admin modules as needed.

Can I manage content from admin?

Yes. Admin dashboard is intended for dynamic content operations.

18. Support

For support requests, contact the author through your ThemeForest support channel. Please include complete technical details so support can assist quickly.

Include This Information

Purchase code
Project version
Node.js version
Hosting provider (Vercel/Netlify/VPS/etc.)
Error screenshots
Terminal/console error logs
Steps to reproduce issue

Support Scope Support typically covers bug fixes, setup guidance, and documented feature usage. Custom feature development may be treated separately.

19. Changelog

Version 1.0.0

Initial release.

20. Credits

Next.js
React
Prisma
PostgreSQL
Tailwind CSS
shadcn/ui (if used in your build)
Lucide Icons (if used)
Other third-party plugins/assets as included in project package

Trendexa - Fullstack Next.js Product Documentation

1. Introduction

Main Features

What You Get

Technology Stack

2. Requirements

3. Folder Structure

Customize Carefully

4. Installation

5. Environment Variables

6. Database Setup

Step-by-step

7. Running the Project Locally

8. Build for Production

9. Admin Dashboard Guide

10. Ads / Google AdSense Setup

11. Image Upload / Storage Setup

Next.js Remote Image Host Example

12. SEO Setup

13. Customization Guide

14. Deployment Guide

Vercel Deployment

Netlify Deployment

VPS / Dedicated Server Deployment

15. Updating the Project

17. FAQ

Can I use my own database?

Can I remove demo data?

Can I use Google AdSense?

Can I customize colors and design?

Can I deploy on Vercel?

Can I use Neon database?

Can I change logo and branding?

Can I add additional pages/features?

Can I manage content from admin?

18. Support

Include This Information

19. Changelog

20. Credits