Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ALEJ4NDRO2025/urban-store/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you from a fresh clone to a fully working Urban Store instance running on your local machine. You will start three Docker services — frontend, backend, and MongoDB — configure the required environment variables, register an admin user, add your first product, and run a test purchase end-to-end. The whole process takes under ten minutes once your prerequisites are in place.

​
Prerequisites

Before you begin, make sure you have the following installed and available:
RequirementPurposeNotes
Docker + Docker ComposeRuns all three servicesDocker Desktop ships Compose on macOS and Windows
GitClone the repositoryAny recent version
MongoDB Atlas accountCloud databaseFree tier (M0) is sufficient for development
Stripe accountPayment processingUse test mode keys for local development
Cloudinary accountProduct image hostingFree tier covers development workloads
Gmail app passwordTransactional emailCreate one at myaccount.google.com → Security → App passwords
The first docker-compose up --build downloads base images and installs all Python and Node dependencies inside the containers. Depending on your internet connection, this initial build takes 3–5 minutes. Subsequent starts (without --build) are nearly instant.

​
Setup Steps

1

Clone the repository

Clone the Urban Store repository and move into the project root:
git clone https://github.com/ALEJ4NDRO2025/urban-store.git
cd urban-store
The repository contains two top-level directories — backend/ and frontend/ — plus the docker-compose.yml file that wires them together.
2

Configure the backend environment

Create a .env file in the backend/ directory. Docker Compose reads it automatically via the env_file directive in docker-compose.yml.
touch backend/.env
Populate it with the following variables:
# Django
SECRET_KEY=your-long-random-secret-key-here

# MongoDB Atlas — full connection string including credentials
MONGODB_URI=mongodb+srv://<user>:<password>@<cluster>.mongodb.net/urbanstore?retryWrites=true&w=majority

# Cloudinary
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# Gmail SMTP
EMAIL_HOST_USER=your-gmail-address@gmail.com
EMAIL_HOST_PASSWORD=your-16-character-app-password

# Stripe
STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...
Never commit backend/.env to version control. It is listed in .gitignore by default. Rotate your SECRET_KEY and Stripe keys immediately if they are ever exposed.
3

Configure the frontend environment

Create .env.local in the frontend/ directory:
touch frontend/.env.local
Add the following two variables:
# Points the Next.js app at the Django API
NEXT_PUBLIC_API_URL=http://localhost:8000

# Must match STRIPE_PUBLISHABLE_KEY in backend/.env
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
NEXT_PUBLIC_ prefixed variables are inlined into the browser bundle at build time by Next.js, so they must be set before running docker-compose up --build.
4

Build and start all services

From the project root, build the images and start all three containers:
docker-compose up --build
Docker Compose starts the services in dependency order: MongoDB first, then the Django backend (which connects to MongoDB on startup), then the Next.js frontend. All three containers stream their logs to the same terminal session.
Run in the background and follow logs selectively:
docker-compose up --build -d
docker-compose logs -f backend   # stream backend logs only
docker-compose logs -f frontend  # stream frontend logs only
5

Verify the services are running

Once the build completes, confirm both the frontend and the backend API are reachable:
ServiceURLExpected response
Frontendhttp://localhost:3000Urban Store home page
Backend APIhttp://localhost:8000/api/JSON response or 404 from DRF
Django Adminhttp://localhost:8000/admin/Django admin login page
If the frontend shows a network error, wait a few more seconds — Next.js compilation can take an extra 15–20 seconds on the very first cold start.
6

Register a user and verify your email

Open http://localhost:3000/register in your browser and fill in the registration form. Urban Store sends a 6-digit verification code to the email address you provide via Gmail SMTP.After submitting the form you will be redirected to /verify-email. Enter the code from your inbox to activate the account.
Check your spam folder if the verification email does not arrive within a minute. Gmail may flag the first email sent from a new app password.
7

Promote your user to admin

By default, every registered user has is_admin: false. To access the admin dashboard at /admin, promote your user directly in MongoDB using mongosh or the Atlas web UI:
// Run this in mongosh connected to your Atlas cluster,
// or in the Atlas Data Explorer query console
db.users.updateOne(
  { email: "your-email@example.com" },
  { $set: { is_admin: true } }
)
After updating the document, log out and log back in so that a fresh JWT is issued with is_admin: true in its payload. The Next.js middleware reads the is_admin claim from the token to grant or deny access to /admin.
8

Add your first product via the admin panel

With admin access, navigate to http://localhost:3000/admin and open the product management section. Fill in the product name, description, price, available sizes and colors, and upload an image (it will be stored in Cloudinary automatically). Save the product and it will immediately appear in the catalog at http://localhost:3000/catalog.

​
Test a Purchase

With a product in the catalog, you can run through the full checkout flow using Stripe’s test card.
Use Stripe test card 4242 4242 4242 4242 with any future expiry date, any 3-digit CVC, and any 5-digit ZIP. This card always succeeds in test mode and triggers the full payment confirmation flow, updating the order status to paid in MongoDB.
  1. Open the catalog, add a product to the cart, and proceed to checkout.
  2. Enter a shipping address and continue to the payment page.
  3. Enter the test card details and confirm the payment.
  4. You will be redirected to the order confirmation page and receive a confirmation email.

Build docs developers (and LLMs) love

Get started for freeTalk to us