165 lines
4.5 KiB
Markdown
165 lines
4.5 KiB
Markdown
# 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**
|
|
```bash
|
|
git clone <your-repo-url>
|
|
cd pwf-website-new
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Set up environment variables**
|
|
|
|
**For Local Development:**
|
|
|
|
Create a `.env` file in the root directory:
|
|
```bash
|
|
cp env.example .env
|
|
```
|
|
|
|
Then edit `.env` with your actual values:
|
|
```env
|
|
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**
|
|
```bash
|
|
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](https://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:
|
|
|
|
```env
|
|
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 |