CleanLanding Pro

CleanLanding Pro is a React + Vite launch kit with a polished marketing site and optional Flask/PostgreSQL backend for capturing leads. It ships with production-ready sections (hero, demo preview, pricing, testimonials, FAQ, affiliate highlights, metrics, and contact) plus a responsive playground to showcase device-specific mocks.

---

Overview

• Responsive by default – carefully tuned layouts for desktop, tablet, and mobile, including a hero sandbox that scales between mock devices.
• Real-world sections – pricing tiers, testimonials, FAQ accordions, affiliate highlights, performance metrics, and more.
• Live contact flow – React form posts to a Flask API (SQLAlchemy + Postgres) and returns a ticket ID for follow-up.
• Customization-first – color tokens, copy arrays, and assets are modular so you can swap branding in minutes.
• Testing & CI – Vitest + Testing Library cover key flows; GitHub Actions runs lint, tests, and build on every push.

---

Tech Stack

Layer	Stack
Frontend	React 19, Vite, CSS modules
Backend	Flask, SQLAlchemy, PostgreSQL, python-dotenv
Tooling	ESLint, Vitest, React Testing Library, jsdom, GitHub Actions, Netlify-ready

---

Getting Started

cd frontend
# Install deps (pnpm, npm, or yarn)
pnpm install
# Launch development server
pnpm run dev

The app runs at http://localhost:5173. You can hot reload each React component as you customize copy or styles.

Quick start with backend (optional)

cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env  # configure DB + secret key
flask --app app run

This exposes the contact API at http://localhost:5000; ensure frontend/.env points VITE_API_URL to that address.

---

Scripts

Command	Description
pnpm run dev	Start Vite with hot module reload.
pnpm run build	Produce the optimized bundle in dist/.
pnpm run preview	Preview the production build locally.
pnpm run lint	ESLint (eslint.config.js).
pnpm run test	Vitest suite (jsdom + Testing Library).
pnpm run test:watch	Watch mode for Vitest.
pnpm run test:coverage	Generate coverage via V8.

The repo ships with package-lock.json. If you use pnpm or yarn, remove the existing lockfile before installing.

---

Project Structure

CleanLandingPro/
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── database.py
│   ├── models.py
│   ├── routes/
│   ├── requirements.txt
│   └── .env.example
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   ├── package-lock.json
│   ├── vite.config.js
│   ├── eslint.config.js
│   ├── .env.example
│   └── index.html
├── netlify.toml
├── README.md
├── USABILITY_TEST.md
└── LICENSE

---

---

Backend API

The backend is optional but ready if you need server-side persistence.

cd backend
python -m venv .venv
source .venv/bin/activate          # Windows: .venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env                # set DATABASE_URL, SECRET_KEY, etc.
flask --app app run                 # http://localhost:5000

• Routes
  • POST /api/contact – validates {name, email, message} (plus optional fields), stores them in Postgres, and returns {message, ticketId}.
  • GET /api/health – simple heartbeat for uptime monitors.
• Database – default URL expects cleanlanding database locally. Update DATABASE_URL for Render, Railway, Fly.io, etc.
• CORS – CORS_ORIGINS in .env controls allowed frontends.

Deploy the backend separately and set VITE_API_URL (frontend) to the deployed API URL.

---

Environment Variables

Front-end .env.example (under frontend/):

VITE_API_URL=http://localhost:5000

Backend .env.example includes DATABASE_URL, SECRET_KEY, CORS_ORIGINS, and PORT. Copy each .env.example to .env, then adjust values for local development and production (Netlify, Render, etc.).

---

Customization Guide

Area	How to customize
Branding / Tokens	Update CSS variables in src/index.css.
Copy / Content	Edit component arrays (e.g., testimonials, pricing) in src/components/.
Demo Preview	Adjust devicePresets in src/components/DemoPreview.jsx.
Affiliate Logos	Drop assets in public/images and update src/components/Affiliate.jsx.
Analytics	Replace trackEvent in src/utils/analytics.js with your provider.
Hero / imagery	Swap PNG/SVGs under public/images and update components.

After tweaking copy or assets, run pnpm run dev to preview changes instantly.

---

Testing

Vitest + Testing Library keep core flows verified.

pnpm run test        # single run
pnpm run test:watch  # watch mode
pnpm run test:coverage

Current suites cover:

• DemoPreview – ensures device tab and theme toggles update state.
• ContactForm – validates client-side errors clear and fetch calls fire.

Add new specs under src/components/__tests__/ for any new section or interaction.

---

Deployment

Frontend

1. cd frontend && pnpm run build
2. Deploy frontend/dist/ (Netlify, Vercel, S3/CloudFront, etc.).

Netlify-specific settings:

• Base directory: frontend
• Build command: npm run build
• Publish directory: dist
• _redirects already ensures SPA routing + FAQ deep links.
• netlify.toml locks Node 20 and adds VITE_APP_ENV.

Backend

• Host Flask (Render, Railway, Fly.io, ECS, etc.).
• Configure DATABASE_URL, SECRET_KEY, CORS_ORIGINS.
• Expose VITE_API_URL in the frontend environment so the contact form points to the right API.

CI

.github/workflows/ci.yml runs lint, tests, and build on pushes/PRs to main and release/**. Extend it with Lighthouse, preview deploys, or additional checks as needed.

Contribution Guide

1. Fork and branch

   git checkout -b feature/my-update

2. Coding standards
   • Follow ESLint (npm run lint).
   • Prefer functional components and hooks.
   • Keep styles mobile-first.
3. Testing
   • Update or add Vitest suites for new behavior.
   • Ensure npm run test passes before committing.
4. Commit style
   • Use clear, descriptive commit messages (e.g., feat: add scroll spy to nav).
   • Avoid bundling unrelated changes.
5. Pull requests
   • Describe the change, include screenshots or Looms for UI updates.
   • Note any backend/env changes so reviewers can test properly.
6. Code review
   • Respond promptly, rebase if requested, and keep history tidy.

Bug reports and feature requests are welcome via GitHub Issues. Please include reproduction steps or a short Loom demo when possible.

---

License

MIT © CleanLanding Pro. Use it freely for personal or commercial projects. Attribution appreciated but not required.