Note Keeper App with React

Table of contents

• Overview
  • The Project
  • Preview
  • Built with
  • What I learned
• Author
• Acknowledgments

Overview

The Project

Users should be able to:

• Add and Delete notes
• See hover states for all interactive elements on the page
• See more informations and features of a note by clicking on the note
• See appealing animations on most interactive elements
• See the Zoom in animation on the add button when Take Note is clicked
• See layout animation when a note is clicked

Preview

Note.Keeper.preview.mp4

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React Hook
• React - JS library
• Framer Motion - For Animations
• Material UI icons - For Icons

What I learned

I learnt how to handle complex states in react, using useState hook. I also learnt how to use the animation library "Framer-Motion" to make shared layout animation, tbh it took me more time to get around this than it took to actually make the whole App. Some code i'm proud of:

<AnimateSharedLayout>
  {isNoteExpanded ? (
    <>
      <Backdrop handleClose={collapseNote} />
      <ExpandedNote
        collapse={collapseNote}
        deleteNote={deleteNote}
        identity={identity}
      >
        <NoteContent title={title} note={note} />
      </ExpandedNote>
    </>
  ) : (
    <CompactedNote expand={expandNote}>
      <NoteContent title={title} note={note} />
    </CompactedNote>
  )}
</AnimateSharedLayout>

That helped me to create shared animations between two components

Author

• LinkedIn - Peter Ogbonna
• Twitter - @peterintech

Acknowledgments

All thanks to Dr. Angela Yu from The-App-Brewery whose course i went through, that helped me build a solid foundation in React and Web development in general, and to Fireship, whose Modal tutorial helped me create mine which was added in the project, and to the awesome team at Framer for awesome animation library to help bootstrap animations