RENOZ Energy Website

A modern, OEM-focused website for RENOZ Energy built with TanStack Start.

Features

Core Stack

• Modern Stack: TanStack Start (React full-stack framework)
• Design System: RENOZ brand colors + authentic brand aesthetic
• CMS Integration: Supabase for products, blog, and form management
• Contact Forms: Integrated with Supabase + email notifications
• Responsive: Mobile-first design with tested breakpoints
• Performance: Optimized for Lighthouse scores 95+

Analytics & Monitoring

• Plausible Analytics: Privacy-focused, no cookie banner needed
• Web Vitals Tracking: Automatic Core Web Vitals monitoring
• Vercel Analytics: Real User Monitoring (optional)
• Error Tracking: Built-in logging for debugging

Security & Performance

• Content Security Policy: Comprehensive CSP headers
• Security Headers: HSTS, X-Frame-Options, CSP, and more
• PWA Support: Service worker for offline fallback
• Image Optimization: WebP format, lazy loading, proper caching
• Code Splitting: Automatic with TanStack Router
• Edge Functions: Server-side form processing

SEO & Discoverability

• Meta Tags: Comprehensive OG and Twitter cards on all pages
• Structured Data: Schema.org Organization markup
• Sitemap: Auto-generated with all routes
• Robots.txt: Configured for optimal crawling
• Fast Loading: < 3s on 3G connections

Developer Experience

• GitHub Actions: Automated lint, build, and type checking
• TypeScript: Full type safety
• Biome: Fast linting and formatting
• Hot Reload: Instant feedback in development
• Dev Tools: TanStack Router and React devtools integrated

Getting Started

Prerequisites

• Node.js 18+ (22.12+ recommended)
• Bun (recommended) or npm - Bun is faster and used in CI
• Supabase account

Installation

1. Install dependencies:

# Using Bun (recommended)
bun install

# Or using npm
npm install

1. Set up environment variables:

# Copy the template to create your .env file
cp env.template .env

Edit .env and add your credentials. See env.template for detailed instructions.

Required Variables:

• VITE_SUPABASE_URL - Your Supabase project URL
• VITE_SUPABASE_ANON_KEY - Your Supabase anonymous key
• SUPABASE_SERVICE_ROLE_KEY - Server-only Supabase key used after Turnstile verification to save form submissions
• VITE_TURNSTILE_SITE_KEY - Cloudflare Turnstile site key (for spam protection)
• TURNSTILE_SECRET_KEY - Cloudflare Turnstile secret key
• RESEND_API_KEY - Resend API key (for email notifications)

Optional Variables (have defaults):

• CONTACT_FORM_TO_EMAIL - Where contact form submissions go (default: sales@renoz.energy)
• WARRANTY_TO_EMAIL - Where warranty registrations go (default: support@renoz.energy)

1. Set up Supabase database:

   • Create a new Supabase project at https://supabase.com
   • Run the SQL schema from supabase-schema.sql in the SQL Editor
   • Run setup-storage.sql to create the warranty uploads bucket and RLS policies
   • This creates tables: products, posts, inquiries, warranty_registrations

2. Start the development server:

# Using Bun (recommended)
bun run dev

# Or using npm
npm run dev

The site will be available at http://localhost:3000

Project Structure

src/
├── routes/              # File-based routing
│   ├── index.tsx       # Home page
│   ├── about.tsx       # About page
│   ├── contact.tsx     # Contact form
│   ├── homeowners.tsx  # B2C landing page
│   ├── installers.tsx  # B2B installer page
│   ├── admin.tsx       # Development-only CMS scaffold (local dev only)
│   └── products/       # Product category pages
├── components/
│   ├── layout/         # Header, Footer
│   ├── ui/             # Button, Card components
│   └── sections/       # Page sections
├── lib/
│   └── supabase.ts     # Supabase client
└── styles.css          # Global styles + CSS variables

Design System

Colors

• Primary Green: #00B140 (RENOZ brand)
• Cream: #F5F0E8 (section backgrounds)
• Black: #1A1A1A (hero/dark sections)
• White: #FFFFFF (content backgrounds)

Typography

• Font: Inter (Light 300, Regular 400, Medium 500, Bold 700)
• Headlines: Bold, large sizes (40-64px)
• Body: Light/Regular (16-18px), line-height 1.6

Pages

• Home (/): Hero, feature panels, product segments, value props, CTA
• Homeowners (/homeowners): B2C-focused landing page
• Installers (/installers): B2B technical specs and support
• Products (/products): Overview and category pages (Residential, Rural, Commercial)
• About (/about): Company mission and certifications
• Contact (/contact): Contact form with Supabase integration
• Warranty (/warranty): Warranty registration form with file uploads
• Admin (/admin): Development-only CMS scaffold for products and blog posts; unavailable in production

Supabase Setup

The database schema includes:

1. products table: Product catalog with categories
2. posts table: Blog/Resources CMS
3. inquiries table: Contact form submissions
4. warranty_registrations table: Warranty registration submissions

Row Level Security (RLS) is enabled:

• Products: Public read, authenticated write
• Posts: Public read published, authenticated write
• Inquiries: Public insert, authenticated read

Deployment

Quick Deploy to Vercel (Recommended)

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git push -u origin main

2. Import to Vercel

   • Go to vercel.com → New Project
   • Import GitHub repository
   • Framework: Vite
   • Build Command: npm run build
   • Output Directory: .output

3. Add Environment Variables (in Vercel Dashboard)

   VITE_SUPABASE_URL=https://your-project.supabase.co
   VITE_SUPABASE_ANON_KEY=your_key
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   VITE_TURNSTILE_SITE_KEY=your_key
   TURNSTILE_SECRET_KEY=your_key
   RESEND_API_KEY=re_your_key

4. Deploy!

📖 Comprehensive Guide: See DEPLOYMENT.md for full deployment checklist, post-deployment tasks, SEO setup, and troubleshooting.

Pre-Deployment Checklist

Code Quality:

• bun run check passes (lint + format)
• bun run build succeeds
• All forms tested locally

Services Setup:

• Supabase database created & schema deployed
• Cloudflare Turnstile configured
• Resend account setup & domain verified
• All environment variables ready

Content & SEO:

• All images optimized (WebP)
• Meta tags on all pages
• Sitemap up to date
• Legal pages reviewed

Post-Deployment

Day 1:

• Test all forms in production
• Verify email notifications
• Check mobile responsiveness
• Test page load speed

Week 1:

• Enable Vercel Analytics
• Set up Plausible Analytics
• Submit sitemap to Google Search Console
• Monitor Core Web Vitals

Month 1:

• Review analytics data
• Check form submissions in Supabase
• Monitor error logs
• Update content as needed

Development

• Format: npm run format (Biome)
• Lint: npm run lint (Biome)
• Build: npm run build
• Preview: npm run preview

Brand Assets

• Logo: RENOZ ENERGY (text-based, green accent on "O")
• Colors: Defined in src/styles.css CSS variables
• Font: Inter (Google Fonts)

Environment Setup Guide

1. Supabase Setup

1. Create account at https://supabase.com
2. Create new project
3. Go to Settings > API to get URL and anon key
4. Run supabase-schema.sql in SQL Editor
5. Run setup-storage.sql to create warranty uploads bucket

2. Cloudflare Turnstile Setup

1. Sign up at https://dash.cloudflare.com/sign-up/turnstile
2. Add a new site (use your domain or 'localhost' for dev)
3. Copy Site Key → VITE_TURNSTILE_SITE_KEY
4. Copy Secret Key → TURNSTILE_SECRET_KEY

3. Resend Email Setup

1. Sign up at https://resend.com (free: 100 emails/day)
2. Verify your domain (or use resend.dev for testing)
3. Go to API Keys and create a new key
4. Copy the API key (starts with 're_') → RESEND_API_KEY

4. Testing Forms Locally

• Contact Form: Visit /contact and submit a test inquiry
• Warranty Form: Visit /warranty and submit a test registration
• Check Supabase tables for data
• Check email inbox for notifications

Features

Contact Form (/contact)

• Turnstile spam protection
• Email notifications via Resend
• Saves to Supabase inquiries table
• Query parameter support:
  • homeowner / residential → residential inquiries
  • installer / distributor / developer / partner → partnership inquiries
  • commercial / consultation / farm / off-grid → commercial inquiries
  • general → general inquiries

Warranty Registration (/warranty)

• Multi-step form with validation
• File uploads (images/PDFs) to Supabase Storage
• Automated emails to:
  • Support team (full details)
  • Installer (confirmation)
  • Homeowner (confirmation, if applicable)
• Generates unique warranty ID
• Saves to warranty_registrations table

Next Steps

1. ✅ Warranty form design aligned with site aesthetic
2. ✅ Turnstile and Resend integration complete
3. ✅ File upload system working
4. Add authentication before enabling any non-development admin access
5. Implement blog post detail pages
6. Add case study detail pages
7. Performance optimization (image lazy loading, etc.)

License

Private - RENOZ Energy