Pilates with Fadia

A modern Pilates studio website built with React, TypeScript, and Express.

Features

• 🧘‍♀️ Class information and details
• 📧 Contact form and newsletter signup
• 📱 Responsive design
• 🎨 Modern UI with Tailwind CSS
• 📸 Instagram feed integration (via Curator.io)
• 🔐 User authentication (in-memory storage)

Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS
• Backend: Express.js, Node.js
• Storage: In-memory storage (no database required)
• Deployment: Vercel

Development

Prerequisites

• Node.js 20+
• npm or yarn

Setup

1. Clone the repository

   git clone <your-repo-url>
   cd pwf-website-new
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   For Local Development:

   Create a .env file in the root directory:

   cp env.example .env
   

   Then edit .env with your actual values:

   NODE_ENV=development
   SESSION_SECRET=your_secure_session_secret
   MAILCHIMP_API_KEY=your_mailchimp_key
   MAILCHIMP_SERVER_PREFIX=your_mailchimp_server_prefix
   MAILCHIMP_LIST_ID=your_mailchimp_list_id
   

   Getting the values:

   • SESSION_SECRET: Generate a random string (e.g., openssl rand -base64 32)
   • MAILCHIMP_API_KEY: Get from Mailchimp Account → Extras → API Keys
   • MAILCHIMP_SERVER_PREFIX: The part after the dash in your API key (e.g., if key is abc123-us1, server prefix is us1)
   • MAILCHIMP_LIST_ID: Get from Mailchimp Audience → Settings → Audience name and defaults

4. Run the development server

   npm run dev
   

   The app will be available at http://localhost:5000

Deployment to Vercel

Option 1: Automatic Deployment (Recommended)

1. Connect your GitHub repository to Vercel

   • Go to vercel.com
   • Sign up/login with GitHub
   • Click "New Project"
   • Import your repository

2. Configure environment variables in Vercel

   • Go to your project settings in Vercel
   • Navigate to Settings → Environment Variables
   • Add each variable:

     NODE_ENV = production
     SESSION_SECRET = your_secure_session_secret
     MAILCHIMP_API_KEY = your_mailchimp_key
     MAILCHIMP_SERVER_PREFIX = your_mailchimp_server_prefix
     MAILCHIMP_LIST_ID = your_mailchimp_list_id
     

   • Select Production, Preview, and Development environments
   • Click Save

3. Deploy

   • Vercel will automatically deploy on every push to main branch

Option 2: Manual Deployment with GitHub Actions

1. Get Vercel tokens

   • Install Vercel CLI: npm i -g vercel
   • Run vercel login
   • Get your tokens from Vercel dashboard

2. Add GitHub secrets

   • Go to your GitHub repository settings
   • Add these secrets:
     • VERCEL_TOKEN: Your Vercel token
     • ORG_ID: Your Vercel organization ID
     • PROJECT_ID: Your Vercel project ID

3. Push to main branch

   • The GitHub Action will automatically deploy to Vercel

Environment Variables for Production

Make sure to set these in your Vercel project settings:

NODE_ENV=production
SESSION_SECRET=your_secure_session_secret
MAILCHIMP_API_KEY=your_mailchimp_key
MAILCHIMP_SERVER_PREFIX=your_mailchimp_server_prefix
MAILCHIMP_LIST_ID=your_mailchimp_list_id

Project Structure

├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom hooks
│   │   └── lib/           # Utilities and config
│   └── dist/              # Built frontend (generated)
├── server/                # Express backend
│   ├── routes.ts          # API routes
│   ├── auth.ts            # Authentication
│   ├── storage.ts         # In-memory storage
│   └── index.ts           # Server entry point
├── vercel.json            # Vercel configuration
├── env.example            # Environment variables template
└── package.json           # Dependencies and scripts

API Endpoints

• GET /api/classes - Get all classes
• POST /api/newsletter - Subscribe to newsletter
• POST /api/contact - Send contact form

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License