React Social Mongo

React Social Mongo: Multi-Page React Application — React, Bootstrap, Next.js & MongoDB for building private social networks on Node.js configuration available by Open Source.

Connected to MongoDB for full-stack database. Server-side rendered functionality through Next. Efficent and stateful React interface with performant UI.

Contents

• About

• Build

• Overview

• Requirements

• Installation

• Additional

About

React Social Mongo is a template for React & Next.js utilizing frameworks for quickly iterating and developing applications with Bootstrap and JSX.

• Website: heyitsjoealongi.com
• Twitter: @heyitsjoealongi
• GitHub: @heyitsjoealongi
• LinkedIn: @heyitsjoealongi

Build

React Social Mongo is built with modern frontend frameworks and adapts to screen sizes with ease. Captivating the elements and adaptive nature of Bootstrap in a lightweight framework around Airbnb type standards. Middleware, database & API preconfigured to enable quick iteration and application features.

• React.js

• Next.js

• Node.js

• Passport.js

• MongoDB

• Dotenv

• Yarn

Overview

Requirements

This project runs on Node.js while the DOM UI elements are established using React.js with modules from Bootstrap working within the Next.js framework. Passport handles user authentication & login.

• React (v17.0.1)

• Next (v10.0.0)

• Node (v15.0.0)

• Bootstrap (v4.5.3)

• MongoDB (v.3.6.3)

• Passport (v.0.4.1)

• Dotenv (v.8.2.0)

Installation

• Option 1.) Download the latest version of this template from GitHub

• Option 2.) Clone this repository

git clone https://github.com/heyitsjoealongi/react-social-mongo.git

• Option 3.) Fork, Clone, or Download via GitHub Desktop

Environment Variables

If you are running you project locally or from a private repository it is acceptable to processs files via env as the variables will bind on build within Next.

• Create a new file in your project folder titled .env
• Enter your processible variables into .env

MONGODB_URI=
DB_NAME=
WEB_URI=
SESSION_SECRET=

Cloud Variables

If you plan on using Next as your host or any other cloud host it is important to input the environment variables in the cloud settings, for example Environment Variables.

Basic Usage

Install

yarn install

Run

yarn run dev

Build

yarn run build

Upgrade

yarn upgrade-interactive --latest

Deploy

Create a Vercel account, choose a project name, and connect a GitHub, GitLab, or BitBucket account to push to the master branch of the repository. Quickly deploy with a cloned version of the reposity.

Option 1: Deploy from Repository

Clone Repo

Option 2: Deploy from Git

Git Link

Additional: Configure Deploy

Configure your deploy branch, settings, and domain within Vercel.

Additional

Bugs and Issues

Having an issue with the template? Report bugs & issues with Purple on GitHub via Issues. Fork, Pull, or Send an email over to join as a contributor! Join in on the open source conversation on Twitter.

Acknowledgments

• Create a Next.js App

• Bootstrap

• SVGR

• Next-CSS

• Dev.to

Additional Acknowledgments

• ESLint

• Prettier

License

© 2020 React Social Mongo released via MIT license. Information on this license can be viewed as it applies to this repository on GitHub at React Social Mongo License.