4.5 KiB

Raw Permalink Blame History

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

Clone the repository

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

Install dependencies
```
npm install
```
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
Run the development server
```
npm run dev
```
The app will be available at http://localhost:5000

Deployment to Vercel

Option 1: Automatic Deployment (Recommended)

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

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

Deploy
- Vercel will automatically deploy on every push to main branch

Option 2: Manual Deployment with GitHub Actions

Get Vercel tokens
- Install Vercel CLI: npm i -g vercel
- Run vercel login
- Get your tokens from Vercel dashboard
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
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

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

License

MIT License

4.5 KiB Raw Permalink Blame History