This will hopefully be our last time setting up Meauxbility.org
Tech Stack: Render, Stripe, Supabase, Cursor, Claude, OpenAI
Meauxbility is a 501(c)(3) nonprofit organization (EIN: 33-4214907) providing mobility grants and accessibility services to spinal cord injury survivors across Louisiana's Acadiana region.
Launch Target: November 3, 2024
Current Phase: Static GitHub Pages → Supabase/Render Migration
meauxbility.org/
├── index.html # Homepage with TRUTEC Stack
├── about.html # Mission/Team (glassmorphic)
├── apply.html # Grant Application Form
├── donate.html # Donation page (Stripe integration)
├── stories.html # Success Stories
├── contact.html # Contact form
├── admin/
│ └── index.html # Admin Dashboard (corporate style)
├── assets/
│ ├── css/
│ │ ├── main.css # Shared styles & CSS variables
│ │ ├── glassmorphic.css # Sam's signature glass UI
│ │ └── admin.css # Admin dashboard styles
│ ├── js/
│ │ ├── main.js # Core utilities
│ │ ├── forms.js # Form handling & validation
│ │ └── admin.js # Admin dashboard logic
│ └── images/
│ └── logo.svg
├── .github/
│ └── workflows/
│ └── deploy.yml # Auto-deploy to GitHub Pages
├── README.md # This file
└── CURSOR_GUIDE.md # Quick AI assistant guide
--brand-primary: #2563eb /* Primary Blue */
--brand-secondary: #4f46e5 /* Indigo */
--brand-accent: #0ea5e9 /* Cyan */
--brand-dark: #111827 /* Dark Gray */- Background: Radial gradients with purple/blue tones
- Cards:
backdrop-filter: blur(12px)with white borders - Mobile-first, <50KB per page
- Smooth animations with reduced motion support
- Clean corporate SaaS interface
- White cards, blue accents
- Stats grid, modals, toasts
- GitHub API integration
# Clone repository
git clone https://github.com/[username]/meauxbility.org.git
cd meauxbility.org
# Open in browser
open index.html
# Or use a local server
python -m http.server 8000
# Visit http://localhost:8000- Push to
mainbranch - GitHub Actions automatically deploys
- Site available at:
https://[username].github.io/meauxbility.org - Configure custom domain:
meauxbility.org
- HTML5 - Semantic markup
- CSS3 - Glassmorphic design system
- Vanilla JS - No frameworks, performance-first
- GitHub Pages - Free hosting
- Supabase - PostgreSQL database, auth, storage
- Render - Server hosting
- Stripe - Payment processing
- GitHub - Version control
- Google Workspace - Email, Drive, Calendar
All public pages follow this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title | Meauxbility</title>
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/glassmorphic.css">
</head>
<body>
<nav class="nav-glass">...</nav>
<main>
<!-- Page content -->
</main>
<footer class="footer-glass">...</footer>
<script src="assets/js/main.js"></script>
</body>
</html>- Single-page application
- Modal-based workflows
- GitHub API integration
- Will add Supabase auth later
- <50KB per page (excluding external resources)
- Mobile-first responsive design
- Accessible WCAG 2.1 AA compliance
- Fast optimized images, minified code
- 2 spaces for indentation
- kebab-case for CSS classes
- camelCase for JavaScript
- Semantic HTML always
- Comments for complex logic
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- iOS Safari 12+
- Android Chrome 90+
This repository is optimized for AI-assisted development:
- Clear Structure - Logical file organization
- CSS Variables - Easy theme customization
- Reusable Components - Glassmorphic system
- Documented Functions - JSDoc-style comments
- Consistent Naming - Predictable patterns
# "Add a new page about our team"
# AI should: Copy template, update nav, add to sitemap
# "Make the donate button more prominent"
# AI should: Update .btn-primary styles in main.css
# "Add a success story card"
# AI should: Use .glass-card from glassmorphic.css
# "Fix mobile menu not closing"
# AI should: Check main.js mobile-toggle event listeners- Complete
about.htmlpage - Create
apply.htmlgrant form - Build
donate.htmlwith Stripe placeholder - Add
stories.htmltestimonials - Finish
contact.htmlform - Add social media links
- Create 404 page
- Add sitemap.xml
- SEO meta tags all pages
- Supabase schema design
- Render deployment config
- Stripe integration setup
- Email service (SendGrid/Resend)
- Form submission endpoints
- Admin authentication
- User roles/permissions
- Analytics integration
Will need for Supabase/Render migration:
SUPABASE_URL=
SUPABASE_ANON_KEY=
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
GITHUB_TOKEN=
SENDGRID_API_KEY=- Sam - CEO/Founder, UI/UX Engineer
- Connor McNeely - CTO
- Fred Williams - CMO
© 2024 Meauxbility. All rights reserved.
501(c)(3) Nonprofit Organization - EIN: 33-4214907
- Website: meauxbility.org
- Inner Animals: inneranimals.com
- GitHub: [github.com/[username]/meauxbility.org]
- Sam is the founder with SCI experience
- Mobile-first, glassmorphic design is the signature style
- <50KB pages for performance
- November 3rd launch deadline
- Static now, Supabase/Render later
- Accessibility is paramount
- Performance over fancy features
- Reusable components
- Progressive enhancement
- Semantic HTML
- Uses ChatGPT for ideation
- Uses Claude (you!) for refinement
- Uses Cursor for development
- Prefers complete, production-ready code
- Values clear documentation
Last Updated: October 2024