DEV Community

loading...

The Ultimate React Starter Kit

Andrew Pierno
CTO @WiZR AI and writing https://wrannaman.com
・3 min read

Learn more at 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
  • 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 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

App - Front end

login

Tech Used

SSR (server side rendered) react starter kit

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
cd app
npm i
npm run dev

To build outside docker

cd app
npm run build
npm run prod

To build the docker container

cd app
# Replace values in build_push.sh with your docker credentials or google credentials
./build_push.sh

To run in production

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

To deploy on Google Cloud Run

  • Google's Cloud Run 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

  • 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
cd api
npm run dev

Swagger

  • Swagger is on /docs
  • to build docs run
npm run docs

To build the docker container

cd app
# Replace values in build_push.sh with your docker credentials or google credentials
./build_push.sh

To run in production

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!
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
cd uploader
npm run dev

Discussion (0)