PORTFOLIO UPDATER
A tool to add entries to this portfolio.
CONTEXT
I wanted to make something out of one of this semester's development workshops and chose to experiment with Express and SQLite3.
Upon seeing that the example project was an application for blog posts, I thought I could adapt it to fit my portfolio.
GIT REPOSITORY
I made use of a Git Repository to keep track of changes alongside a README with installation instructions. I also had to make a .gitignore with Git Bash to ignore the node_modules folder.
DEVELOPMENT
THE SUBTITLE
After setting it up the example project and getting it running, I wanted to try adding an extra input for a subtitle. This was to test and see if I could get multiple headers like I do on my current porfolio.
I had to search through multiple files to add it, but eventually I was able to make a post with a subtitle.
STYLING
I grabbed my portfolio's index, as well as a blank project page to make a special version of my portfolio made to test the tool, keeping the navigation to only one example project page and a entry creation page.
Getting the styling to work was confusing at first, but then I figured out all CSS and media files had to go in the public folder.
DELETE ENTRY
Now that I was able to post entries with the correct styling, I wanted to be able to delete them. After consulting ChatGPT and Claude, it turned out I had to install a new dependency to get access to the DELETE method, as HTML only supports POST and GET.
By installing method-override and tinkering around with ChatGPT and debugging in the console, I was able to get the delete button to work. I needed to add a hidden input with the name "_method" so method-override would recognize it.
I also installed an SQLite Viewer extension in VSCode to check the actual database and make sure things are working.
EDIT ENTRY
Adding an EDIT button was a lot simpler than I thought. Turns out method-override is also required for PUT methods, which is needed to edit the values. I had a similar error issue with the delete button, which I once again resolved by placing "_method" hidden input.
REFLECTION
Messing with Express and SQLite3 was very fun! I wish I'd had more time to experiment and make something cooler for this semester. I can still play around with it in the future though, and I'd like to see how I can add things like extra inputs on the entry creation page, or links to images even.
I'd like to use this on some personal projects too, it's very exciting!