Skip to content

tobyemerald/meticulousHS

Repository files navigation

Meticulous Health Solutions

Meticulous Health Solutions is a responsive React website for a Georgia pediatric home healthcare agency. The site introduces the agency, explains Georgia Pediatric Program (GAPP) services, captures consultation and contact requests, and accepts career applications with resume and cover letter uploads.

Features

  • Public marketing pages for home, about, GAPP services, contact, careers, and free consultations
  • Responsive navigation and footer powered by React Router
  • Framer Motion page and section animations
  • Tailwind CSS styling with local image assets
  • Contact, GAPP inquiry, and booking forms that submit to Airtable
  • Career application form with Base64 resume and cover letter upload support
  • Vercel serverless API routes for form handling

Screenshots

Hero Process FAQs GAPP Services About Forms Mobile

Tech Stack

  • React
  • TypeScript
  • Vite
  • Tailwind
  • React Router
  • Framer Motion
  • Lucide React
  • Vercel serverless functions
  • Airtable API

Project Structure

api/
  career.js        # Career application endpoint
  contact.js       # Contact, GAPP, and booking endpoint
public/
  icons.svg
  favicon.svg
src/
  assets/          # Images, logo, and favicon assets
  components/      # Shared UI sections
  constants/       # Navigation configuration
  lib/             # Motion helpers
  pages/           # Route-level page components

Routes

Path Page
/ Home page
/about Agency overview, mission, vision, and values
/gapp-services GAPP program and service information
/career Hiring information and application form
/contact Contact form and GAPP inquiry form
/booking Free consultation eligibility form

Getting Started

Prerequisites

  • Node.js 20 or newer recommended
  • npm
  • Airtable base and personal access token for production form submissions

Installation

npm install

Local Development

npm run dev

Vite will start the development server and print a local URL, usually http://localhost:5173.

Build

npm run build

This runs TypeScript project checks and creates a production build in dist/.

Preview Production Build

npm run preview

Lint

npm run lint

Environment Variables

Copy .env.example to .env.local for local development or configure the same variables in Vercel for deployment.

cp .env.example .env.local

Required variables:

Variable Description
AIRTABLE_ACCESS_TOKEN Airtable personal access token
AIRTABLE_BASE_ID Airtable base ID
AIRTABLE_TABLE_NAME Career applications table name

Optional table name overrides:

Variable Default
AIRTABLE_CONTACT_TABLE_NAME Contact Submissions
AIRTABLE_GAPP_TABLE_NAME GAPP Submissions
AIRTABLE_BOOKING_TABLE_NAME Booking Submissions

The .env.example file also includes optional AIRTABLE_FIELD_*, AIRTABLE_CONTACT_FIELD_*, AIRTABLE_GAPP_FIELD_*, and AIRTABLE_BOOKING_FIELD_* overrides for Airtable bases that use different field names.

Airtable Setup

Career Applications

The career form submits to /api/career. Create an Airtable table for applications with these fields:

  • First Name
  • Last Name
  • Email
  • Phone
  • Position
  • Years of Experience
  • Availability
  • License or Certification
  • Background
  • Resume File Name
  • Cover Letter File Name
  • Resume
  • Cover Letter

Resume and cover letter uploads are sent through a Vercel serverless function, so their combined file size is limited to 3 MB before Base64 encoding.

Contact Page Submissions

The contact page and booking page submit to /api/contact.

Create Airtable tables for:

  • Contact Submissions
  • GAPP Submissions
  • Booking Submissions

Expected form payloads:

  • Contact Us: name, phone, email, subject, message
  • GAPP Form: parent name, phone, child diagnosis, location, address, city, ZIP/postal code, insurance type
  • Free Consultation: qualifying conditions, Georgia residency, care need, insurance coverage, child age range, full name, email, phone

Deployment

The project is ready for Vercel deployment:

  1. Connect the repository to Vercel.
  2. Add the Airtable environment variables in the Vercel project settings.
  3. Deploy with the default Vite build command: npm run build.
  4. Vercel will serve the frontend and expose the serverless functions in api/.

Notes

  • API routes only accept POST requests.
  • Form submissions return a generic user-facing error while detailed failures are logged server-side.
  • The career API creates the Airtable record first, then uploads resume and cover letter files into Airtable attachment fields.

About

A fully responsive, multi-page website for Meticulous Health Solutions, a trusted provider of in-home pediatric care in Georgia. The site showcases services, the Georgia Pediatric Program (GAPP), careers, and contact options, while building trust with families seeking personalized healthcare solutions.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors