Home

Development Environment Setup Guide

This guide will help you set up your development environment for the MenuQR project. Please follow these instructions carefully to ensure a smooth setup process.

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js 18.x or later
• npm, yarn, or pnpm
• Git
• A text editor (VS Code recommended)

Initial Setup

1. Clone the Repository

git clone https://github.com/dustinwloring1988/menuqr.git
cd menuqr

2. Install Dependencies

Choose one of the following package managers:

# Using npm
npm install

# Using pnpm
pnpm install

# Using yarn
yarn install

3. Environment Configuration

1. Create your local environment file:

   cp .env.example .env.local

2. Configure the following variables in .env.local:

   # Base URLs
   NEXT_PUBLIC_APP_URL=http://menuqr.local:3000
   
   # Database Configuration
   DATABASE_URL=your_database_url_here
   
   # Authentication
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
   
   # Storage
   NEXT_PUBLIC_SUPABASE_STORAGE_URL=your_storage_url
   

4. Local Domain Configuration

To test restaurant-specific subdomains locally, you need to modify your system's hosts file:

Windows

1. Open Notepad as Administrator
2. Navigate to: C:\Windows\System32\drivers\etc\hosts
3. Add the following entries:

   127.0.0.1 menuqr.local
   127.0.0.1 joes-diner.menuqr.local
   127.0.0.1 pizza-place.menuqr.local
   127.0.0.1 cafe-bistro.menuqr.local
   127.0.0.1 downtown-pub.menuqr.local
   127.0.0.1 family-diner.menuqr.local
   

macOS/Linux

1. Open Terminal
2. Edit the hosts file:

   sudo nano /etc/hosts

3. Add the same entries as listed above
4. Save with Ctrl+O, exit with Ctrl+X

Database Setup

1. Set Up Local Database

The project uses Supabase for the database. You can either:

A. Use a local Supabase instance:

# Install Supabase CLI
npm install -g supabase-cli

# Start local Supabase
supabase start

B. Or use a development project on Supabase cloud:

1. Create a new project on Supabase
2. Copy the SQL from SQL.sql file
3. Execute the SQL in Supabase's SQL editor

2. Run Migrations

# Apply all migrations
npm run migrations:up

# Verify migrations
npm run migrations:status

Running the Development Server

1. Start the development server:

   npm run dev
   # or
   pnpm dev
   # or
   yarn dev

2. Access the application:

   • Main application: http://menuqr.local:3000
   • Test restaurants:
     • http://joes-diner.menuqr.local:3000
     • http://pizza-place.menuqr.local:3000

Test Accounts

Use these accounts for testing different subscription tiers:

Business	Email	Password	Tier
Joe's Diner	joe@joes-diner.com	Password123!	Professional
Pizza Place	owner@pizza-place.com	Password123!	Starter
Café Bistro	manager@cafe-bistro.com	Password123!	Professional
Downtown Pub	pub@downtown-pub.com	Password123!	Professional
Family Diner	admin@family-diner.com	Password123!	Enterprise

Development Tools

Recommended VS Code Extensions

• ESLint
• Prettier
• Tailwind CSS IntelliSense
• GitLens
• PostCSS Language Support

VS Code Settings

Create .vscode/settings.json in your project:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

Troubleshooting

Common Issues

1. Subdomain Not Working

   • Verify hosts file entries
   • Clear browser DNS cache
   • Try using incognito mode

2. Database Connection Issues

   • Check DATABASE_URL in .env.local
   • Verify Supabase is running
   • Check network connectivity

3. Build Errors

   • Clear .next directory
   • Delete node_modules and reinstall
   • Verify Node.js version

Getting Help

If you encounter issues:

1. Check existing GitHub issues
2. Join our Discord community
3. Email support@menuqr.com

Additional Resources

• Next.js Documentation
• Supabase Documentation
• Tailwind CSS Documentation
• shadcn/ui Documentation

Contributing

Please read our Contributing Guidelines before submitting changes.

Development Workflow

1. Create a feature branch
2. Make your changes
3. Run tests: npm run test
4. Run linting: npm run lint
5. Submit a pull request

Remember to keep your development environment updated:

git pull origin main
npm install