Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/bicyblex/bicyblexStore/llms.txt

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

This guide walks you through getting Bicyblex Store running on your local machine from a clean checkout. By the end of these five steps you will have a working Next.js dev server connected to your own Supabase project, with the public storefront visible at http://localhost:3000 and the admin dashboard accessible via /login.
Prerequisites: Before starting, make sure you have the following installed or set up:
  • Node.js 18 or later — required by Next.js 16
  • A Supabase account — create one free at supabase.com
  • Git — to clone the repository
1

Clone the repository

Clone the Bicyblex Store repository from GitHub and move into the project directory:
git clone https://github.com/bicyblex/bicyblexStore.git && cd bicyblexStore
The project uses the Next.js Pages Router (not the App Router), so the entry points for all pages live in the top-level pages/ directory.
2

Install dependencies

Install all project dependencies using your preferred package manager:
npm install
This will install Next.js 16, React 19, @supabase/supabase-js v2, react-icons v5, and the Tailwind CSS v4 PostCSS plugin among other dependencies listed in package.json.
3

Create environment variables

Create a .env.local file in the project root and add your Supabase project credentials:
.env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
Both values are available in your Supabase project under Project Settings → API:
  • NEXT_PUBLIC_SUPABASE_URL — the URL listed under “Project URL”
  • NEXT_PUBLIC_SUPABASE_ANON_KEY — the anon / public key listed under “Project API keys”
Never commit .env.local to version control. It is already listed in .gitignore. If either variable is missing at runtime, supabaseClient.js will log a console error (⚠️ Error: Faltan las variables de entorno de Supabase en .env.local) and the app will fail to connect to the database.
4

Set up Supabase

Before the storefront or dashboard will display real data, your Supabase project needs the correct tables and a Storage bucket for product images.The required database tables are:
TablePurpose
productsAll product listings (bikes, motos, kits) with specs and image URLs
categoriesProduct categories with their associated dynamic spec field definitions
newsNews items surfaced in the storefront’s newsletter section
For full table schemas, Row Level Security policies, and Storage bucket configuration, see the Supabase Setup guide.
5

Start the dev server

Start the Next.js development server:
npm run dev
Open http://localhost:3000 in your browser — you should see the Bicyblex Store public storefront, including the hero, product sections, and footer.To access the admin dashboard, navigate to http://localhost:3000/login and sign in with the credentials of a user you have created in your Supabase project’s Authentication → Users table.
Bicyblex Store uses a jsconfig.json path alias so that @/ resolves to the project root. This means any import like @/src/components/index/topnav or @/src/lib/supabaseClient will work correctly without relative path traversal, regardless of the file’s location in the tree.

​
Next steps

Supabase Setup

Full instructions for creating tables, configuring RLS policies, and setting up the image Storage bucket.

Dashboard Overview

Learn how to manage products, categories, and news items from the admin dashboard.

Build docs developers (and LLMs) love

Get started for freeTalk to us