Create Muze App

A powerful CLI tool to generate full-stack TypeScript applications with Next.js frontend and Express.js backend.

🚀 Features

• Full-Stack Setup: Creates both frontend and backend in one command
• TypeScript First: All code is written in TypeScript
• Modern Stack: Next.js 14 with App Router, Express.js, MongoDB
• Production Ready: Includes authentication, middleware, error handling
• Developer Experience: Hot reload, ESLint, Prettier, and more

📦 Installation

npx create-muze-app <project-name>

🛠️ What Gets Created

Frontend (Next.js)

• Next.js 14 with App Router
• TypeScript configuration
• Tailwind CSS for styling
• ESLint for code quality
• Modern project structure

Backend (Express.js)

• Express.js with TypeScript
• MongoDB with Mongoose
• Authentication middleware
• Error handling
• RESTful API structure
• Environment configuration

📁 Project Structure

your-project/
├── frontend/                 # Next.js application
│   ├── app/
│   ├── package.json
│   └── ...
├── backend/                  # Express.js API
│   ├── src/
│   │   ├── api/
│   │   │   ├── controllers/
│   │   │   ├── middleware/
│   │   │   ├── models/
│   │   │   ├── routes/
│   │   │   └── services/
│   │   ├── config/
│   │   └── index.ts
│   ├── package.json
│   └── ...
└── package.json             # Root package with scripts

🚀 Getting Started

1. Create a new project:

   npx create-muze-app my-awesome-app

2. Navigate to your project:

   cd my-awesome-app

3. Install all dependencies:

   npm run install:all

4. Start development servers:

   npm run dev

This will start both frontend (http://localhost:3000) and backend (http://localhost:5000) servers.

📋 Available Scripts

Root Level

• npm run dev - Start both frontend and backend in development mode
• npm run dev:frontend - Start only frontend
• npm run dev:backend - Start only backend
• npm run build - Build both frontend and backend
• npm run install:all - Install dependencies for all packages

Frontend (Next.js)

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Backend (Express.js)

• npm run dev - Start development server with hot reload
• npm run build - Compile TypeScript to JavaScript
• npm run start - Start production server
• npm run lint - Run ESLint

🔧 Configuration

Environment Variables

Create a .env file in the backend directory:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database Configuration
MONGODB_URI=mongodb://localhost:27017/your-database

# JWT Configuration
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRE=7d

# CORS Configuration
CORS_ORIGIN=http://localhost:3000

Database Setup

1. Install MongoDB locally or use MongoDB Atlas
2. Update the MONGODB_URI in your .env file
3. The application will automatically connect to the database

🏗️ Architecture

Backend Structure

• Controllers: Handle HTTP requests and responses
• Services: Business logic and data processing
• Models: MongoDB schemas and data validation
• Routes: API endpoint definitions
• Middleware: Authentication, validation, error handling
• Config: Database and application configuration

Frontend Structure

• App Router: Next.js 14 App Router for modern routing
• Components: Reusable UI components
• Pages: Application pages and layouts
• Styles: Tailwind CSS for styling
• Utils: Helper functions and utilities

🔐 Authentication

The backend includes authentication middleware that you can use to protect routes:

import { authMiddleware } from './middleware/example';

// Protect a route
router.use(authMiddleware);

📝 API Examples

Example API Endpoints

• GET /api/example - Get all examples
• GET /api/example/:id - Get example by ID
• POST /api/example - Create new example
• PUT /api/example/:id - Update example
• DELETE /api/example/:id - Delete example

Example Request/Response

// POST /api/example
{
  "title": "My Example",
  "description": "This is an example",
  "tags": ["example", "demo"]
}

// Response
{
  "success": true,
  "message": "Example created successfully",
  "data": {
    "id": "...",
    "title": "My Example",
    "description": "This is an example",
    "tags": ["example", "demo"],
    "status": "active",
    "createdAt": "2024-01-01T00:00:00.000Z",
    "updatedAt": "2024-01-01T00:00:00.000Z"
  }
}

🎨 Customization

Adding New API Endpoints

1. Create a new model in backend/src/api/models/
2. Create a service in backend/src/api/services/
3. Create a controller in backend/src/api/controllers/
4. Create routes in backend/src/api/routes/
5. Import and use the routes in backend/src/index.ts

Styling

The frontend uses Tailwind CSS. You can customize the styling by:

1. Modifying frontend/tailwind.config.ts
2. Adding custom CSS in frontend/app/globals.css
3. Using Tailwind classes in your components

🚀 Deployment

Frontend (Vercel)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically

Backend (Render, Railway, etc.)

1. Build the backend: npm run build
2. Set environment variables
3. Deploy the build folder

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Join our community discussions

🙏 Acknowledgments

• Next.js team for the amazing framework
• Express.js team for the robust backend framework
• MongoDB team for the flexible database
• All contributors and users of Create Muze App

Made with ❤️ by Muze Studios