Skip to content

caballerorandy6/rcweb

BranchesTags

Repository files navigation

RC Web Solutions

Professional web development services platform with integrated marketing automation, payment processing, and customer management.

Next.js TypeScript React Prisma PostgreSQL Tailwind CSS

Table of Contents

About

RC Web Solutions is a comprehensive full-stack web application designed for professional web development services. Built by Randy Caballero, a full-stack web developer with 5+ years of experience, this platform serves as the complete business management solution for delivering exceptional digital experiences to clients worldwide.

Mission

Crafting exceptional digital experiences with modern web technologies. Specializing in creating high-performance, scalable web applications that drive business growth and deliver measurable results.

What We Offer

As a freelance developer based in Houston, TX, RC Web Solutions provides:

  • Full-Stack Web Applications with modern frameworks (Next.js, React, TypeScript)
  • High-Converting Landing Pages optimized for performance (95+ Lighthouse Score)
  • Custom Management Systems with automation and reporting capabilities
  • Digital Consulting for web strategy, SEO, and performance optimization

Why This Platform

This application serves as the central hub for managing client relationships, automating marketing campaigns, processing payments securely, generating invoices, and streamlining business operations. It combines powerful integrations (Stripe, Twilio, Resend, OpenAI) with a clean, maintainable codebase that demonstrates enterprise-level architecture and best practices.

Features

💳 Payment Processing & Invoicing

  • Stripe integration with 50/50 split payment model
  • Automatic invoice generation with PDF attachments
  • Invoice storage on Vercel Blob
  • Email delivery with Resend
  • Payment tracking and history
  • Webhook-based payment confirmation

📧 Marketing Automation

  • SMS campaigns with Twilio integration
  • Email newsletters with Resend
  • Automated opt-in/opt-out management
  • A2P 10DLC compliance
  • Marketing consent tracking (GDPR compliant)
  • Batch campaign sending with progress tracking

👥 Customer Management (CRM)

  • Complete contact database with CRUD operations
  • Phone number management (multiple per contact)
  • Lead source attribution
  • Marketing consent tracking
  • Interaction logging (SMS, Email)
  • Contact filtering and search

🔐 Authentication & Authorization

  • NextAuth v5 implementation
  • Role-based access control (ADMIN role)
  • Secure admin panel with middleware protection
  • Session management

📊 Admin Dashboard

  • Real-time statistics (contacts, emails sent, SMS sent)
  • Project management (create, update status, mark complete)
  • Campaign creation and monitoring
  • Invoice management
  • Contact management interface

📝 Content Management

  • Markdown-based blog system
  • Dynamic sitemap generation
  • SEO optimization (JSON-LD structured data)
  • Legal pages (Privacy Policy, Terms of Service, Refund Policy)

🎨 Modern UI/UX

  • Fully responsive design (mobile-first)
  • Smooth animations with Framer Motion
  • Loading states with skeleton screens
  • Toast notifications
  • Cookie consent management
  • AI-powered chat assistant (OpenAI)

📞 Communication Features

  • Twilio Voice integration (IVR system)
  • Incoming SMS webhook handler
  • Automated responses (START/STOP commands)
  • Email templates with React Email

Tech Stack

Frontend

  • Framework: Next.js 15.5 (App Router, React Server Components)
  • UI Library: React 19.2
  • Styling: Tailwind CSS 3.4
  • Animations: Framer Motion 11.15
  • Components: Headless UI, Hero Icons
  • Forms: React Hook Form
  • State: Zustand 5.0

Backend

  • Runtime: Node.js 18+
  • Database: PostgreSQL with Prisma ORM 6.15
  • Authentication: NextAuth v5 (Auth.js)
  • Validation: Zod 3.25
  • File Storage: Vercel Blob

Integrations

  • SMS: Twilio (Messaging Service + Voice)
  • Email: Resend + React Email
  • Payments: Stripe
  • AI: OpenAI API (GPT-4)
  • Storage: Vercel Blob (Invoice PDFs)

DevOps & Tools

  • Language: TypeScript 5.9
  • Linting: ESLint (Next.js config)
  • Package Manager: npm
  • Version Control: Git
  • Deployment: Vercel

Getting Started

Prerequisites

  • Node.js 18.x or higher
  • PostgreSQL database (local or cloud)
  • npm package manager
  • Twilio account (for SMS/Voice features)
  • Stripe account (for payment processing)
  • Resend account (for transactional emails)
  • OpenAI API key (for AI chat feature)
  • Vercel account (for Blob storage and deployment)

Installation

  1. Clone the repository:
git clone https://github.com/caballerorandy6/rcweb.git
cd rcweb
  1. Install dependencies:
npm install
  1. Set up environment variables:
cp .env.example .env.local
# Edit .env.local with your actual credentials
  1. Set up the database:
# Generate Prisma client
npx prisma generate

# Push schema to database
npx prisma db push

# (Optional) Open Prisma Studio to view database
npx prisma studio
  1. Run the development server:
npm run dev

Open http://localhost:3000 to see the application.

Environment Variables

Create a .env.local file in the root directory. See .env.example for a complete list of required variables.

Required variables:

  • DATABASE_URL - PostgreSQL connection string
  • AUTH_SECRET - NextAuth secret key
  • STRIPE_SECRET_KEY - Stripe API key
  • RESEND_API_KEY - Resend API key
  • TWILIO_ACCOUNT_SID - Twilio account SID
  • BLOB_READ_WRITE_TOKEN - Vercel Blob token

See .env.example for detailed documentation of all environment variables.

Database Setup

The application uses Prisma ORM with PostgreSQL. The schema includes:

  • User - Admin users with authentication
  • Contact - Customer contact information
  • ContactPhone - Phone numbers for contacts
  • Payment - Payment records with project tracking
  • Invoice - Generated invoices with PDF links
  • NewsletterLog - Email campaign tracking
  • SmsLog - SMS interaction logging

Database commands:

# Generate Prisma Client
npx prisma generate

# Push schema changes
npx prisma db push

# Open Prisma Studio (database GUI)
npx prisma studio

# Reset database (⚠️ deletes all data)
npx prisma db push --force-reset

Development

Running the Application

# Development mode (with hot reload)
npm run dev

# Production build
npm run build

# Start production server
npm run start

Email Template Development

Preview and develop email templates:

npm run email

This starts a development server on port 3001 for previewing email templates.

Development Tools

# Open Prisma Studio (database GUI)
npx prisma studio

# Type checking
npx tsc --noEmit

# Linting
npm run lint

Project Structure

rcweb/
├── prisma/
│   └── schema.prisma           # Database schema
├── public/                     # Static assets
│   ├── blog/                  # Blog post markdown files
│   └── fonts/                 # Custom fonts
├── src/
│   ├── actions/               # Server Actions (organized by feature)
│   │   ├── admin/            # Admin-specific actions
│   │   ├── auth/             # Authentication actions
│   │   ├── campaigns/        # Email/SMS campaign actions
│   │   ├── contacts/         # Contact management actions
│   │   ├── payments/         # Payment processing actions
│   │   ├── projects/         # Project management actions
│   │   └── stats/            # Statistics actions
│   ├── app/                  # Next.js App Router
│   │   ├── (admin)/         # Admin panel routes
│   │   ├── api/             # API routes (webhooks)
│   │   ├── blog/            # Blog pages
│   │   └── components/      # React components (organized)
│   │       ├── admin/       # Admin panel components
│   │       ├── Blog/        # Blog components
│   │       ├── forms/       # Form components
│   │       ├── icons/       # Icon components
│   │       ├── layout/      # Layout components
│   │       ├── payment/     # Payment components
│   │       ├── Sections/    # Landing page sections
│   │       ├── seo/         # SEO components (JSON-LD)
│   │       ├── skeletons/   # Loading skeletons
│   │       ├── tracking/    # Analytics components
│   │       └── ui/          # Reusable UI components
│   ├── emails/              # Email templates (React Email)
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utility libraries
│   │   ├── invoice/        # Invoice generation system
│   │   ├── auth.ts         # NextAuth configuration
│   │   ├── blob.ts         # Vercel Blob utilities
│   │   ├── blog.ts         # Blog utilities
│   │   ├── data.ts         # Static data (navigation, pricing, etc.)
│   │   └── prisma.ts       # Prisma client singleton
│   ├── store/              # Zustand state management
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
├── .env.example            # Environment variables template
├── .env.local             # Local environment variables (gitignored)
├── CHANGELOG.md           # Version history
├── CONTRIBUTING.md        # Contribution guidelines
├── next.config.ts         # Next.js configuration
├── tailwind.config.ts     # Tailwind CSS configuration
└── tsconfig.json          # TypeScript configuration

Documentation

API Routes & Webhooks

Public API Routes

Route Method Description
/api/auth/[...nextauth] * NextAuth authentication endpoints
/api/chat POST OpenAI chat endpoint (Edge runtime)
/api/invoice/[invoiceNumber] GET Download invoice PDF by number
/api/twilio/sms/incoming POST Handle incoming SMS messages
/api/twilio/voice POST Handle incoming voice calls (IVR)
/api/twilio/voice/completed POST Handle completed voice calls
/api/webhooks/stripe POST Stripe payment webhook
/api/receive-mail POST Incoming email webhook

Webhook Configuration

Stripe Webhook:

  • URL: https://rcweb.dev/api/webhooks/stripe
  • Events: checkout.session.completed

Twilio SMS Webhook:

  • URL: https://rcweb.dev/api/twilio/sms/incoming
  • Method: POST

Twilio Voice Webhook:

  • URL: https://rcweb.dev/api/twilio/voice
  • Method: POST

Scripts

# Development
npm run dev              # Start development server
npm run build            # Build for production
npm run start            # Start production server

# Database
npx prisma generate      # Generate Prisma Client
npx prisma db push       # Push schema to database
npx prisma studio        # Open Prisma Studio GUI

# Email Development
npm run email            # Start email template preview server

# Linting & Type Checking
npm run lint             # Run ESLint
npx tsc --noEmit        # Type check without emitting files

Deployment

Vercel (Recommended)

  1. Push code to GitHub
  2. Import project in Vercel
  3. Configure environment variables (see .env.example)
  4. Deploy

Pre-deployment Checklist

  • Set all environment variables in Vercel
  • Configure PostgreSQL database (Vercel Postgres or external)
  • Set up Vercel Blob storage
  • Configure Stripe webhook URL
  • Configure Twilio webhook URLs (SMS and Voice)
  • Update NEXTAUTH_URL to production domain
  • Test payment flows in Stripe test mode
  • Test SMS opt-in/opt-out functionality
  • Verify all integrations work in production
  • Enable HTTPS (automatic with Vercel)
  • Configure custom domain (optional)

Other Platforms

The application can be deployed to any platform supporting Next.js:

  • AWS (Amplify, ECS)
  • Google Cloud Platform
  • Azure
  • Railway
  • Render
  • Self-hosted with Docker

About This Project

This is a private, proprietary project developed and maintained by Randy Caballero for freelance web development services. It serves as both a business management platform and a portfolio showcase.

License

This project is private and proprietary. All rights reserved © 2025 Randy Caballero / RC Web Solutions.

Contact

Get in Touch

Have a project in mind? Let's build something amazing together!

Randy Caballero Full-Stack Web Developer Houston, TX

Business Hours

  • Monday - Friday: 9:00 AM - 6:00 PM CST
  • Weekend: By appointment only
  • Worldwide remote work available

Services & Pricing

Visit rcweb.dev to learn more about:

  • Service packages (Basic, Professional, Premium)
  • Portfolio and case studies
  • Client testimonials
  • Free consultation booking

RC Web Solutions - Crafting Exceptional Digital Experiences

Built with Next.js 15.5, React 19.2, TypeScript 5.9, PostgreSQL, Prisma, Tailwind CSS, NextAuth, Stripe, Twilio, Resend, OpenAI, and Vercel Blob

About

An enterprise-grade SaaS platform built with Next.js 15, React 19, TypeScript, and PostgreSQL. Integrates Twilio for SMS campaigns, Resend for email automation, and Stripe for payments. Includes NextAuth v5 authentication, Prisma ORM, Zustand state management, and a comprehensive admin dashboard for client and project management.

rcweb.dev

Topics

react javascript typescript nextjs postgresql tailwindcss zustand vercel-deployment zod-validation zustand-state-management

Resources

Readme
Activity

Stars

3 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages