I wanted to create an CRUD project that would allow me to track my notes from #100DaysOfCode challenge on Twitter.

I followed a tutorial on YouTube where I encountered issues as I wanted inputs from two fields. This was also a challenge when it came to searching within the two fields.

I decided to use Tailwind CSS as it's something I've recently been learning and I really liked how simple it was to create the look of the note component, similar to a window.

After the initial setup of the notes and saving them to local storage, I added tagging functionality. I could now add and remove multiple tags from each note.

With the ability to add tags, I thought it would be useful to filter notes by tag so I added a filter button next to the search.

To create the edit functionality I had to refactor my components so that the form stood alone but also was included in the Note. The Note component contains two further components: the form and the note view. This meant went the edit button was clicked it would show the form and when saved it would show the note view.

• React
• HTML
• Tailwind CCS

1. Save information to a database.
2. Ability to login.
3. Pin notes to the top.

Debbie Dann @debbie_digital on Twitter

Project link: #100DaysOfCode Notes