Create My Website

A CLI tool to create a modern website using Next.js, Payload CMS, Tailwind UI Blocks & Storybook.

Features

• 🚀 Next.js with TypeScript and Tailwind CSS
• 📝 Payload CMS for content management
• 🎨 Storybook for component development
• 🎯 Tailwind UI Blocks for rapid development
• 🔄 Automatic deployment setup for Vercel and Render
• 🎨 Customizable branding configuration

Prerequisites

• Node.js 14 or higher
• npm 6 or higher
• Git

Quick Start

npx create-my-website my-new-project

What's Included

• Frontend: Next.js with Tailwind CSS
• Backend: Payload CMS
• Component Library: Storybook with Tailwind UI Blocks
• Deployment: Vercel (Frontend) & Render (Backend)
• Database: PostgreSQL (hosted on Render)

Project Structure

my-new-project/
├── src/
│   ├── app/           # Next.js app directory
│   ├── components/    # React components
│   ├── blocks/        # Tailwind UI blocks
│   └── stories/       # Storybook stories
├── .storybook/        # Storybook configuration
├── config.json        # Project configuration
└── .env              # Environment variables

Configuration

The CLI will prompt you for:

• Project name
• Vercel deployment domain
• Render CMS domain
• Brand colors

Development

1. Start the development server:

   npm run dev

2. Start Storybook:

   npm run storybook

Deployment

Frontend (Vercel)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Configure environment variables
4. Deploy!

Backend (Render)

1. Create a new Web Service on Render
2. Connect your GitHub repository
3. Configure environment variables
4. Deploy!

Environment Variables

Required environment variables:

• NEXT_PUBLIC_PAYLOAD_URL: Your Payload CMS URL
• PAYLOAD_SECRET: Secret key for Payload CMS
• DATABASE_URI: PostgreSQL connection string

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT