ReactPulse

🚀 CLI tool to create full-stack MERN applications with zero configuration

A powerful command-line tool that generates complete MERN (MongoDB, Express.js, React, Node.js) stack applications with all the modern tooling and best practices built-in.

✨ Features

• 🔄 Full-Stack Generation: Complete backend and frontend setup
• 🔐 Authentication Ready: JWT-based user authentication system
• 📡 Real-time: Socket.io integration for real-time features
• 🛡️ Security: Helmet, CORS, compression, and other security middleware
• 📱 Modern Frontend: React 18 + Vite + React Router + Axios
• 🗄️ Database: MongoDB with Mongoose ODM
• ⚡ Development Ready: Hot reload, concurrent development servers
• 📦 Auto-install: Automatically installs all dependencies

🚀 Quick Start

Using npx (Recommended)

npx reactpulse myapp
cd myapp
npm run dev

Global Installation

npm install -g reactpulse
reactpulse myapp
cd myapp
npm run dev

📁 What Gets Generated

myapp/
├── backend/                 # Express.js server
│   ├── controllers/        # Route controllers
│   ├── middlewares/        # Custom middleware
│   ├── models/            # Mongoose models
│   ├── routes/            # API routes
│   ├── utils/             # Utility functions
│   ├── server.js          # Main server file
│   ├── package.json       # Backend dependencies
│   └── .env.example       # Environment variables template
├── frontend/               # React application
│   ├── src/               # Source code
│   │   ├── App.jsx        # Main app component
│   │   ├── main.jsx       # Entry point
│   │   └── styles.css     # Styling
│   ├── public/            # Static assets
│   ├── index.html         # HTML template
│   ├── vite.config.js     # Vite configuration
│   └── package.json       # Frontend dependencies
├── package.json            # Root package with scripts
└── README.md              # Project documentation

🛠️ Backend Features

• Express.js server with middleware stack
• MongoDB with Mongoose ODM
• JWT Authentication with bcrypt password hashing
• Socket.io for real-time communication
• Multer for file uploads
• CORS configuration
• Helmet security headers
• Compression middleware
• Cookie-parser for cookies
• Environment variables with dotenv
• Input validation with express-validator

🎨 Frontend Features

• React 18 with modern hooks
• Vite for fast development and building
• React Router for navigation
• Axios for API communication
• Socket.io-client for real-time features
• Responsive design with modern CSS
• Form handling with validation
• State management with React hooks

🔧 Available Scripts

Root Level

npm run dev          # Start both backend and frontend
npm run server       # Start backend only
npm run client       # Start frontend only
npm run build        # Build frontend for production
npm run install-all  # Install all dependencies
npm start            # Start production server

Backend

cd backend
npm run dev          # Start with nodemon (development)
npm start            # Start production server

Frontend

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

🌐 API Endpoints

• GET /api/health - Health check
• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/user - Get current user (protected)
• GET /api/users - Get all users (protected)
• GET /api/users/:id - Get user by ID (protected)

🔐 Authentication

The generated app includes a complete JWT authentication system:

1. Registration: Users can create accounts with name, email, and password
2. Login: Secure authentication with JWT tokens
3. Protected Routes: Middleware to protect API endpoints
4. Token Storage: JWT tokens stored in localStorage

🗄️ Database Setup

1. Install MongoDB locally or use MongoDB Atlas
2. Copy .env.example to .env in the backend folder
3. Update MONGODB_URI with your connection string
4. The app will automatically create the database and collections

🚨 Environment Variables

Create a .env file in the backend directory:

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/mern-app
JWT_SECRET=your-super-secret-jwt-key
FRONTEND_URL=http://localhost:3000

📱 Frontend Features

• Responsive Design: Works on all device sizes
• Modern UI: Beautiful gradient backgrounds and glass-morphism effects
• Form Validation: Built-in form handling and validation
• Error Handling: User-friendly error messages
• Loading States: Visual feedback during API calls

🚀 Getting Started After Generation

1. Navigate to your app:

   cd myapp

2. Set up environment variables:

   cp backend/.env.example backend/.env
   # Edit backend/.env with your values

3. Start MongoDB (if running locally)

4. Run the application:

   npm run dev

5. Open your browser:

   • Frontend: http://localhost:3000
   • Backend: http://localhost:5000

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the ISC License.

🙏 Acknowledgments

Built with ❤️ using modern web technologies and best practices.

Happy coding! 🎉

If you find this tool helpful, please give it a ⭐ on GitHub!