Debuta Quickstart: Run the Full Stack in Under 10 Minutes

This guide walks you through cloning the repository, wiring up every required service, and sending your first authenticated API request — all in under 10 minutes. By the end you will have the Express server running on port 3000 and the Expo development server ready to connect from a physical device or simulator.

Prerequisites

Install and configure the following before proceeding:

Requirement	Minimum version / notes
Node.js	18 or later — nodejs.org
npm	Bundled with Node.js
MongoDB	MongoDB Atlas free cluster or a local `mongod` instance
Expo CLI	Install globally: `npm install -g expo-cli`
Cloudinary account	cloudinary.com — free tier is sufficient for development
Gmail app password	Required for password-reset emails. Generate one under Google Account → Security → App passwords

You do not need an Apple Developer account or Android Studio to run the app on a physical device during development — Expo Go handles that for you. However, WebRTC-based video and audio calls require a development build (see the note at the end of this guide).

Clone the Repository

git clone https://github.com/desarrolladorandres2026-gif/Native-tailwind.git
cd Native-tailwind

After cloning, the directory looks like this:

Native-tailwind/
├── mobile/
│   └── debuta/          # Expo / React Native app
├── backend/             # Express + Socket.io server
├── admin/               # Vanilla-JS admin web panel (static files)
└── .gitignore

The mobile/debuta/, backend/, and admin/ directories are independent — each has its own dependencies. The backend is the only component that needs to be running for both the mobile app and the admin panel to work.

Configure the Backend

Copy the example environment file and open it in your editor:

cd backend
cp .env.example .env

Fill in every variable. The table below describes each one:

Variable	Description
`PORT`	Port the Express server listens on. Defaults to `3000`.
`NODE_ENV`	Set to `development` locally; `production` for deployments. CORS is open in development.
`MONGO_URI`	MongoDB Atlas connection string in the format `mongodb+srv://<user>:<pass>@<cluster>.mongodb.net/<db>?retryWrites=true&w=majority`
`JWT_SECRET`	Long, random secret used to sign all JWTs. Use at least 32 characters.
`JWT_EXPIRES_IN`	Token lifetime — e.g. `7d`, `24h`.
`ALLOWED_ORIGINS`	Comma-separated list of allowed CORS origins for `production` mode (e.g. `https://your-admin.com,https://your-web.com`). Not enforced in development.
`CLOUDINARY_CLOUD_NAME`	Your Cloudinary cloud name, found on the Cloudinary dashboard.
`CLOUDINARY_API_KEY`	Cloudinary API key.
`CLOUDINARY_API_SECRET`	Cloudinary API secret. Keep this private.
`EMAIL_USER`	Gmail address used to send password-reset emails (e.g. `you@gmail.com`).
`EMAIL_PASS`	Gmail app password — not your normal Gmail password.
`ADMIN_EMAIL`	Email address seeded as the initial admin user.
`ADMIN_USERNAME`	Username seeded for the initial admin user.
`GOOGLE_CLIENT_ID`	OAuth 2.0 client ID from the Google Cloud Console, used for Google sign-in.
`FACEBOOK_APP_ID`	Facebook App ID from the Meta Developer Portal.
`FACEBOOK_APP_SECRET`	Facebook App Secret. Keep this private.
`ATLAS_PUBLIC_KEY`	(Optional) MongoDB Atlas API public key — only required if you use the auto-IP-whitelist script.
`ATLAS_PRIVATE_KEY`	(Optional) MongoDB Atlas API private key.
`ATLAS_PROJECT_ID`	(Optional) MongoDB Atlas project ID.

Never commit your .env file to version control. The repository’s .gitignore already excludes it, but double-check before pushing.

A minimal .env for local development looks like this:

PORT=3000
NODE_ENV=development
MONGO_URI=mongodb+srv://myuser:mypassword@cluster0.example.mongodb.net/debuta?retryWrites=true&w=majority
JWT_SECRET=replace_with_a_long_random_string_here
JWT_EXPIRES_IN=7d
CLOUDINARY_CLOUD_NAME=my_cloud
CLOUDINARY_API_KEY=123456789012345
CLOUDINARY_API_SECRET=AbCdEfGhIjKlMnOpQrStUvWxYz
EMAIL_USER=you@gmail.com
EMAIL_PASS=abcd efgh ijkl mnop
ADMIN_EMAIL=admin@debuta.com
ADMIN_USERNAME=admin
GOOGLE_CLIENT_ID=1234567890-abc.apps.googleusercontent.com
FACEBOOK_APP_ID=1234567890
FACEBOOK_APP_SECRET=abc123def456

Start the Backend

From the backend/ directory, install dependencies and start the development server:

npm install
npm run dev

npm run dev runs nodemon server.js, which:

Connects to MongoDB using the MONGO_URI you set.
Starts Express on the port defined by PORT (default 3000).
Attaches the Socket.io server to the same HTTP server instance — no separate port is needed.
Serves the admin panel as static files at the /admin path.
Runs the optional Atlas IP-whitelist script (predev hook) if Atlas API keys are set.

You should see output similar to:

🚀 Servidor en http://localhost:3000
📦 MongoDB conectado

Verify the server is healthy:

curl http://localhost:3000/health
# {"status":"ok","timestamp":"2025-01-01T00:00:00.000Z"}

Now send a test login request (replace with credentials you registered via the app or a seeded user):

curl -X POST http://localhost:3000/api/login \
  -H 'Content-Type: application/json' \
  -d '{"correo": "user@example.com", "password": "yourpassword"}'

A successful response returns a JWT and the user object:

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "usuario": {
    "_id": "664a1b2c3d4e5f6a7b8c9d0e",
    "first_name": "Ana",
    "username": "ana92",
    "correo": "user@example.com",
    "rol": "user",
    "activo": true
  }
}

Store the access_token value — every subsequent request must include it as Authorization: Bearer <token>.

Launch the Mobile App

Open a new terminal, navigate to the mobile project, install dependencies, and start the Metro bundler:

cd mobile/debuta
npm install
npx expo start

Expo will print a QR code. Scan it with:

iOS — the Camera app (redirects to Expo Go automatically).
Android — the Expo Go app from the Play Store.

API URL auto-detection in developmentYou do not need to hardcode your machine’s IP address. The components/services/api.ts client reads the host Metro is serving from at runtime:

const host =
  Constants.expoConfig?.hostUri?.split(':')[0] ||
  (Constants.manifest as any)?.debuggerHost?.split(':')[0];

if (host) return `http://${host}:3000/api`;
return 'http://localhost:3000/api';

This means the mobile app will automatically reach your local backend as long as your phone and dev machine are on the same Wi-Fi network and port 3000 is not firewalled.API URL override for production or tunnelsSet the EXPO_PUBLIC_API_URL environment variable before starting Expo to point the app at any remote server or local tunnel:

EXPO_PUBLIC_API_URL=https://your-server.com npx expo start

When this variable is set, the client uses EXPO_PUBLIC_API_URL + '/api' and ignores the Metro host detection entirely.

Expo Go vs. Development BuildExpo Go is the fastest way to start iterating, but it does not include all native modules. Specifically:

WebRTC (video/audio calls) requires react-native-webrtc, which needs a development build (expo-dev-client is already in package.json).
expo-secure-store and other native modules also require a dev build for full functionality on some platforms.

To create a development build, run:

npx expo run:android   # or
npx expo run:ios

This compiles the native code on your machine and installs a custom Expo client that includes every module in package.json.

Get Started

Mobile App

Backend

Admin Panel

Deployment

Debuta Quickstart: Run the Full Stack in Under 10 Minutes

Build docs developers (and LLMs) love

Get Started

Mobile App

Backend

Admin Panel

Deployment

Documentation Index

Build docs developers (and LLMs) love