Keeper App

📒 A replica of Google Keep created mainly using React.js. Took advantage of .jsx files which can be used to write HTML in the body of JavaScript. Further used CSS to style the page. User can add a title and the description of the note and can also delete the note.

Idea

• To Create a simple version of Google Keep app
• User can create a note with a title and cal also delete it afterwards

Technologies

• Used HTML5, CSS3, JavaScript to develop the front-end
• Used react.js to create the components and UI
• Used .jsx files to write HTML in the body of JavaScript

Prerequisite

• Create an account on https://codesandbox.io/

Setup

• Go to the Keeper App repo and copy the URL
• Now, go to https://codesandbox.io/ and click on create sandbox on the top-right
• Click on the Import Project section and paste the URL copied in first app
• Click on Import and Fork button to import the repository
• Now, in the preview section, click on Open in New Window button to open the app in a new tab

Getting Started

• Click on "Take a note..." placeholder.
• The text area gets expanded and a "+" button to add the note also appears. The user now have an option to add a title as well
• When user enters something in the note and click on "+", a new tile of note gets created with a delete button
• A user can also delete the note when they click on the delete button

Screenshots

• Initial Page

• Note Area Expands

• Add Notes

• Delete one note