https://github.com/onkolahmet/keeper-app

Keeper ~ note taking app using MERN (MongoDB, Express.js, React.js, Node.js) stack.
https://github.com/onkolahmet/keeper-app

express mern-stack mongodb nodejs react react-hooks

Last synced: 13 days ago
JSON representation

Keeper ~ note taking app using MERN (MongoDB, Express.js, React.js, Node.js) stack.

• Host: GitHub
• URL: https://github.com/onkolahmet/keeper-app
• Owner: onkolahmet
• Created: 2020-11-06T16:22:10.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-06T06:07:28.000Z (almost 4 years ago)
• Last Synced: 2023-03-06T04:39:19.857Z (over 1 year ago)
• Topics: express, mern-stack, mongodb, nodejs, react, react-hooks
• Language: JavaScript
• Homepage:
• Size: 319 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Keeper-App

- The scope of this application was to be familiar with how to use MERN stack and CRUD while building a full stack web application.

![what-is-mern-stack-architecture](https://user-images.githubusercontent.com/62245004/98396310-99937000-206e-11eb-9ad1-4799d58e8699.png)

 

## Deployed Version of The App

https://stormy-dusk-01415.herokuapp.com .

## Functionality of The App

- This app is similar to [Google Keep](https://keep.google.com). 

- Users can add notes as many as they wanted.

- They can delete and edit the notes that are taken.

- Additionally editing time will be recorded.

![keeper](https://user-images.githubusercontent.com/62245004/98396762-4b32a100-206f-11eb-8cd3-99c85f3d452c.png)

## What I Have Used

- For the backend server environment, I used [Node.js](https://nodejs.org) with [Express.js](https://expressjs.com) framework to design application layer.

- For the persistence of data, I used [MongoDB](https://www.mongodb.com) as my database to store user's notes.

  - A note schema holds title and content fields.

- For the frontend i used [React.js](https://en.reactjs.org) library to design the client side of the application.

- React hooks especially [useState](https://en.reactjs.org/docs/hooks-reference.html#usestate), [useEffect](https://en.reactjs.org/docs/hooks-reference.html#useeffect) and [useRef](https://en.reactjs.org/docs/hooks-reference.html#useref) are used to increase effectiveness of the application through maintaining(useState), refreshing(useEffect) and reassigning(useRef) amongst component states.

- For deploying the app to [Heroku](https://devcenter.heroku.com), [I followed this article.](https://www.freecodecamp.org/news/deploying-a-mern-application-using-mongodb-atlas-to-heroku).

## Resources I Follow Up

- [Easiest Way to Connect a React Frontend with Node.js](https://medium.com/zero-equals-false/how-to-connect-a-react-frontend-with-node-js-bccb1fb7e2bb).

- [Code splitting](https://en.reactjs.org/docs/code-splitting.html).

- [React Hooks: How to use useEffect()](https://medium.com/javascript-in-plain-english/react-hooks-how-to-use-useeffect-ecea3e90d84f).

## To Use Locally

1. Clone local branch $ git clone -b local https://github.com/onkolahmet/Keeper-App.

2. Run 'npm install' in client folder. 

3. Run 'npm install' in root folder.

4. Run 'npm run dev' in root folder.