Developer Connector

Full Stack React MongoDB Express.js Node.js Application

Best practices to learn React - Redux - Node.js.

Table of contents

• Full Stack React MongoDB Express.js Node.js Application
  • Table of contents
    • Initial Configuration
    • Developing
      • Running on Development Mode
      • Building
    • Deploying / Publishing
      • Test production before deploy
      • Deploy to Heroku
    • Features
    • Covered topics
    • Contributing
    • Links
    • Licensing

Initial Configuration

1. Database

We are using MongoDb Atlas but you can also choose local database integration. You need MongoDb Connection String to connect your cluster.

2. Github Token

This is for listing user's repos. Follow these instructions to access it.

3. Deployment

Heroku account

• Make sure you have installed Node.js and npm.

Developing

git clone https://github.com/mejustdev/Project-Social-Network.git
cd Project-Social-Network

# Install server dependencies

npm install

# Install client dependencies

cd client
npm install

Create default.json file in config folder and paste your credentials

💥 Do not forget to add this file to the .gitignore.

#  config/default.json

{
  "mongoURI": "",
  "jwtSecret": "",
  "githubToken": ""
}

Running on Development Mode

# Run both Express & React from

npm run dev

Building

cd client
npm run build

Deploying / Publishing

Create your repository on Github. Then use Git Flow and finally push it to the remote

git add .
git commit -m "initializing project"
git push origin main

Test production before deploy

After running a build in the client 👆, cd into the root of the project

And run...

Linux/Unix

NODE_ENV=production node server.js

Windows Cmd Prompt or Powershell

$env:NODE_ENV="production"
node server.js

Check in browser on http://localhost:5000/

Deploy to Heroku

git checkout -b production

We can use this branch to deploy from, with our config files.

Add the config file

git add -f config/production.json

This will track the file in git on this branch only. DON'T PUSH THE PRODUCTION BRANCH TO GITHUB

Commit...

git commit -m 'ready to deploy'

Create your Heroku project

heroku create

And push the local production branch to the remote heroku main branch.

git push heroku production:main

Now Heroku will have the config it needs to build the project.

Don't forget to make sure your production database is not whitelisted in MongoDB Atlas, otherwise the database connection will fail and your app will crash.

After deployment you can delete the production branch if you like.

git checkout main
git branch -D production

Or you can leave it to merge and push updates from another branch. Make any changes you need on your main branch and merge those into your production branch

git checkout production
git merge main

Once merged you can push to heroku as above and your site will rebuild and be updated

Features

• Building an extensive backend API with Node.js & Express
• Complete User Authentication (Login / Signup)
• Authorization
• Using Redux for app state management
• Protecting routes/endpoints with JWT (JSON Web Tokens)
• Responsive + Mobile-First Design
• App Deployment with Heroku

Covered topics

• React Hooks throughout the entire App
• Next.js API Routes
• User authentication with JWT and Cookies
• Password hashing with bcrypt
• Modeling database content with Mongoose Schemas
• Managing MongoDB database with the Atlas Interface
• App Deployment with Deployment Service Heroku
• Protecting private client routes with React
• Securing private data with environment variables
• Validating Requests in Node / Express Apps

Contributing

"If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome"

Links

• Project homepage: https://net-werk.herokuapp.com/
• Repository: https://github.com/mejustdev/Project-Social-Network
• Issue tracker: https://github.com/mejustdev/Project-Social-Network/issues
  • In case of sensitive bugs like security vulnerabilities, please contact mejustdev@gmail.com directly instead of using issue tracker. I value your effort to improve the security and privacy of this project!

Licensing

"The code in this project is licensed under MIT license."