NextJS MongoDB MUI Boilerplate

screenshot of NextJS MongoDB MUI Boilerplate
nextjs
react
material-ui

NextJS MongoDB MUI Boilerplate

An Next.js and Mongoose web application with Material UI as the design system, designed as an starting point of any web application

Overview

The Next.js, Mongo(Mongoose), and Material UI Starter Boilerplate is a web application that serves as a starting point for building web applications. It utilizes the Next.js framework, Mongo database with Mongoose, and Material UI as the design system. The project follows the MVC architecture and includes full API route implementation with serverless support. It also features session-based authentication using Passport.js, with options for sign up, log in, sign out, email verification, password change, and password reset. The project provides a clean implementation of Material UI v5 with minimal custom CSS. Additionally, it includes stories for all pages and components using Storybook v7.

Features

  • MVC Architecture
  • Clean Material UI v5 implementation
  • Full API Routes implementation and Serverless ready
  • Middleware pattern compatible with the Express ecosystem
  • Session-based authentication with Passport.js
  • Sign up/Log in/Sign out API
  • Email verification
  • Password change
  • Password reset via email
  • User profile management (profile picture, username, name, bio, email)

Installation

To run this project, follow these steps:

  1. Clone the repository:

    git clone <repository_url>
    
  2. Install the dependencies:

    cd <project_folder>
    yarn install
    
  3. Create a .env.local file and add the following environment variables:

    CLOUDINARY_URL=<cloudinary_url>
    MONGODB_URI=<mongodb_connection_string>
    WEB_URI=<web_app_url>
    NODEMAILER_CONFIG=<nodemailer_config>
    
  4. Start the development server:

    yarn dev
    

This will start the project on the specified WEB_URI.

Summary

The Next.js, Mongo(Mongoose), and Material UI Starter Boilerplate is a powerful web application boilerplate that provides a ready-to-use foundation for building web applications with Next.js, Mongo database, and Material UI. It includes essential features and functionalities like MVC architecture, clean Material UI implementation, API route implementation, serverless support, session-based authentication, user profile management, and more. With its easy installation process and extensive documentation, this boilerplate is an efficient tool for developers looking to quickly kickstart their web application projects.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.