Google keep is a note-taking service.
Clone google keep application using react and typescript as a web app.

I tried to clone the details of an actual Google Keep application. By developing this app, I focused on basic concepts of react and typescript, a functional component, and its ecosystem. And I also tried to optimize its performance and write clean and simple code.

You can check demo here.

• Custom note (color, pin, archive, label, todo list).
• CRUD of note and label in real time.
• Filtering of note.
• Draggable todo item.
• Social login (email, google, github).

• React (create-react-app)
• Typescript
• Redux
• Redux-thunk
• Firebase
• immutability-helper
• react-dnd & react-dnd-html5-backend
• material-ui
• Styled-components
• react-masonry-css
• react-transition-group

• Firebase Account
• Your own firebase API

• Create a project(web) and a clouse firestore.
• Setup Sign-in method by enabling email/password, google, and github in Authentication tab.

• Add the following env variables to .env file

REACT_APP_API_KEY={apiKey}
REACT_APP_AUTH_DOMAIN={authDomain}
REACT_APP_DATABASE_URL={databaseUrl}
REACT_APP_PROJECT_ID={projectId}
REACT_APP_STORAGE_BUCKET={storageBucketURL}
REACT_APP_MESSAGING_SENDER_ID={messagingSenderId}
REACT_APP_APP_ID={appId}

Make sure to add "REACTAPP" before variables if you use create-react-app.

• Install npm packages

npm install

• Start dev server

npm start

if you encounter an error which opens new tab for login instead of login popup when using firebase.auth().signInWithPopup() in Chrome, it seems chrome bug. check it out here.

This project is licensed under the MIT License - see the LICENSE.md for details

• Save "isDone" property of a todo item in order to save checked value of a checkbox.
• Update label from all notes when edit a global label.
• Truncate Todo Item.