💡 starter-mern-stack-chakra-ui

Use this template to initialize your MongoDB, Express, React, and Node.js web application or website with a basic structure and starter code stylized with Chakra UI.

Work In Progress

🚀 Getting Started

Installation

• Download Node.js.
• Download the nodemon package globally.
• Download MongoDB Community Server.

Initialization & Setup

1. Create a .env file in the root directory to hold environment variables. (dotenv module)
   1. LOGGED_IN=true - log in upon server refresh for user development
   2. DEV_USER_ID=[MongoDB _id] - MongoDB _id of a record to automatically log in with
2. Edit the name of your database by editing the DB_NAME constant in index.js.
3. Edit metadata information for SEO and data accuracy in:
   • client/public/index.html
   • client/public/manifest.json
   • client/public/robots.txt
   • client/public/sitemap.xml
   • package.json
   • README.md
4. Run npm install in both the root and client directories to install packages.

⚙️ Usage/Workflow Details

Development Process

1. Ensure that your MongoDB server is running locally for database functionality.
2. Run nodemon in the root directory while developing to automatically refresh your back-end (Node.js server) after editing.
3. Run npm start in the client directory while developing to automatically refresh front-end (React app) after editing.
4. Work on back-end by editing models, routes, and index.js.
5. Visit http://localhost:3000/ (React app) to see front-end changes.
   1. The React App uses a proxy to port 4000, so you may fetch Express routes like /users.

Scripts

Run npm start in the client directory to start the React app at port 3000.
Run npm start in the root directory to start the Node server at port 4000.

Directory Details

1. The auth directory contains Passport.js configurations. (Work In Progress)
2. The client/public directory contains front-end assets and site metadata.
3. The client/src directory contains React front-end.
4. The models directory contains MongoDB models.
5. The routes directory contains routes for endpoints and API calls.

Deployment

1. Create a MongoDB Atlas database and collection and copy your connection URI.
2. Create a Heroku app and enable automatic deployment to your repository.
3. Set environment variables for your Heroku app.
   1. MONGO_URI - MongoDB Atlas connection URI
   2. SESSION_SECRET - Express session secret

✔️ Current Release Details

Main Package Versions

• Chakra UI v1.1.2
• Express v4.x
• Mongoose v5.12.2

Packages Included

• @chakra-ui/react - main styling
• bcryptjs - password-hashing
• body-parser - essential for express
• chalk - colorful terminal output
• compression, cors, helmet - essential middleware
• dotenv - environment variables
• express - essential
• express-session - sessions
• lodash - coding utility
• method-override - enabling methods for the client
• mongoose - database functionality
• nodemon - development quality of life
• passport - authentication
• react-query - client-side api fetching
• validator - formatting validation

📅 Future Release Plans

• More detailed starter code
  • Additional example pages
    • Sign up and log in pages
  • Passport.js authentication
  • Email-encryption and forgot password functionality
  • Full database functionality

🗒️ Additional Resources

Best Practices

• Google HTML/CSS Style Guide
• Google JavaScript Style Guide

Documentation

• Chakra UI Docs
• Express 4.x API Docs
• Lodash Docs
• Mongoose Docs
• React Query Docs

Tools and References

• Can I Use... - Browser support tables for HTML5, CSS3, etc
• Coolors Color Picker
• Font Awesome Icons Gallery
• Google Fonts
• Hero Patterns - Customizable SVG background patterns
• Lorem Ipsum Generator
• Placeholder.com - Free image placeholder service
• Regex Expression Tester
• Scale - Free and customizable vector illustrations
• SRI Hash Generator