Project Recovery & Infrastructure Upgrade Log: Jan 2026

Project Overview

Application: Ben's Bikes (Full-Stack Portfolio) Stack: React (Frontend), Ruby on Rails (Backend API), PostgreSQL (Database) Hosting: Vercel (Frontend), Heroku (Backend)

1. Database Infrastructure Recovery

The project was suffering from a legacy database version (Postgres 12) and a broken migration history that prevented deployment to modern environments.

Key Actions:

  • Major Version Upgrade: Successfully migrated the backend to PostgreSQL 16.10.
  • Gemfile Optimization: Resolved platform-specific dependency issues with the pg gem to ensure compatibility with Apple Silicon (local) and Linux (Heroku).
  • Schema Restoration: Fixed a critical "UndefinedTable" error where the users table was missing from the migration history.
    • Solution: Utilized rails db:schema:load to build the database structure directly from the verified schema.rb blueprint rather than relying on an incomplete migration timeline.

2. System Integration & Security (CORS)

The frontend and backend were unable to communicate due to a strict Cross-Origin Resource Sharing (CORS) policy and an outdated cors.rb configuration.

Key Actions:

  • Initializer Activation: Re-wrote the config/initializers/cors.rb file (which was previously inactive/commented out).
  • Whitelisting: Explicitly authorized the production Vercel domain and local development ports.
  • Handshake Security: Enabled credentials: true to allow for secure session handling and auto_login functionality.

3. Frontend Dependency & Build Optimization

The React application was failing to compile on Vercel due to a "Dependency War" between legacy packages (React 16/17) and modern Node/NPM strictness.

Key Actions:

  • Conflict Resolution: Implemented --legacy-peer-deps in the Vercel build settings to bypass version mismatches in the react-image-carousel library.
  • Missing Sub-dependencies: Identified and manually installed react-is and @babel/plugin-proposal-private-property-in-object to satisfy strict react-scripts 5 build requirements.
  • CLI Deployment: Leveraged the Vercel CLI (vercel --prod) to force a clean production build when the dashboard encountered branch-tracking sync issues.

4. Environment Management

Moved from hardcoded API endpoints to a more secure, flexible environment-variable-based architecture.

Key Actions:

  • Refactor: Replaced hardcoded localhost strings in App.js with process.env.REACT_APP_URL.
  • Decoupling: Configured separate environment variables for local development (.env) and production (Vercel Dashboard), allowing for seamless deployment without manual code changes.

Final Status: 100% Operational

  • Backend: Upgraded and responding to queries.
  • Frontend: Building successfully and fetching data.
  • Database: Fully populated and structured correctly.