Nextjs Firebase Mui Starter screenshot

Nextjs Firebase Mui Starter

Author Avatar Theme by Martinxpn
Updated: 21 Jan 2025
26 Stars

Starter Template for developing a Next.js (15) + Firebase + MUI Project. This repository contains the necessary code to kickstart a project that includes authentication, server-side rendering, MUI components, analytics, and even sending emails

Categories

Overview

The Ultimate Tech Stack for Building a Full-Stack MVP and Iterating Quickly is a template repo that provides a comprehensive tech stack for building a full-stack Minimum Viable Product (MVP) and enables rapid iteration. This template includes both the front-end (React app) and the back-end (Firebase serverless functions) in one repository, allowing for efficient development and minimizing code duplication. The template also provides detailed instructions on prerequisites, running the project, and available scripts for development, building, and deploying.

Features

  • Mono-repo organization: The project is organized as a mono-repo, combining the front-end and back-end components in one repository to avoid code replication.
  • Environment variable management: The template requires the use of an .env or env.local file with corresponding environment variables for successful project execution. The file should be placed in the root directory or the functions/ directory for testing or deploying Firebase functions, respectively.
  • Script automation: The template includes various scripts that automate tasks such as running the app in development mode, building the app for production, starting the app in production mode, emulating the Firebase stack locally, and deploying the project to production.
  • Model sharing: To avoid replication, the template allows for sharing models (schemas) between the front-end and back-end components, ensuring consistency and minimizing redundancy.

Installation

To install and set up the Ultimate Tech Stack template, follow these steps:

  1. Ensure you have an .env or env.local file with the required environment variables.

  2. Place the .env file in the root directory or the functions/ directory if running tests or deploying Firebase functions.

  3. Run the following scripts:

    • yarn dev: Runs the app in development mode.
    • yarn build: Builds the app for production.
    • yarn start: Starts the app in production mode.
    • yarn emulate: Emulates the whole Firebase stack locally.
    • firebase deploy: Deploys the Firebase project to production (Functions, Firestore, and rules).
    • firebase deploy --only hosting: Deploys the React app in the build folder to production.
    • yarn update:models: Updates the models in the Next.js app from functions/models.
    • lsof -t -i tcp:5000 | xargs kill && lsof -t -i tcp:5001 | xargs kill && lsof -t -i tcp:9099 | xargs kill && lsof -t -i tcp:8080 | xargs kill && lsof -t -i tcp:9199 | xargs kill && lsof -t -i tcp:8087 | xargs kill: Kills all Firebase emulators and frees up ports.

Summary

The Ultimate Tech Stack template offers a comprehensive solution for building a full-stack MVP and iterating quickly. With its mono-repo organization, automated scripts, and shared models, developers can efficiently develop and deploy their projects with minimal code duplication. The template also provides detailed instructions for installation and execution, ensuring a smooth development experience.