A modern, full-stack web development framework, optimized for Heroku, built with MongoDB, Express, React, and Node.js. Featuring Passport.js authentication, security hardening, payment processing, responsive design system, and much more.

Get Started Contact Us
hMERN Framework
Scroll to Explore

Key Features

Everything you need to build modern web applications

Full Stack MERN

  • MongoDB for database
  • Express.js for backend API
  • React.js for frontend
  • Node.js for server

Authentication & Security

  • Passport.js authentication
  • Multiple OAuth providers
  • Session-based auth with MongoDB
  • Helmet.js security & Rate limiting

Modern Development

  • ES6+ JavaScript
  • React Hooks
  • Modern React practices
  • Responsive design

Prerequisites

What you need to get started with HMERN

Development Tools

  • Node.js
    v18 or higher
  • npm
    v10 or higher
  • git
    v2 or higher

API Keys

  • OAuth Providers
    Google, GitHub, etc.
  • MongoDB Atlas
    Cloud database connection
  • SMTP Server
    For email functionality

Pricing Plans

Choose the plan that's right for you

Basic
$0

Perfect for getting started

  • Core framework features
  • Basic documentation
  • Community support
Get Started
Pro
$499

For professional developers

  • Everything in Basic
  • Advanced features
  • Priority support
  • Custom templates
Purchase
Enterprise
Custom

For large organizations

  • Everything in Pro
  • Dedicated support
  • Custom development
  • Training sessions
Contact
Scroll to AI Software

Quick Installation

Get started in minutes with our simple setup process

Terminal
# Clone the repository git clone https://github.com/ralphdp/hmern.git
# Navigate to the project directory cd hmern npm install cd backend npm install cp .env.example .env # Set up backend environment variables cd ../ cd frontend npm install cp .env.example .env # Set up frontend environment variables
Make sure both the backend and frontend servers are running on separate terminal instances for the application to work properly.

Project Structure

Clean and organized codebase architecture

Frontend

  • components/
    React components and UI elements
  • pages/
    Page components and routes
  • services/
    API services and data fetching
  • utils/
    Utility functions and helpers

Backend

  • config/
    Environment and app configuration
  • models/
    MongoDB schemas and models
  • routes/
    API endpoints and controllers
  • services/
    Business logic and data processing

Localhost

Run hMERN on your local linux/mac machine

Terminal
# Start backend server cd ../ npm run dev
# Start frontend server [start a new terminal instance] cd frontend npm start
Make sure both the backend and frontend servers are running on seperate terminal instances for the application to work properly.

Heroku

Ready for deployment

Terminal
# Install Heroku CLI [start a new terminal instance] brew install heroku/brew/heroku
# Login to Heroku heroku login
# Build the Heroku application heroku create
# Set up Heroku environment variables heroku config:set NODE_ENV=production heroku config:set MONGODB_URI=your_mongodb_uri heroku config:set FRONTEND_URL=https://your-app.herokuapp.com heroku config:set REACT_APP_NODE_ENV=production heroku config:set REACT_APP_FRONTEND_URL=https://your-app.herokuapp.com heroku config:set REACT_APP_BACKEND_URL=https://your-app.herokuapp.com heroku config:set SESSION_SECRET=your_session_secret heroku config:set GOOGLE_CLIENT_ID=your_google_client_id heroku config:set GOOGLE_CLIENT_SECRET=your_google_client_secret heroku config:set GITHUB_CLIENT_ID=your_github_client_id heroku config:set GITHUB_CLIENT_SECRET=your_github_client_secret heroku config:set FACEBOOK_APP_ID=your_facebook_app_id heroku config:set FACEBOOK_APP_SECRET=your_facebook_app_secret heroku config:set EMAIL_HOST=smtp.example.com heroku config:set EMAIL_PORT=587 heroku config:set EMAIL_USER=your_email_user heroku config:set EMAIL_PASSWORD=your_email_password heroku config:set EMAIL_FROM=your_email_from
# Deploy to Heroku git add . git commit -m "Initial Commit" git push heroku master
If you experience any any errors or issues during the deployment process, check the heroku logs by running: heroku logs --tail.

GitHub

Push your project

Terminal
# Initialize git repository git init
# Add all files git add .
# Make initial commit git commit -m "Initial commit - hMERN boilerplate"
# Add your GitHub repository as remote git remote add origin https://github.com/yourusername/your-repo-name.git
# Push to GitHub git branch -M master git push -u origin master
Make sure both the backend and frontend servers are running on separate terminal instances for the application to work properly.

hMERN Demo

Experience the power and simplicity of hMERN Framework with our interactive demo. Built with modern web technologies, our framework provides a seamless development experience from start to finish.

  • Modern, responsive design that works on all devices
  • Built-in authentication and user management
  • Ready-to-use components and templates
Scroll to Pricing

AI Assisting Software

Powered by cutting-edge AI technology

Scroll to Mission

Our Mission!

Learn more about hMERNs mission.

Mission