Skip to main content

​
Quick Start Guide

This guide will help you set up and run the Procurement Calendar application on your local development machine.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 18.x or higher installed on your system
  • A Supabase account (free tier is sufficient for development)
  • Git for cloning the repository
  • A code editor (VS Code recommended)
The application uses Next.js 16.1.6 with React 19, so ensure your Node.js version is compatible.

​
Installation Steps

1

Clone the Repository

Clone the Procurement Calendar repository to your local machine:
git clone https://github.com/AlejandroMartinezG/App_Compras.git
cd App_Compras
This will create a local copy of the project and navigate into the project directory.
2

Install Dependencies

Install all required npm packages:
npm install
This will install all dependencies defined in package.json, including:
  • Next.js framework and React
  • Supabase client libraries
  • UI components (Shadcn UI, Radix UI)
  • FullCalendar for the calendar view
  • TanStack Table for data tables
  • Form libraries (React Hook Form, Zod)
  • Tailwind CSS and styling utilities
The installation may take a few minutes depending on your internet connection.
3

Configure Environment Variables

Create a .env.local file in the project root directory with your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

​
Finding Your Supabase Credentials

  1. Log in to your Supabase Dashboard
  2. Select your project (or create a new one)
  3. Go to Settings → API
  4. Copy the Project URL and anon/public key
Never commit your .env.local file to version control. It contains sensitive credentials that should remain private.

​
Environment Variables Explained

VariablePurpose
NEXT_PUBLIC_SUPABASE_URLYour Supabase project URL endpoint
NEXT_PUBLIC_SUPABASE_ANON_KEYPublic anonymous key for client-side requests
The NEXT_PUBLIC_ prefix makes these variables accessible in browser-side code, which is necessary for Supabase authentication and data fetching.
4

Set Up Supabase Database

Initialize your Supabase database with the required schema:
  1. Open your Supabase project dashboard
  2. Navigate to the SQL Editor
  3. Open the file supabase/schema.sql from your local project
  4. Copy the entire contents
  5. Paste into the Supabase SQL Editor
  6. Click Run to execute the schema
This will create:
  • Catalog tables: proveedores, productos, presentaciones, destinos, estatus, unidades
  • Core tables: profiles, requisiciones, requisiciones_historial
  • Row-Level Security policies for role-based access control
  • Database functions for triggers and helpers
  • Seed data with initial catalog entries
The schema includes sample data for suppliers, products, and status types to help you get started quickly.

​
Verify Database Setup

After running the schema, verify the tables were created:
  1. Go to Table Editor in Supabase
  2. You should see all tables listed
  3. Check that seed data exists in the estatus and unidades tables
5

Run the Development Server

Start the Next.js development server:
npm run dev
The application will start on http://localhost:3000 by default.

​
Available Scripts

From package.json, these npm scripts are available:
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}
  • npm run dev - Start development server with hot reload
  • npm run build - Build production-optimized application
  • npm run start - Run production build locally
  • npm run lint - Check code for linting errors
The development server includes hot module replacement (HMR), so changes to your code will automatically reflect in the browser.
6

Access the Application

Open your browser and navigate to:
http://localhost:3000
You will be redirected to the login page at /login.

​
First-Time Setup

  1. Click “Solicitar Acceso” (Request Access) tab
  2. Fill in the registration form:
    • Full name
    • Email address
    • Password (minimum 6 characters)
    • Confirm password
  3. Submit the form
New accounts are created with consulta (view-only) role by default and require administrator approval before full access is granted.

​
Create an Admin User

For development, you’ll need to manually promote a user to admin:
  1. Create an account through the registration form
  2. Go to Supabase Table Editor → profiles table
  3. Find your user record
  4. Change the rol field from consulta to admin
  5. Log out and log back in
Now you have full administrative access to the system.

​
Verify Installation

After completing the setup, verify everything works:

​
1. Authentication

  • Log in with your credentials
  • Verify you’re redirected to /dashboard/calendar

​
2. Calendar View

  • The calendar should load without errors
  • You should see the current month view

​
3. Navigation

  • Check that sidebar navigation works
  • Access different sections based on your role

​
4. Data Access

  • Navigate to Catálogos (if admin/coordinadora)
  • Verify seed data is visible in the catalog tables

​
Next Steps

Authentication & Roles

Learn about the authentication system and role-based permissions

Project Structure

Understand the codebase organization and key directories

​
Troubleshooting

​
Port Already in Use

If port 3000 is occupied, Next.js will automatically try 3001, 3002, etc. Or specify a custom port: 
PORT=3001 npm run dev

​
Supabase Connection Issues

If you see authentication errors:
  1. Verify your .env.local file has correct credentials
  2. Check that environment variables are properly formatted
  3. Restart the development server after changing .env.local

​
Database Schema Errors

If tables are missing:
  1. Ensure the entire schema.sql file was executed
  2. Check for errors in the Supabase SQL Editor
  3. Drop tables and re-run the schema if needed

​
Module Not Found Errors

If you encounter missing module errors: 
rm -rf node_modules package-lock.json
npm install

​
Development Tools

  • ESLint - Code linting
  • Tailwind CSS IntelliSense - CSS class autocompletion
  • Prettier - Code formatting
  • TypeScript and JavaScript Language Features - Enhanced IntelliSense

​
Browser Developer Tools

Use browser DevTools to:
  • Inspect network requests to Supabase
  • Debug React components
  • Monitor console for errors
  • Test responsive layouts
Install the React Developer Tools browser extension for enhanced debugging capabilities.

​
Production Deployment

For production deployment instructions, refer to the deployment documentation. The application can be deployed to:
  • Vercel (recommended for Next.js)
  • Netlify
  • AWS Amplify
  • Self-hosted Node.js server
You’re now ready to start developing with Procurement Calendar! If you encounter any issues, consult the troubleshooting section or reach out to the development team.

Build docs developers (and LLMs) love

Get started for freeTalk to us