This project demonstrates how to build a modern, high-performance e-commerce website using WordPress and WooCommerce as a headless CMS/backend, with a React frontend deployed on Cloudflare Pages. It showcases the power of combining traditional WordPress content management with modern JAMstack architecture.
- Headless WordPress Integration: Utilizes WordPress as a headless CMS
- WooCommerce Support: Full e-commerce capabilities powered by WooCommerce
- Modern Frontend: Built with React 18 and TypeScript
- Performance-First: Server-side rendering and edge computing via Cloudflare Pages
- Responsive Design: Mobile-friendly UI built with Tailwind CSS
- Shopping Cart: Client-side cart management with context API
- Theme Support: Dark/light mode theming capability
-
Frontend:
- React 18 with TypeScript
- Vite (Build tool)
- Tailwind CSS (Styling)
- Context API (State Management)
-
Backend/CMS:
- WordPress (Headless)
- WooCommerce (E-commerce)
-
Infrastructure:
- Cloudflare Pages (Hosting)
- Cloudflare Functions (Serverless Backend)
├── src/
│ ├── components/ # Reusable UI components
│ ├── contexts/ # React Context providers
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── services/ # API service layer
│ ├── types/ # TypeScript definitions
│ └── utils/ # Utility functions
├── functions/ # Cloudflare Functions
└── public/ # Static assets
-
Prerequisites
- Node.js 16 or higher
- A WordPress site with WooCommerce installed
- Cloudflare account
-
Environment Setup Create a
.env
file with your configuration:WORDPRESS_URL=your-wordpress-site.com WOOCOMMERCE_KEY=your-consumer-key WOOCOMMERCE_SECRET=your-consumer-secret
-
Installation
# Clone the repository git clone [repository-url] # Install dependencies npm install # Start development server npm run dev
-
Development
# Run development server npm run dev # Build for production npm run build # Preview production build npm run preview
This project is designed to be deployed on Cloudflare Pages. The deployment process is automated through GitHub integration:
- Push your changes to GitHub
- Cloudflare Pages automatically builds and deploys your site
- Cloudflare Functions are automatically deployed as serverless functions
- Performance: Lightning-fast page loads with edge computing
- Scalability: Serverless architecture that scales automatically
- Security: Protected by Cloudflare's security features
- Cost-Effective: Pay-as-you-go pricing for Functions
- Developer Experience: Modern development workflow with hot reloading
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- WordPress and WooCommerce communities
- Cloudflare for their excellent hosting and edge computing platform
- All open-source contributors whose libraries make this possible
For questions and support, please open an issue in the GitHub repository.
⭐ If you find this project helpful, please consider giving it a star!