Business in a Box: The Complete Setup Guide

Codeco.tech sells ready-to-launch websites and full-stack business applications. Instead of starting with an empty project, you receive a working platform with sign-in, a database, bookings, payments, an AI chat feature, a blog, contact forms, and an admin dashboard.

Codeco.tech's products are downloadable, production-ready websites that you own and can host yourself, without being locked into a website builder. The wider service focuses on modern applications built with React, TypeScript, Next.js, databases, and AI integrations.

This guide explains how to set up the Business in a Box — Coaching & Booking Platform from your downloaded ZIP file.

How long this takes: roughly 30-45 minutes if every account (Neon, Google, Cal.com, Anthropic) is created ahead of time. Most of that is waiting on account signups, not the actual setup — the commands themselves take a few minutes total.


What You Receive

The platform is designed for coaches, consultants, trainers, agencies, and other service businesses.

It includes a professional business website, client registration and Google sign-in, and a PostgreSQL database hosted with Neon.

It includes a booking page connected to Cal.com, Stripe-ready payment functionality, and an AI chat widget powered by an API key.

It includes contact and newsletter forms, a blog and built-in content system, and an admin dashboard.

It includes contact downloads in CSV format, legal and compliance pages, and responsive pages for phones, tablets, and computers.

It includes support videos and lifetime support from Codeco.tech, plus the option to develop the website into a mobile PWA application.

The website itself is built with Next.js, NextAuth, Neon PostgreSQL, and Cal.com. Codeco.tech also provides downloadable full-stack websites with backend functionality, forms, databases, and optional AI features.

Before You Begin

You need the downloaded Codeco.tech ZIP file, and a computer running macOS, Windows, or Linux.

You need Node.js LTS, and a code editor such as Visual Studio Code.

You need a Google account, a Neon account, and a Cal.com account.

You need an Anthropic API key for the AI chat widget, and a hosting account such as Vercel when you're ready to publish.

Create these accounts before starting: Node.js, Visual Studio Code, Neon, Google Cloud Console, Cal.com, Anthropic Console.

The easiest setup is to complete the local installation first. Only publish the website after the local version works correctly.

The Safe Setup Method

The setup below is designed to be repeatable. You can run the harmless steps again without creating duplicate users, duplicate folders, or duplicate database tables.

The important rules: use one project folder, and keep one .env.local file.

Do not create a new database every time you try the setup. Sign in before running the admin command.

Check each page before moving to deployment. Never share .env.local.

1. Unzip the Download

Find the ZIP file you downloaded from Codeco.tech.

On macOS, double-click the ZIP file. On Windows, right-click it and choose Extract All.

Open the extracted project folder.

Do not rename individual project files. The commands in this guide must run from the main project folder — the folder containing package.json.

2. Install Node.js

Node.js is the software that runs the project on your computer.

Open nodejs.org and download the version marked LTS. Follow the installation instructions.

After installation, close your terminal and open a new terminal window. Check that Node.js is installed:

node --version
npm --version

You should see a version number for both commands.

3. Open the Project

Open the extracted folder in Visual Studio Code. You can also open it from a terminal:

cd /path/to/your/project
code .

Replace /path/to/your/project with the location of your project folder.

In Visual Studio Code, open the terminal using View → Terminal, or Cmd + `` on macOS, `Ctrl + ` `` on Windows.

4. Create the Private Settings File

The project includes a file called .env.example. Make a copy of this file and name the copy .env.local.

The .env.local file contains passwords and private service keys. It must stay on your computer and must never be uploaded publicly.

Next.js loads .env.local automatically during local development. Variables without the NEXT_PUBLIC_ prefix remain available only to the server, while variables beginning with NEXT_PUBLIC_ can be included in the browser application.

Add your values to .env.local:

DATABASE_URL="your-neon-connection-string"

AUTH_SECRET="your-long-random-secret"
AUTH_URL="http://localhost:3000"

AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"

ANTHROPIC_API_KEY="your-anthropic-api-key"

NEXT_PUBLIC_APP_URL="http://localhost:3000"

CALCOM_API_KEY="your-cal-com-api-key"
CALCOM_API_URL="https://api.cal.com/v1"
CALCOM_EVENT_TYPE_ID="your-event-type-id"
CALCOM_WEBHOOK_SECRET="your-webhook-secret"

Do not paste the example values above unless they are your real credentials.

Create the database connection. In Neon: create a project, open the project dashboard, select Connect, and copy the PostgreSQL connection string.

Paste it after DATABASE_URL= in .env.local. Neon recommends storing the connection string as an environment variable — its pooled connection is suitable for web applications and high-concurrency use.

Watch for this: Neon gives you two connection strings — pooled and direct. Use the pooled one (it usually has -pooler in the hostname) for the app itself. Using the wrong one is a common source of intermittent "too many connections" errors under real traffic.

Create the authentication secret. Generate a long random value for AUTH_SECRET:

openssl rand -base64 32

Copy the result into .env.local. If the command doesn't work on your computer, use the secret generator linked in the original README. Do not use a short or easily guessed password.

5. Install the Project Packages

From the project folder, run:

npm install

This downloads the packages required by the website.

It's safe to run this command again if the installation stops or reports an error — it brings the project back into the required state without creating a second copy of the application.

6. Create the Database Tables

Once DATABASE_URL is complete, run:

npm run db:push

This creates or updates the database structure required by the application.

The platform uses tables for users, accounts, sessions, contacts, newsletters, and chat records. Run this command against the database connected to the current .env.local file.

Do not run this against a production database until you've checked that the connection string is correct.

7. Start the Website

Run:

npm run dev

Open http://localhost:3000 in your browser. You should see the website homepage.

Keep the terminal open while testing. To stop the website, press Ctrl + C. Starting the development server again is safe — it doesn't create a second website or database.


Create the First Admin

This step must happen in the correct order.

8. Sign in with Google First

Open http://localhost:3000/login. Choose Sign in with Google and use the email address you want to make the administrator.

The sign-in must complete successfully before you run the admin command. The first sign-in creates your user record in the database.

9. Give Yourself Admin Access

Return to the terminal and run:

npx tsx scripts/make-admin.ts your-email@example.com

Replace your-email@example.com with the exact email address used during Google sign-in. Real example — if you signed in as sarah@gmail.com, you'd type npx tsx scripts/make-admin.ts sarah@gmail.com.

Now open http://localhost:3000/admin. You should see the admin dashboard.

This command updates the existing user — it does not create another account. If the admin area doesn't open, sign out, sign in again with Google, and check that the email in the command matches exactly.


Connect the Booking Calendar

Cal.com provides the availability and booking calendar shown on the /book page.

10. Create a Cal.com Event

Sign in at Cal.com. Create an Event Type — give it a name such as "30 Minute Consultation."

Set your availability and meeting location, then save the event. An event type is the appointment customers can book.

11. Add the Cal.com Credentials

In Cal.com, open Settings → Developer → API Keys → New API Key. Copy the key into CALCOM_API_KEY="your-api-key".

Find the event type ID in the event page address — for example, cal.com/event-types/12345 means the event type ID is 12345. Add it to CALCOM_EVENT_TYPE_ID="12345".

Cal.com uses an event type ID to identify the appointment being booked.

12. Update the Business Details

Open lib/business-config.ts. This is where you update services, prices, service descriptions, coaches or staff, booking links, and staff images.

The calLink value must use this format: your-username/your-event-slug — for example, janedoe/30min.

Do not enter the complete URL. Do not write https://cal.com/janedoe/30min.

Place staff and service images inside public/.

Keep each service id stable if the existing application uses it elsewhere. Change the displayed name and description without changing the ID unless you understand the code that references it.


Test the Website

Before publishing, check each feature in order: home page loads, /book shows services and coaches, the booking flow lets you select a real Cal.com time.

Check /contact submits, the newsletter accepts a test subscription, and the chat widget responds to a test message.

Check /blog posts load correctly, /login works with Google sign-in, /profile shows the signed-in account, /admin opens the dashboard, and contact export downloads as a CSV file.

Test with a normal client account as well as the admin account — this confirms visitors cannot see admin functions.

If the project includes the quality-control command from the README, run npm run tt and fix every reported issue before deployment.

Add a Blog Post

The blog uses folders and a central post list.

To add a post: copy an existing post folder, such as app/blog/day-after-genius/, and rename the copy — for example, app/blog/my-new-post/.

Open the copied page.mdx file, remove the old article, and add the new one.

Open posts.ts in the project root, copy an existing post entry, and paste it near the top. Change the title, slug, date, and thumbnail.

The slug in posts.ts must match the folder name — for example, my-new-post.

If you use ChatGPT or Claude to draft the article, keep the heading, excerpt, and paragraph lengths close to an existing post. This helps the new article fit the existing design without extra layout work.

Publish with Vercel

Vercel is the recommended hosting option for this Next.js application.

Install the Vercel command-line tool if needed:

npm install -g vercel

From the project folder, sign in and deploy:

vercel

When the project is ready for production, run:

vercel --prod

Add the environment variables in Vercel → Project → Settings → Environment Variables. Copy the values from your local .env.local file, then change these two values to your actual production domain:

AUTH_URL="https://your-domain.com"
NEXT_PUBLIC_APP_URL="https://your-domain.com"

Return to Google Cloud Console and add this production redirect address: https://your-domain.com/api/auth/callback/google.

The most common thing that breaks here: the redirect URI has to match your production URL exactly — same protocol, same domain, no trailing slash difference. A mismatch here is the single most common reason Google sign-in works locally but fails after deploying.

Redeploy after changing environment variables with vercel --prod again.

Always test the live website after deployment. A local environment and a production environment use separate settings, so Google sign-in, the database, and Cal.com must all be checked again.


Important Items to Confirm

The supplied product description mentions ChatGPT and Claude, Stripe payments, and a mobile app. The supplied README documents the Anthropic chat key, Cal.com bookings, and the setup process, but does not provide separate Stripe environment variables or Stripe setup instructions.

Before publishing this guide as final customer documentation, confirm whether the chat widget supports Claude only or both ChatGPT and Claude.

Confirm whether Stripe is already configured in the downloaded version, and which Stripe variables must be added.

Confirm whether payment testing uses Stripe test mode, and whether the PWA files are already included.

Confirm whether mobile app store publishing is included or requires additional development.

Confirm whether the site contains five, eight, or ten SEO pages, since the supplied marketing copy uses different figures.

The README also says the PWA requires a manifest.json and service worker to become installable. Treat the mobile app feature as an extension unless those files are already present in the downloaded project.

Support

Codeco.tech includes setup guides, "Unstuck" videos, and lifetime support with the product.

For help: website codeco.tech, book a support call at cal.codeco.tech/admin/unstuck, or contact Codeco.tech on WhatsApp.

The complete setup is simple: configure the private settings, install the project, create the database tables, sign in once, promote the account to admin, connect Cal.com, and test every page. After that, the platform is ready to customise for the business.

Ready to build yours?

Book a DemoShow Me How It Works

Free 30-min session

Reply in under 1 min