Coding Bootcamp Week 8/13: The DOM and ReactJS + Holiday Break!
“It’s like I always say, Svelte is for Christmas, React is forever.” — Sam, a wise philosopher
On Imposter Syndrome
This week took a huge impact on my imposter syndrome for some ungodly reasons. On back-end, there’s only so much you can visually see to really judge yourself. Elegant and dry code (that works) is really all you need.
However, on front-end, there’s this visual aspect to it where it gets real messy — literally and figuratively. Personally, I don’t think my design taste/style is inherently bad, but I worry it’s not good enough. My cohort friends saying my design is good is proof that I’m overthinking it, but I still think a little overthinking is good, because it makes me strive to improve it, but then again, I believe in the saying, “If it ain’t broke, don’t fix it.”
But hey! We’re not learning to be kickass web designers, we’re learning to be web/software developers here. What matters is I am able to bring my design plans into code.
(See the mental gymnastics I have to put up with everyday!?)
What we Learned This Week
Out with back-end, in with front-end! Our mentors promised us there will be no more back-end for weeks to come as we enter the front-end block of the bootcamp.
- The DOM + Accessing it
- Intro to ReactJS and React Components
After everything we learned this week, I still can’t help but wonder how to marry what I know now with ReactJS and the DOM with what I know in back-end. I spent yesterday and today watching how to deploy React apps on Heroku!
My Front-end Projects
Pair programming wasn’t possible for me for this week, so I had the chance to work on projects alone and had the absolute freedom to do things I would want to include in my portfolio.
📌 Business Card Generator
During our introduction to the DOM, we were tasked to create simple apps that require form validation — no pun intended of course.
We were given the option to create either an account creation page, horoscope generator, meme generator, or business card generator. I picked the business card generator! Although, to be completely honest, I almost picked the meme generator.
Features
- All fields required
- Input field changes colour
- International number field (still trying to work out how to utilise the country code feature, currently only able to get the value of input!)
- Email field only accepts emails
- Pick your theme!
Future Improvements
In the future, when I am a bit better versed with CSS, form validation, and coding in general, I would like to improve this app with the following:
- Actually get the output of the international number field.
- Make the card available for download.
- More theme and design options including sizing options. Have a preview for these as well before generation.
📚 Book Manager React App
For Thursday and Friday, we had a 2-day sprint where we had to use our ReactJS knowledge so far. Personally, I had a hard time grasping ReactJS for a solid 30 minutes when I started working on my app. Fortunately it finally clicked!
We were tasked to build any small react app we could think of making. As a huge bookworm, my number one need is a nice book tracker/manager. I created one months and months ago but the features were lacking. I decided to solve all the issues I was having with the knowledge I have now.
Features
- add a book by inputting the title and author name. Add Book button does nothing when input fields are empty.
- Reading List shows all available books in a checklist format. Ticking the box strikethroughs the label.
- Add to Completed Books button moves the ticked books in the Completed Books section at the bottom. Delete button just removes the book.
- Message shows when reading list is empty.
- Book Statistics update in real time as you change things.
- Completed Books can be sorted by title, author, date started, and date completed. Date started is recorded when the book is added into the list, and date completed is recorded when the book is moved to the completed books section.
- Clear Completed button clears the completed list and resets the Books Read statistics.
- Message shows when completed books list is empty.
I started with a Figma layout/design on how I want it to look like. While I was creating this, I was giggling nervously to myself and saying, “This is too ambitious.”
I was planning away, with no regard to whether I could actually write the CSS code. But another wise philosopher once said, “Shoot for the moon. Even if you miss it you will land among the stars.”
I’m not sure where I landed, but it’s somewhere out there.
Future Improvements
“It was only a 2-day sprint, how did it end up like this?”
— Mr. Brightside or something, I don’t know, I don’t know the words.
Hopefully, when I know enough about ReactJS and its hooks, I might be able to improve this app with the following, and make it the best app for book readers:
- Have a Currently Reading section.
- Use Google Books API and have a pop-up div with the book info when you click on a book title in the list. Maybe also allow the user to input some notes or reviews and rate the book here (or there could also be another section dedicated to ratings and reviews!)
- Favourite quotes section with info like book and page number.
- …and so much more.
But before all that, I first would like to fix the issue where it doesn’t seem to work properly in browsers other than Google Chrome. Also I would like it to be more responsive!
Holiday Break
We are now on our holiday break for 3-weeks! So there will be no coding bootcamp blogs for the next 3 weeks (obvs), but I will still try to write something coding related.
It was a bit awkward to finish in the middle of a block, but the silver lining is that now we have more time to explore ReactJS (and the rest of what we’ve learned) in our own time. I see it as a great benefit because when we start our Project phase in January, things won’t be too new.
I’m looking forward to spend my holiday with my family, play some games on my Switch, enjoy the festivities, and code once in a while!
Happy holidays, everyone!
Northcoders Bootcamp Series
- Week 1: Back to Basics (Not Really)
- Week 2: JavaScript Fundamentals + Brain Soup
- Week 3: More JavaScript Fundamentals + Recursions and Object-Oriented Programming
- Week 4: Async, Data Fetching, and Promises
- Week 5: First Week on Back-end
- Week 6: Second Week on Back-end
- Week 7: Final Week on Back-end
- Week 8: The DOM and ReactJS + Holiday Break! ⬅ YOU ARE HERE.
- Week 9: New Year, New Tech
- Week 10: Building the Frontend and Why I Found it Hard
