This is a simple boilerplate designed to serve as robust template for quickly starting development on a Typescript based MERN web application.
- Session based authentication with Passport
- Emailing for account verification and resetting password with SendGrid
- Admin functionality for viewing/deleting/promoting other users
- Clean authentication pages built with Material UI
- In memory database testing with Jest and Supertest
- AirBnb Typescript styling with Prettier and ESLint
- Husky and lint-staged for checking linting on commits
- GitHub Actions for ensuring linting + tests pass on pushes
These are necessary to build and run the project at full functionality
- Install Yarn Package Manager
- Install NodeJS
To take full advantage of the linting/formatting, recommend adding the Prettier and ESLint VSCode extensions and configuring them as shown here 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. See here for the differences between the two tools and how they work together.
Finally, we also recommend downloading the Live Share extension by Microsoft for improved Collaboration. This allows for easy peer programming on one shared repository instance.
The boilerplate uses MongoDB as the database to store information for authentication. To have this available for use, do the following
- Create a MongoDB Atlas Account
- Create a database deployment (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 for easy viewing and management of data.
The boilerplate uses SendGrid 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 (Single Sender recommended for most)
- Create an [API Key](https://docs.sendgrid.com/ui/account-and-settings/api-keys#creating-an-api-key
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
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.
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
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
To run all the tests in the project, run the following from the root folder
$ yarn test
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
Fill in with problem scenario + solution as they arise
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.
TODO: Make sidebar go to icons only on smaller window TODO: Success / Error on Donation Creation TODO: Give email in donator new person dropdown TODO: Check referneces (yeon changed) TODO: Add Current Fiscal Year / Current Calendar Yr TODO: Fix popup menu CSS TODO: Add Communication Confirmation Popup TODO: Add Confirmation Past History TODO: Fix Reports Sidebar TOOD: Add Login Ability TODO: Add Forgot password ability TODO: fix lanague (donor / donator vs sposor, etc...) #TODO: Report Page, add sponsor vs donor vs grant TODO: Add All Donors to Reports TOOD: FOr Reports ALl Donations add type (ie donation vs grant vs) TODO: For Reports all Donations, fix css TODO: For Reports all donations, only show donations + donors in range TODO: make Text Bigger on reports TODO: compress pdf TODO: Fix bug with double cliking time interval TODO: Dont visit pages when not logged in TODO: Remove Console.logs TOOD: Move Logout button to at most height of window TODO: enter to login TODO: Get rid of old routes TODO: Show Notes for Donation + Edit Feature TODO: Update Report to be fiscal year + add date range feature TODO: Finish Confirm Communication TODO: Add "Ack" btn to add email automaticlaly TODO: Add Table for Donations to Ack TODO: Fix Modal UI TODOO: "Add All Btn" to Email unack TODO: Add Notes When You Create New Donor TODO: Fix UI ON report Page TODO: Add Donor Emails to Reports Page on Printout TODO: update website to show average donation by month TODO: Fix double click TODO: Make Graph, use data from report TODO: Fix Average Donation (Fiscal) in Communications Page TODO: Make preview not editable in comms page for "search donors" TODO: make groups update automatically after you make a new group TODO: Confirmation on Password Reset