# Project Setup

Canonical: https://docs.projectbabbage.com/docs/quickstarts/metamarket/project-setup

Scaffold your frontend, backend overlay, and key server using the full-stack template.

This page shows you how to scaffold the three core services for your Metanet Marketplace—**frontend**, **backend overlay**, and **key server**—using the full-stack template and a minimal Express/TypeScript setup.

---

## 1. Clone the full-stack template

```bash
git clone https://github.com/p2ppsr/full-stack-project-template.git my-marketplace
cd my-marketplace
npm install
```

This gives you a working **frontend/** and **backend/** already wired for LARS and CARS. Refer to the [LARS and CARS Quickstarts](https://docs.projectbabbage.com/docs/quickstarts/lars-cars-frontend-project) for an in-depth look at how these systems are set up from scratch.

---

## 2. Scaffold the key server

For this project, you will need to set up a separate server to store the encryption keys and to facilitate the payment and retrieval of the files. For now, just set up a bare minimum express server and the general structure that we will build upon in later steps:

```bash
# from repo root
mkdir key-server && cd key-server

npm init -y
npm install express
npm install --save-dev typescript ts-node-dev @types/node @types/express
```

**key-server/tsconfig.json**

```json
{
  "compilerOptions": {
    "lib": [
      "dom",
      "ESNext"
    ],
    "module": "NodeNext",
    "target": "esnext",
    "moduleResolution": "NodeNext",
    "moduleDetection": "force",
    "rootDir": "./",
    "baseUrl": "./",
    "outDir": "./dist",
    "strict": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "downlevelIteration": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types", "src/types"]
  },
  "include": [
    "src",
    "src/types.d.ts",
    "jest.config.js",
    "tsconfig.json",
    "jest.config.js",
    "tsconfig.json",
    "src/types/authrite-express.d.ts"
  ],
  "exclude": [
    "dist",
    "*/**/__tests__"
  ]
}
```

**key-server/src/index.ts**

```ts
import express from 'express';
const app = express();
const port = process.env.PORT || 3000;

app.listen(port, () =>
  console.log(`Key Server listening at http://localhost:${port}`)
);
```

**key-server/package.json**

```diff
"scripts": {
+ "start": "ts-node-dev --respawn src/index.ts"
}
```
---

## 3. Verify your directory tree

Your codebase should now resemble:

```text
my-marketplace/
├── backend/
│   ├── src/            ← Overlay backend code
│   └── package.json
├── frontend/
│   ├── src/            ← React + Vite code
│   ├── vite.config.ts
│   └── package.json
├── key-server/
│   ├── src/            ← Express + TS key server
│   │   └── index.ts
│   ├── tsconfig.json
│   └── package.json
├── deployment-info.json
└── package.json        ← root
```

---

## 4. Initial smoke testing

You will want two separate terminals:

One to run the frontend and backend using LARS:

```bash
# from root
npx lars start
```

- Select either `mainnet` or `testnet` as the network (mainnet is recommended).
- Be sure to select **both** the `frontend` and `backend` for the services.


And one to run the key-server:

```bash
cd key-server
npm run start
```

-   **Frontend** → React app at [http://localhost:5173](http://localhost:5173/)
-   **Backend overlay** → Overlay engine logs in the terminal
-   **Key Server** → “Key Server listening” message

If everything starts without errors, you’re ready for the next step: wiring up your Upload Files page, Topic Manager, Lookup Service, and Key Server routes.