Initial commit

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ['airbnb-typescript-prettier'],
+  rules: {
+    // Add overriden rules here
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+      },
+    ],
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+  },
+};

.github/workflows/lintAndTest.yaml

@@ -0,0 +1,19 @@
+name: Lint and Test
+on: push
+jobs:
+  lint:
+    name: Run linting
+    runs-on: ubuntu-latest # Specifies the VM to run the workflow on
+    steps:
+      - uses: actions/checkout@v2 # Checks out the the project repo
+      - run: |
+          yarn install
+          yarn lint && yarn prettier-check
+  test:
+    name: Run tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: |
+          yarn install
+          yarn test

.gitignore

@@ -0,0 +1,10 @@
+yarn-error.log
+/node_modules
+/bin
+.env
+/.env
+
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn pre-commit 

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn pre-push

.huskyrc.json

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "yarn lint-staged"
+  }
+}

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*/**/*.{js,ts,tsx}": "prettier --check",
+  "*/**/*.{js,ts,tsx}": "eslint --quiet"
+}

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

README.md

@@ -0,0 +1,126 @@
+# Boilerplate
+
+This is a simple boilerplate designed to serve as robust template for quickly starting development on a [Typescript](https://www.typescriptlang.org) based [MERN](https://www.mongodb.com/mern-stack) web application.
+
+## Features
+
+- Session based authentication with [Passport](https://www.passportjs.org)
+- Emailing for account verification and resetting password with [SendGrid](https://sendgrid.com)
+- Admin functionality for viewing/deleting/promoting other users
+- Clean authentication pages built with [Material UI](https://mui.com)
+- In memory database testing with [Jest](https://jestjs.io) and [Supertest](https://www.npmjs.com/package/supertest)
+- [AirBnb Typescript styling](https://github.com/airbnb/javascript) with [Prettier](https://prettier.io) and [ESLint](https://eslint.org)
+- [Husky](https://typicode.github.io/husky/#/) and [lint-staged](https://github.com/okonet/lint-staged) for checking linting on commits
+- [GitHub Actions](https://docs.github.com/en/actions) for ensuring linting + tests pass on pushes
+
+## Required tools
+
+These are necessary to build and run the project at full functionality
+
+- Install [Yarn Package Manager](https://classic.yarnpkg.com/en/docs/install/#mac-stable)
+- Install [NodeJS](https://nodejs.org/en/download/)
+
+## Recommended tools
+
+To take full advantage of the linting/formatting, recommend adding the [Prettier](https://prettier.io) and [ESLint](https://eslint.org) VSCode extensions and configuring them as shown [here](https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857#:~:text=Install%20the%20following%20Visual%20Studio%20Code%20extensions) for code highlighting and formatting on save. Skip to the section labeled "Add the following to your VS Code settings.json". To access your settings.json, follow what is linked [here](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file). See [here](https://blog.logrocket.com/using-prettier-eslint-automate-formatting-fixing-javascript/#differences-between-eslint-prettier) for the differences between the two tools and how they work together.
+
+Finally, we also recommend downloading the [Live Share](https://visualstudio.microsoft.com/services/live-share/) extension by Microsoft for improved Collaboration. This allows for easy peer programming on one shared repository instance.
+
+## Setup
+
+### MongoDB
+
+The boilerplate uses [MongoDB](https://www.mongodb.com) as the database to store information for authentication. To have this available for use, do the following
+
+- Create a [MongoDB Atlas Account](https://www.mongodb.com/cloud/atlas/register)
+- Create a [database deployment](https://www.mongodb.com/docs/atlas/create-connect-deployments/) (This should be done by your PM/TL)
+- Get the database connection URI (Get from your PM/TL and add to .env)
+
+Recommend downloading [MongoDB Compass](https://www.mongodb.com/docs/compass/current/) for easy viewing and management of data.
+
+### SendGrid
+
+The boilerplate uses [SendGrid](https://sendgrid.com) to send emails to users in order to verify their account, and also to reset their passwords. To have email functionality available for use, the PM/TL should do the following
+
+- Create a SendGrid Account
+- Register a [Sender Identity](https://docs.sendgrid.com/for-developers/sending-email/sender-identity) (Single Sender recommended for most)
+- Create an [API Key](https://docs.sendgrid.com/ui/account-and-settings/api-keys#creating-an-api-key
+
+### Environment Variables
+
+Create a file named `.env` in the root of the `server` folder and add the following variables with the appropriate values. PM/TLs should provide this to their developers.
+
+```
+ATLAS_URI=mongodb-connection-uri-from-above
+COOKIE_SECRET=any-string
+SENDGRID_API_KEY=sendgrid-api-key-from-above
+SENDGRID_EMAIL_ADDRESS=sendgrid-sender-identity-email-from-above
+```
+
+## Usage
+
+NOTE: Currently, this project is best supported by running CLI commands from a bash/zsh environment. If using Windows, this can be achieved by following what's done [here](https://stackoverflow.com/questions/42606837/how-do-i-use-bash-on-windows-from-the-visual-studio-code-integrated-terminal).
+
+### Installing dependencies
+
+From the root folder, run the following to configure the project and its dependencies
+
+```
+$ yarn setup
+```
+
+If there is any need to reset the dependencies, simply run the following series of commands
+
+```
+$ yarn clean
+$ yarn setup
+```
+
+### Running the project
+
+To run the project, use the following commands from the root folder
+
+```
+# run both server and client
+$ yarn dev
+# run server only
+$ yarn server
+# run client only
+$ yarn client
+```
+
+### Running tests
+
+To run all the tests in the project, run the following from the root folder
+
+```
+$ yarn test
+```
+
+### Running lintint/formatting
+
+To check for linting issues from ESLint and fix what's possible, from the root folder run the following
+
+```
+$ yarn lint
+```
+
+To format the code appropriately with Prettier (don't need this if format on save was setup in VSCode), from the root folder run the following
+
+```
+$ yarn format
+```
+
+## Common Problems
+
+Fill in with problem scenario + solution as they arise
+
+### Incorrect Node Version
+
+If you see an error message similar to this one:
+
+```
+The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "11.15.0"
+```
+
+This means you are using the wrong node version. This boilerplate relies on using node version 14.8. If you are using any other version of node, please use `nvm` to set node version to `14.8.3` as referenced [here](https://blog.logrocket.com/how-switch-node-js-versions-nvm/).

client/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extends: ['airbnb-typescript-prettier'],
+  root: true,
+  rules: {
+    'react/require-default-props': 0,
+    'no-console': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+  },
+  env: {
+    browser: true,
+  },
+};

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

client/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "react-scripts start",
+    "client": "yarn start",
+    "clean": "rm -rf node_modules",
+    "dev": "echo \"Please cd into the root directory to run dev \" && exit 1",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}' ",
+    "lint": "eslint --fix 'src/**/*.{js,jsx,ts,tsx} .'",
+    "postinstall": "echo \"Package install attempted in client directory\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^5.5.3",
+    "@mui/system": "^5.5.2",
+    "@reduxjs/toolkit": "^1.8.1",
+    "axios": "^1.1.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
+    "styled-components": "^5.3.5",
+    "typeface-hk-grotesk": "^1.0.0",
+    "web-vitals": "^3.0.3"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.1.2",
+    "@types/node": "^18.8.3",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "@types/styled-components": "^5.1.23",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript-prettier": "^5.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.4.2"
+  },
+  "resolutions": {
+    "styled-components": "^5",
+    "prettier": "^2.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1"
+  }
+}

client/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="icon" href="%PUBLIC_URL%/hack4impact.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Boilerplate for Hack4Impact" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/hack4impact.ico" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/hack4impact.ico" or "hack4impact.ico", "%PUBLIC_URL%/hack4impact.ico" 
+      will work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Boilerplate</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Boilerplate",
+  "name": "Hack4Impact",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: