create-mern-mysql-app

Full-stack boilerplate generator using React, Node.js, Express & MySQL (native)

✨ Features

• ⚡️ React 18 with Vite for blazing-fast development
• 🚀 Express.js backend with clean architecture
• 🗄️ MySQL database with native mysql2 driver
• 🔄 RESTful API with CRUD operations
• 📦 Ready-to-use project structure
• 🎯 Zero configuration required
• 🔥 Hot reload for both frontend and backend

🚀 Quick Start

npx create-mern-mysql-app my-app

That's it! Your full-stack application is ready.

📋 Prerequisites

• Node.js 16+
• MySQL 5.7+ or 8.0+
• npm or yarn

🛠️ Installation & Setup

1. Create your project

npx create-mern-mysql-app my-awesome-app
cd my-awesome-app

2. Install dependencies

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

3. Configure database

# Copy environment file
cd backend
cp .env.example .env

Edit .env with your MySQL credentials:

DB_HOST=localhost
DB_USER=root
DB_PASS=your_password
DB_NAME=your_database
PORT=4000

4. Run development servers

Backend (Terminal 1):

cd backend
npm run dev

Frontend (Terminal 2):

cd frontend
npm run dev

Your app is now running:

• Frontend: http://localhost:5173
• Backend: http://localhost:4000

📁 Project Structure

my-app/
├── backend/
│   ├── configs/
│   │   └── db.js              # Database configuration
│   ├── models/
│   │   └── User.js            # User model
│   ├── routes/
│   │   └── user.routes.js     # User routes
│   ├── app.js                 # Express app setup
│   ├── server.js              # Server entry point
│   ├── .env.example           # Environment template
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── pages/
    │   │   └── Home.jsx       # Home page
    │   ├── services/
    │   │   └── api.js         # API configuration
    │   ├── App.jsx            # Main app component
    │   └── main.jsx           # React entry point
    ├── index.html
    ├── vite.config.js
    └── package.json

🔌 API Endpoints

| Method | Endpoint | Description | |--------|----------|-------------| | GET | /api/users | Get all users | | GET | /api/users/:id | Get user by ID | | POST | /api/users | Create new user | | PUT | /api/users/:id | Update user | | DELETE | /api/users/:id | Delete user |

Example Request

// Create a new user
fetch('http://localhost:4000/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'John Doe',
    email: '[email protected]'
  })
});

🎨 Tech Stack

📦 What's Included

Backend

• ✅ Express.js server setup
• ✅ MySQL connection pool with mysql2
• ✅ User model with native SQL queries
• ✅ RESTful API routes
• ✅ CORS enabled
• ✅ Environment variables support
• ✅ Error handling

Frontend

• ✅ React 18 with hooks
• ✅ Vite for fast development
• ✅ React Router for navigation
• ✅ API service layer
• ✅ Example components
• ✅ Hot module replacement

🔧 Available Scripts

Backend

npm run dev      # Start development server with nodemon
npm start        # Start production server

Frontend

npm run dev      # Start Vite dev server
npm run build    # Build for production
npm run preview  # Preview production build

🌟 Next Steps

After setting up your project, you might want to:

1. Add Authentication - Implement JWT or session-based auth
2. Add More Models - Create additional database models
3. Styling - Add CSS framework (Tailwind, MUI, etc.)
4. State Management - Integrate Redux or Zustand
5. Testing - Add Jest, Vitest, or Cypress
6. Deployment - Deploy to Vercel, Heroku, or AWS

🤝 Contributing

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

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

📝 License

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

👨‍💻 Author

Harshvardhan Patil

• GitHub: @Harshvardhan-Patil-264
• LinkedIn: Harshvardhan Patil
• Portfolio: harshvardhan-patil-portfolio.onrender.com
• Email: [email protected]

🙏 Acknowledgments

• React team for the amazing framework
• Vite for the blazing-fast build tool
• MySQL2 team for the excellent driver
• Express.js community

Made with ❤️ for developers

If this project helped you, please give it a ⭐️!