The Ultimate React Starter Kit
Tags: react, node, express, mern
Published: 2019-05-10 00:59:59

---
title: The Ultimate React Starter Kit
published: true
description: The ultimate react starter project. Finish your next project 10x faster!
tags: react, node, express, mern
---

Learn more at [SugarKubes.io](https://sugarkubes.io)

# Full Stack Starter Project

- React
- Material-UI
- NextJS
- Mobx
- Koa
- Stripe
- Image and video uploader
- Instantly deployable on Google Cloud Run (serverless)
- Eslint
- Babel
- Swagger API Docs

## Features:

- **Authentication**: Enterprise-grade passwordless login (Password reset, multi-factor authentication) via [Auth0](http://auth0.com)
- **File Uploading**: Complete file uploading system (s3, wasabi, google cloud);
- **API**: Complete with user registration, email sending, and some useful CRUD operations.
- **Mongoose**: Mongoose ORM used for mongodb. Includes user CRUD.
- **MongoDB**: ready - deploy using Mongo Atlas, compose.io, or Amazon's Document DB.
- **Bloat Free.**: Build and deploy in minutes not hours.
- **Uploading Server**: Upload images via Google Drive, Dropbox, Webcam, URL, and Instagram!
- **Stripe Integration**: Start charging quickly with some helper stripe classes on both the front end and back end.
- **Analytics**: [Mixpanel](https://mixpanel.com/) and (Amplitude)[https://amplitude.com] analytics ready.
- **New User Walkthrough**: When a new user signs up you can walk them through several instructions.

## Video Walk Through

[Video Walk Through](https://youtu.be/_Zw6KD2nWFk)

# App - Front end

![login](https://s3.us-west-1.wasabisys.com/public.sugarkubes/repos/starter-kit-MKRN/login.png)

## Tech Used

SSR (server side rendered) react starter kit

- [nextjs](https://nextjs.org/)
- [mobx](https://mobx.js.org/)
- [material-ui](https://material-ui.com/)

## To start

- Make sure to fill in the configuration files to start. Put them in *config.dev.json*. For production, put your configs in config.prod.json

```sh
cd app
npm i
npm run dev
```

## To build outside docker

```sh
cd app
npm run build
npm run prod
```

## To build the docker container
```sh
cd app
# Replace values in build_push.sh with your docker credentials or google credentials
./build_push.sh
```

## To run in production

```sh
docker run -dti -p 8080:8080 -e PORT=8080 <your image name>
```

## To deploy on Google Cloud Run

- [Google's Cloud Run](https://medium.com/sugarkubes/deploy-object-detection-in-1-min-f0355acd2f0a) is one of my new favorite services, you can instantly deploy docker containers that auto scale and can be attached to a custom domain.  

- This repo is ready to instantly deploy on cloud run, just push to the google container hub using the *./build_push.sh* command and voila!


# API - Back end

![Documentation](https://s3.us-west-1.wasabisys.com/public.sugarkubes/repos/starter-kit-MKRN/api-docs.png)

- Make sure to fill in the configuration files to start. Put them in *config.dev.json*. For production, put your configs in config.prod.json

```sh
cd api
npm run dev
```

## Swagger

- Swagger is on /docs
- to build docs run

```sh
npm run docs
```

## To build the docker container
```sh
cd app
# Replace values in build_push.sh with your docker credentials or google credentials
./build_push.sh
```

## To run in production

```sh
docker run -dti -p 8080:8080 -e PORT=8080 <your image name>
```


### Create DB

- You can easily deploy a free mongodb instance using Mongo's Atlas Free Tier!

```bash
mongo admin --username root -p --host xx.xxx.xx.xxx

db = db.getSiblingDB("your-db-dev")
db.createUser( { user: "dev", pwd: "xoxoxo", roles: [ "readWrite", "dbAdmin" ]} )

db = db.getSiblingDB("your-db-prod")
db.createUser( { user: "prod", pwd: "xoxoxo", roles: [ "readWrite", "dbAdmin" ]} )

```

# Uploader

- Sits on a different service
- Instructions in the README in uploader/readme for setting up on google cloud
- instantly deploy with google cloud run

```sh
cd uploader
npm run dev

```