kelsiepaige/sticky-note-app

Simple sticky note web application built with React

Sticky Note App

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

An interactive app that will let users create “sticky notes” on their computer to keep track of to-do items.

The challenge

Users should be able to:

• Create new sticky notes
• Edit notes
• Delete notes
• Search notes
• Use localStorage to keep track of notes

Screenshot

Links

• Live Site URL: Sticky Note App

My process

Built with

• React

What I learned

• How to break the UI into components as I build the component tree (the hierarchy of all the React components working together to render a user interface)
• Identify and name presentational components
• Identify and name container components

Data flow is how your UI handles data, including where state data is managed and how references to that data are passed as props down the component tree. Carefully planning how your data flows between your different components will ensure your UI runs quickly and without any bugs.

To get data flowing through your UI, follow these steps:

1. Determine what will change in the UI
2. Choose a data model to represent dynamic content
3. Assign data management to components
4. Swap in state and props variables to replace static values

Continued development

I plan to continue learning more about React. Right now, I am going back over the basics of JavaScript and testing my knowledge by building challenges from Frontend Mentor with Vanilla JavaScript. After I complete those projects, I plan to rebuild them again in React as full stack applications.

Author

• Website - Kelsie Brown
• LinkedIn - Profile

Acknowledgments

• Skillcrush - Online Bootcamp