Test ShowcaseAI from start to finish

What is ShowcaseAI?

The one-paragraph version, in plain English.

ShowcaseAI is a website where businesses create marketing videos and images using artificial intelligence. A user types in an idea or uploads a product photo, and the app produces things like talking-avatar videos, product showcase clips, images, voiceovers, and ad copy — automatically. It runs on a "credits" system: every creation costs a few credits, and users top up their balance by buying more.

Under the hood, ShowcaseAI is actually two programs working together. You don't need to understand the code, but knowing this makes the setup steps make sense:

Before You Begin

A short checklist so nothing surprises you.

• The project is unzipped on your computer — you'll see two folders: backend (the engine) and frontend (the screen).
• Node.js 20.19 or newer is installed (22 LTS recommended) — this is the tool that runs both programs. Type node -v in a terminal to check. If you see "node is not recognized," install it from nodejs.org first.
• A MongoDB database — either MongoDB installed on your computer, or a free MongoDB Atlas cluster. You'll need its connection address (it starts with mongodb:// or mongodb+srv://).
• An internet connection — the AI features call online services (for images, voices, and video).
• A modern browser — Chrome, Edge, or Firefox.

1 Starting the App

You'll open two small terminal windows and leave them running. Think of them as the on-switch for each program.

Step A — Set up the engine (first time only)

1. Open a terminal in the unzipped folder (in VS Code: Terminal → New Terminal; on Windows you can also use PowerShell).
2. Type the following, pressing Enter after each line:

$ cd backend
$ npm install
$ npm run setup

The setup assistant asks a few questions. The package contains no settings file — setup creates backend/.env (with the database address and the two secrets) and frontend/.env from the .env.example files. For a first test you can simply press Enter to accept each suggested answer. The one question you answer yourself is the MongoDB address: press Enter for a MongoDB installed on this computer (mongodb://127.0.0.1:27017/showcaseai), or paste your own Atlas address (mongodb+srv://…). When it asks for the admin account, enter the email (default admin@showcaseai.app), a name and a password. There is no default password: leave it empty and setup generates a strong one and prints it once at the end — save it. It then creates one demo user (not when NODE_ENV=production) and the starter data and prints the logins.

Step B — Start the engine (backend)

$ npm run dev

Wait a few seconds until you see that the server is running and the database is connected. Leave this window open — closing it switches the engine off.

Step C — Start the screen (frontend)

1. Open a second terminal (in VS Code click the + icon) so the first one keeps running.
2. Type this, pressing Enter after each line:

$ cd frontend
$ npm install
$ npm run dev

The settings file frontend/.env was created by setup and points at your engine (VITE_API_URL=http://localhost:5000/api/). Without it, the screen still uses that address. Open http://localhost:4001 in your browser.

2 Checking the Setup

A one-minute test that tells you whether the installation is healthy before you try any features.

3 Logging In

There are two kinds of accounts. Setup creates one of each; visitors can also register themselves on the sign-up page (/register) and an admin can create accounts in the admin panel.

Logins (created by setup)

The demo user is for local testing only — its password is public. Delete it in Admin → Users before you go live. Setup never creates it when NODE_ENV=production.

1. On http://localhost:4001, log in with one of the accounts above.
2. Before testing the AI features (videos, avatars, images, voice) you need two things: your own, paid provider keys in Admin → Settings (Kie.ai, AWS S3, Speechify, NewPortAI — see API Keys & Settings), and a public https BACKEND_URL (Settings → Site & Branding), because Kie.ai sends finished results to <BACKEND_URL>/api/kie/webhook. On localhost, generations stay "Processing" — for local testing run ngrok http 5000 and set BACKEND_URL to the https address it shows (how).
3. After login, a menu appears on the left — this sidebar is your map to every feature.
4. To switch accounts later, use Logout (bottom of the profile menu) and log back in as the other type.
5. To add more people, log in as admin and use Users → Add User (see Section 9).

4 Understanding Credits Important

Almost every creation costs credits. The demo user already has 500, so you can start testing straight away.

Credits are the app's "fuel." An account with no credits sees "Insufficient credit" when trying to generate. There are two ways to get more credits:

• Give credits as an admin (best for testing — instant and free).
• Buy them through the Buy Credits page (tests the real payment flow — see Section 8).

Give a test user credits

1. Log in as an admin.
2. Open Users from the admin sidebar.
3. Find your test user, click Edit, enter an amount under Assign Credit (e.g. 100) and click Update. The amount is added to their balance.
4. Log back in as that user — the credit balance shows in the sidebar.

5 The Creative Studios

These are the core "make something" tools, found in the left sidebar. Test them in roughly this order — simplest first.

6 The AI Ad Tools

These four tools make the app a complete "ad creation" platform, not just a video maker.

7 Projects & Community

8 Buying Credits (Payments) Stripe

This tests the real money flow — safely, using Stripe's "test mode" (no real charges).

Setup already created three example credit packs (Starter, Pro and Business). The only thing you need to add is a Stripe test key in Admin → Settings → Payments — see API Keys & Settings.

1. As a user: open Buy Credits from the sidebar. You'll see the packs.
2. Click Buy Now — you're taken to Stripe's secure checkout page.
3. Pay with Stripe's test card: number 4242 4242 4242 4242, any future expiry date, any 3-digit code, any postcode.
4. You're returned to a success page, and your credit balance goes up. Your purchase appears under Purchase History on the Buy Credits page.
5. (Optional) As admin: open Credit Packs → Add Credit Pack (e.g. name Test, 50 credits, price 5), save, and check it appears on the user's Buy Credits page.

9 The Admin Panel Admin only

Log in as an admin (e.g. admin@showcaseai.app) to see the management side of the business.

1. Log in as admin and click through each page above.
2. Users: add a new user (20 credits), log out, and log in as them — the balance should show 20.
3. Deleted users: delete that user, log out, and try to sign up on /register with the same email — you should see "This email can't be used to register. Please contact the site administrator." Then, as admin, add the user again with the same email in Users → Add — the message says "Deleted account restored with its previous data" and the old credits are back (plus any you enter now).
4. Prompts: add a prompt (a picture is optional), then check it appears for users in the matching tool.
5. Community: pin a post and check it shows at the top of the user's Community page.
6. Credit Packs: edit a pack's price and check the Buy Credits page shows the new price.
7. Settings: enter a key, click Save, then click its Test button — you should see a success message. After saving, the key is shown as dots (it is never shown again in full).

10 Security Checks

Quick tests that prove the protections work. None of them need technical knowledge — just two browser windows (for example a normal window and a private/incognito window).

Automatic security test

The engine includes a script that runs 33 of these checks for you in about a minute. With the engine running and setup finished, open a terminal in the backend folder and type (use your own admin password; set SMOKE_ADMIN_EMAIL too if your admin email is not admin@showcaseai.app):

$ SMOKE_ADMIN_PASSWORD="your-admin-password" npm run smoke   # macOS / Linux
> $env:SMOKE_ADMIN_PASSWORD="your-admin-password"; npm run smoke   # Windows PowerShell

npm run smoke runs scripts/security-smoke.js. Each check prints a ✔ (passed) or ✖ (failed) line, followed by a summary such as "33 passed, 0 failed".

Adding Your Own Content

A fresh installation has only the admin, one demo user, the AI model catalog, community categories, credit packs and dropdown lists. Prompts, avatar templates and community posts are added by you (as admin) — you need some of them to test the matching features.

Step-by-step instructions with every field are in documentation.html → Add your own content (manual) (open it).

API Keys & Settings

The app relies on a few outside services. You enter their "keys" in the admin panel: Admin → Settings. No files to edit and no restart needed. Step-by-step instructions for getting each key are in documentation.html → Keys & Credentials.

Entering a key

1. Log in as admin and open Settings from the admin sidebar.
2. Paste the key into its field (for Stripe testing use the key that starts with sk_test_).
3. Click Save, then the Test button next to the service. A success message means it works.

Troubleshooting

The things most likely to trip you up, and the fix for each. Running npm run check in the backend folder often points straight at the problem.