A clone of Google Keep built with the MERN stack. Replicates the web app on larger screens and the mobile app on smaller screens.

• Create, edit, copy, pin, and delete the following note types:
  • Text notes
  • Checklists
  • Drawings
  • Audio recordings
  • Images
• Batch select notes to copy or delete
• Note editing modal indicates when the note was last edited
• Search filter
• Button to manually refresh the app
• Toggle between grid view and list view
• Toggle between dark theme and light theme
• Google authentication, with Google account information displayed

https://glowing-moonbeam-f2cd62.netlify.app/

• MongoDB

• Node
• Express
• Mongoose
• body-parser
• dotenv

• React
• TypeScript
• MUI
• Axios
• javascript-time-ago
• react-time-ago
• lodash.clonedeep
• lucas-silbernagel-react-audio-recorder
• lucas-silbernagel-react-canvas-draw
• nanoid

• Recoil

• @react-oauth/google

• eslint-config-lucas-silbernagel

• SonarCloud

In order to run this application locally, you must have node installed on your computer. To check if you already have it installed, enter node -v in your terminal. If you do not have node, you can install it here: https://nodejs.org/en/

Once you have confirmed that node is installed, cd into a folder on your computer and run the following command to clone the repository:

git clone https://github.com/LucasSilbernagel/keep-clone.git

Then cd into the root folder and open it in your code editor. For Visual Studio Code:

cd keep-clone code .

Follow these steps: https://docs.atlas.mongodb.com/getting-started

• When adding a connection IP address, click Allow Access from Anywhere or add the following IP address: 0.0.0.0/0
• Make sure to save your username and password when creating a database user.
• For connection method, I recommend either Connect your application or MongoDB Compass. Installing and using MongoDB Compass is optional, but choosing either connection method will show you your database connection string, which you need to save.

In the root folder of your app, create a new file called .env and save your connection string in it with a key of DB. Make sure to replace the password variable with your database user password. Your username should already be populated. The file should now look something like this:

DB = mongodb+srv://demoUser:[email protected]/test

There should be no quotation marks or brackets in this file.

Users will log into the app using their Google account. For the authentication to work, you need to get a Google API client ID. Then in the client folder of the app, create another .env file. In this file, put your Google client ID with a key of REACT_APP_GOOGLE_CLIENT_ID. The file should now look something like this:

REACT_APP_GOOGLE_CLIENT_ID = XXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com

There should be no quotation marks or brackets in this file.

To install all of the required dependencies, run npm run installDeps.

A custom ESLint configuration has been added to the root folder of the app rather than the client folder. As a result, conflicts can occur between the custom ESLint configuration and the ESLint configuration built into create-react-app. In order for the app to run and build smoothly, add the following additional variables to the .env file in the client folder:

SKIP_PREFLIGHT_CHECK = true

DISABLE_ESLINT_PLUGIN = true

To the same file, add the following key and value to connect the React front end with the server:

REACT_APP_API = http://localhost:5001

To start up the app, make sure you are in the root folder and then run npm run dev in your terminal. This should start both the app's server and the front end in a single terminal window, and launch the app in a new browser tab. You are now running the app locally!

Unit tests are written with Jest and react-testing-library.

Use npm run test:unit to run all unit tests, or cd into the client folder and use npm test -- SomeFileToRun to run a specific test file.

Components are visually documented with Storybook.

Use npm run storybook to launch Storybook locally, or visit this link to view the published Storybook page.