Finished my first JavaScript module and made KittyCart

#javascript #webdev #beginners

My First JavaScript Module on Scrimba
I completed my first full JavaScript module on Scrimba yesterday and I feel so proud and accomplished that I stuck with it even though it was challenging. The module culminated in the creation of a shopping list app connected to a database, which I affectionately named "Kitty Cart."

The Challenge of Integrating Firebase
One of the most challenging aspects of the project was integrating the database using Firebase. This was my first time interacting with a database in any way (besides as a client). The Scrimba lessons taught me how to set up an account with Firebase and get started with my first database. I had to learn new JavaScript to integrate the database into my app and store and delete items from the database. Despite being challenged by learning a ton of new JS, this part turned out to be one of the most rewarding aspects of the project, as it allows me to share the app with my partner in real time. This real-time sharing feature has proven incredibly useful, especially since I often do an online grocery order while at work and can't consult the list on the fridge. I'm excited that I'm making apps that I can use every day. My first few projects were fun but weren't as immediately useful as this one.

Personalizing Kitty Cart
To personalize my app and make it stand out, I made several modifications to the original project from the course. I changed the color scheme using www.paletton.com to help visualize and choose colors that would look good together. I replaced the default image with a new mochi kitty, giving the app a playful and distinctive look. I also added functionality to allow users to enter items into the list using the enter key, in addition to the traditional button click. To prevent accidental deletion of items on mobile devices, I implemented a double-click deletion feature, which has proved to be quite handy.

Improving Look with CSS
Another enhancement I made was to the hover-over transitions, using CSS to improve the visual experience. By adding transition: background-color 0.3s; to the CSS, I was able to create smoother and more visually appealing transitions when hovering over items on the list.

Challenges with Hosting and Favicons
I was elated after finishing the very last lesson for this app and was excited to get it online to show my friends. Unfortunately, after downloading the project files and opening them up on chrome I saw that the project didn't work at all. The input and button were visible, but the button didn't respond when clicked. I was so ready to relish in my moment of victory and to have that taken away made me frustrated and all worked up. I have recently made a rule for myself born from other frustrating projects: take a break, take a walk, or eat lunch before debugging. After walking away for a bit and getting something to eat I was able to solve the problem very quickly once I returned. I used the inspector to check for any issues with my code and saw a few error messages. I didn't know what they meant but copy and pasted them into chatGPT which suggested hosting with a live server was necessary. I downloaded VS Code's Live Server and it turned out to be very easy to use and it solved my problem quickly. I never had an issue getting my other small projects to work on my computer so I wonder if adding the database is what made this one need a live server to work.

The other challenge I came across was with favicons. It was my first time working with them, and I wanted to customize the default favicon provided by the project instructor. I used a favicon generator tool to create a new favicon, but after adding the new files to my project, the favicon wouldn't update on my page. I learned that browsers cache favicons to save memory, so I had to clear the browser's history and cache to see the new favicon. It was a triumphant moment when I got the last tiny piece to work the way I wanted to.

Reflection
I highly recommend Scrimba as a learning platform for front end web dev. I like how they break things down into little steps and have you work on each piece to build muscle memory. As a former teacher I know that this is great pedagogy and a sound way to promote long term learning. I also really like the way you can work alongside your instructors and write code in the scrim. I've never seen an interactive screencast before and it's awesome! I would have loved to have a similar technology when I was a teacher.

I don't feel fully confident with my ability to add a database on my own yet but my next challenge is a solo project on Scrimba that has you use (you guessed it!) a database. This is another great thing Scrimba does- teach you something and then challenge you to use the new thing to do a little bit more on you own right after.

I swear I'm not sponsored by Scrimba but I would love a free month if anyone is listening ;)

Questions
Being totally new to databases in general, I was a little lost when the instructor was explaining some of the security nuances. There was a part about something with the first 30 days and then they showed how I could change the rules for read and write to true. They warned that this would make it so anyone could edit my database so I've avoided posting the link to my project anyhwere. I get this warning when I open up firebase:
"Your security rules are defined as public, so anyone can steal, modify, or delete data in your database".
I saw a possible solution was to change the read and write rules to "auth != null" but when I do that it breaks my app. I think I need a way to authenticate users with a login and password but I'm not sure how to do that yet.

Next Steps
I'm going to attempt the next solo project that utilizes databases but I'm mostly excited to wrap up this module and start the next one called Essential CSS Concepts. The first project is to build an NFT site. I love making things look pretty so I'm ready to dive in!