CoachUp is a premium web application designed for professional triathlon coaches to manage their brand, showcase success stories, and facilitate seamless client onboarding. Built with a focus on high-end aesthetics and performance, the platform integrates Stripe for payments, Calendly for scheduling, and GSAP for state-of-the-art interactive experiences.
The application is built using a modern React stack, prioritizing speed, maintainability, and a "wow" factor for the end-user.
- Glassmorphic Design System: Leveraging Tailwind CSS and custom utility classes to create a sophisticated, depth-oriented UI that feels premium and light.
- GSAP-Powered Interactions:
- Infinite Image Carousel: A seamless, high-performance horizontal scroller showcasing athletic excellence.
- Scroll-Triggered Entry: Staggered animations that bring content to life as the user explores the page.
- Interactive 3D Scaling: Cards and interactive elements respond to user input with physics-based smooth scaling.
- Stripe Checkout Integration: A fully functional payment flow integrated with the Stripe JS SDK, supporting subscription-based coaching plans.
- Calendly Scheduling: Embedded scheduling widget for discovery calls, synchronized with the coach's real-time availability.
- Responsive Architecture: A mobile-first approach ensuring the coaching experience is flawless on any device, from smartphones to ultra-wide displays.
- Frontend Library: React 19
- Build Tool: Vite
- Styling: Tailwind CSS 4
- Animations: GSAP (GreenSock Animation Platform)
- Routing: React Router 7
- Payments: Stripe
- Icons: Lucide React & React Icons
src/
├── Components/ # Reusable UI components
│ ├── About.jsx # About us section
│ ├── Coaching.jsx # Pricing & Stripe integration
│ ├── ImageCarousel.jsx # GSAP infinite scroller
│ ├── Navbar.jsx # Glassmorphic navigation
│ └── ...
├── App.jsx # Root application assembly
├── MainRouter.jsx # Client-side routing configuration
└── index.css # Global styles and design tokens
- Node.js (v18.0.0 or higher)
- npm or yarn
- A Stripe account (for API keys)
-
Clone the repository:
git clone https://github.com/your-username/coachup.git cd coachup -
Install dependencies:
npm install
-
Environment Configuration: Create a
.envfile in the root directory and add your API keys:VITE_STRIPE_PUBLISHABLE_KEY=pk_test_... VITE_STRIPE_SECRET_KEY=sk_test_... VITE_CALENDLY_LINK=https://calendly.com/your-link
-
Run the development server:
npm run dev
The project is optimized for deployment on Vercel or Netlify.
- Connect your GitHub repository to your hosting provider.
- Configure the build command as
npm run buildand the output directory asdist. - Add your production environment variables in the provider's dashboard.
- Asset Management: Images are lazy-loaded and served from high-performance CDNs.
- Code Splitting: Routes are loaded dynamically to minimize initial bundle size.
- GSAP Optimization: ScrollTrigger instances are automatically cleaned up on component unmount to prevent memory leaks.
This project is licensed under the MIT License.