TS-Boilerplate

Dead simple monorepo boilerplate web project designed to take you from Git Cloning to Heroku Deployment in less 5 minutes. 🚀🤩

It is built using the TypeScript, React, Express, Mongoose, MongoDB stack. If you want to checkout an example project based on TS-Boilerplate, check out TS-Canvas.

Features

Essentially, here're some of its features:

• JWT-based user authentication / authorization system
• Silent refresh / access token retrieval
• Clean mono-repo structure with Express Server and React Client
• Code linting setup according to Airbnb standards
• Able to connect to MongoDB and WebSockets
• Pretty UI using Bulma and Styled Components
• Easy deployability on Heroku (literally 3 steps, it's really easy)

Setting Up

Recommended Tools Checklist

• Git Clone this repository
• Create a MongoDB Atlas Account
• Create a Heroku account
• Install Node.JS
• Install Yarn Package Manager

Installing Requirements

$ git clone https://github.com/Orang-utan/ts-boilerplate.git
$ cd ts-boilerplate
$ yarn setup

Configuring Enviromental Variable

Create file called ".env.development" in root directory, it should look like the following:

ATLAS_URI=mongodb-connection-string-placeholder
JWT_SECRET=my-secret-jwt-key-placeholder

Then, create another file called ".env" in "src/client", it should look like the following:

REACT_APP_API_URL="http://localhost:5000"

Running Project

$ # run both server and client
$ yarn dev
$ # run server only
$ yarn server
$ # run client only
$ yarn client

To Deploy

Deploying this project on Heroku is dead simple. Basically, go on Heroku and create a new Heroku app, connect your project Github to your new Heroku app, and hit Deploy. Note, that you will need to configure the enviromental variable under settings.

Todo

• Account Confirmation / Password Reset (SendGrid)
• Migrate Project from MongoDB to PostgreSQL
• Refactor Backend to CLEAN architecture
• File upload functionality
• CRUD Operations Demo
• Dockerize + Kubernetes Infrastructure