Carlos Eduardo Gatti Ferreira

carlosgatti.com — Frontend Monorepo

A modern, full-stack frontend monorepo powering multiple products and domains, including a personal portfolio website, community marketplaces, and inventory management systems.

Documentation hub: /docs/README.md

🌟 What This Is

This repository contains the frontend code for several interconnected applications:

Personal Website — Portfolio, blog, and professional showcase
Discart-me — Community marketplace for condominium residents
QRACK — QR-code based container and inventory management system
BoxHub — Smart retail infrastructure (preview/marketing pages)

All applications share infrastructure, design systems, and code while maintaining clear boundaries and independent deployment capabilities.

🎯 Who This Is For

Developers — Looking to understand, contribute to, or extend the codebase
Recruiters & Stakeholders — Wanting a high-level overview of technical capabilities
Collaborators — Needing clear guidelines and patterns to work effectively

🏗️ Architecture Overview

This is a monorepo — all code lives in one repository, but is organized into distinct applications and shared packages:

├── app/              # Next.js App Router routes (Discart-me, QRACK)
├── pages/            # Next.js Pages Router (Personal website)
├── src/              # Shared source code (components, utilities, features)
├── components/       # Root-level shared components
├── docs/             # Documentation (architecture, decisions, guides)
└── public/           # Static assets

Key Benefits:

Code reuse across products (auth, UI components, utilities)
Consistent design system and user experience
Simplified dependency management
Single deployment pipeline
Shared TypeScript types and interfaces

📦 Products & Applications

Personal Website

Location: /pages, root routes
Purpose: Professional portfolio, blog, and project showcase
Tech: Next.js Pages Router, MDX for blog posts

The main website at carlosgatti.com showcasing:

Professional experience and projects
Technical blog posts
Photography portfolio
Career information

Discart-me

Location: /app/discart-me
Purpose: Community marketplace for condo residents to buy/sell items
Tech: Next.js App Router, Context-based auth, REST API
Status: Production

A marketplace where residents can:

List items for sale or donation
Browse and filter listings
Contact sellers directly
Manage their listings

QRACK

Location: /app/qrack
Purpose: Mobile-first container and inventory management using QR codes
Tech: Next.js App Router, GraphQL API, QR code generation
Status: Active Development

Features:

Create and manage storage containers
Generate QR codes for containers
Scan QR codes with mobile camera
Track items across containers

BoxHub

Location: Marketing pages, components
Purpose: Smart retail infrastructure (preview/investor pages)
Status: Preview/Marketing

🚀 Quick Start

Prerequisites

Node.js >= 18
npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd carlosgatti.com

# Install dependencies
npm install

# Start development server
npm run dev

# Server runs on http://localhost:3001

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_DISCARD_API_URL=http://localhost:3000
NEXT_PUBLIC_GRAPHQL_API_URL=http://localhost:3000/graphql

See individual app READMEs for specific requirements.

📚 Documentation

Project documentation, architecture decisions, refactor plans, and analysis reports are available here:

👉 View All Documentation

Quick Links

Getting Started

Documentation Index — Complete documentation catalog
Getting Started Guide — Quick start for new contributors

Core Documentation

Architecture — System design and patterns
Monorepo Structure — Codebase organization
Tech Stack — Technologies and rationale
Conventions — Coding standards and practices
Decisions — Architectural decision records (ADRs)

Architecture Decisions

ADR Index — All architectural decision records
ADR-001: Frontend Foundation — Shared infrastructure

Refactors & Analysis

Image Upload Audit — Image processing analysis
Refactoring Documentation — Documented refactors

Applications

Discart-me — Marketplace application
QRACK — Inventory management system

All documentation lives in Markdown (.md) files, serving as the single source of truth.

🔧 Development

Project Structure

├── app/                    # Next.js App Router
│   ├── discart-me/        # Discart-me application
│   └── qrack/             # QRACK application
├── pages/                  # Next.js Pages Router
│   ├── api/               # API routes
│   └── ...                # Personal website pages
├── src/                    # Shared source code
│   ├── components/        # Shared React components
│   ├── features/          # Feature modules (auth, image processing)
│   ├── lib/               # Utilities and API clients
│   ├── hooks/             # Shared React hooks
│   └── types/             # TypeScript type definitions
├── components/             # Root-level shared components
├── docs/                   # Documentation
└── public/                 # Static assets

Scripts

npm run dev        # Start development server (port 3001)
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint

🎨 Design System

All applications share a consistent design system:

Styling: Tailwind CSS with custom configuration
Components: Reusable UI primitives in /components/ui
Theming: Dark mode by default, consistent color tokens
Typography: System fonts, consistent sizing scale

See UI Base Guidelines for component usage.

🔐 Authentication

Each application has its own authentication context:

Discart-me: DiscartAuthContext (REST-based)
QRACK: QrackAuthProvider (GraphQL-based, shared auth system)
BoxHub: BoxHubAuthContext (GraphQL-based)

See Architecture Documentation for details.

📝 Contributing

Follow the conventions
Document architectural decisions in /docs/decisions
Keep app boundaries clear (don’t couple apps unnecessarily)
Write tests for new features
Update documentation when making changes

🛣️ Roadmap

Migrate personal website to App Router
Consolidate authentication systems
Expand UI component library
Add end-to-end testing
Performance optimizations

📄 License

🙋 Questions?

Check the documentation
Review ADRs for design decisions
See app-specific READMEs for domain details

Built with Next.js, TypeScript, and Tailwind CSS
Maintained by Carlos Gatti