It’s been a minute. Again. Today I want to catch up on a project I’ve been working on since late November. First off though, in the past few months my efforts have been split among these buckets:
- Leetcode
- Personal project work
- General data structure + algorithms studying
The project I’ve been working on since late November was meant for me to build that would give me an introduction into python. The back end is python (django rest framework), and the front end is react.js (with node).
End-to-end features I’ve been able to implement include:
- CRUD ops
- Ability to tag quotes
- Displaying quotes by selected tag
- Quote scraping (not a feature, but a one off)
- Bulk-deletion
I worked on bulk deletion for the past week and want to present a snapshot of the before and after.
Below is what the before view looked like.
When I first started this project with a handful of quotes, having an edit and delete button underneath each quote seemed fine, but when the list grew long, it started to look a bit bloated.
With this in mind, I wanted to:
- create a slick way to bulk delete quotes
- remove the edit and delete buttons from underneath each quote
The below is what I came up with.
It’s nothing fancy. I put a single delete button to the left side, which toggles checkboxes. After at least one checkbox is clicked, the bulk delete button at the top of the list becomes clickable, allowing you to delete the selected quotes. Overall, it’s a cleaner visual solution.
I also moved the edit button to the side. Edit works nearly the same way, except it operates with radio buttons (because you can only edit one quote at a time).
Now that I have most of the minimum viable functionality working, I’m going to work on more front end presentation to make this look more visually appealing. My plan is to present these quotes in cards with atmospheric backgrounds.
Till next time.
Wayne Codes 