Headphone Handler // React.js & Redux.js Capstone Project

doosemavis

Moose Davis

Posted on February 6, 2021

Headphone Handler // React.js & Redux.js Capstone Project

Okay, so this project was most definitely one of those most wild rides in this journey. And it also happens to be the FINAL project in the Flatiron School curriculum. Fingers crossed the assessment goes well! :)

Here's a recollection of the events throughout this project week.
.
.
.

Day 1

Alrighty, it's a new day, new project, but not just ANY project the FINAL project (a.k.a CAPSTONE PROJECT). It's a bit nostalgic but also nerve racking at how daunting this specific project is because of how much there is to do but in such a short amount of time. (Relatively speaking in comparison to the first module project where the ENTIRE project was literally 4 files . . .)

Was able to set up the backend pretty okay with not too many things going wrong. Put in my associations, serializers, scaffolded the appropriate models (2 of them), bing bang boom, BACKEND.

Also was able to use create-react-app in order to also initialize the frontend into existence. But that's all I did for that mostly.

THEN, I connected this project with the master directory of headphone_handler to my GitHub as well. So far so good.
.
.
.

Day 2

New day, new progress b/c any amount of progress is progress.

Following a long with some videos to make sure I'm importing and using the correct information and implementing the correct technical aspects by keeping an eye on the Flatiron Project Checklist.

ES6 Code ✅
Use create-react-app generator ✅
Your app should have 1 HTML page to render application ✅
Redux middleware to respond to state changes ✅
Rails API handles data persistence ✅
Use fetch() for GET and POST data from API ✅
Enter fullscreen mode Exit fullscreen mode

.
.
.

Day 3

This is where the uncertainty and imposter syndrome started to kick in a bit unfortunately. lol, but I kept going!!

Put in quite a bit of JS and React.js code for Headphones and Brands. Decided to take out the Category aspect that would filter both given the time and network errors I had be having. (Hoping to continue to build out this application for my portfolio in the future!)
.
.
.

Day 4

Both day 3 & 4 I ended up being stuck on the same section for quite awhile so I tried to take some more mental breaks to help with keeping a clear mind! (DIDN'T WORK BUT THAT'S OKAY!!)
.
.
.

Day 5

As for the last day, Friday, was able to FINALLY fix my reducer and action problems I've been having in order to render any submitted information from my form to the appropriate headphone list which then automatically knows it's association to their Brand! NIFTY!

ES6 Code ✅
Use create-react-app generator ✅
Your app should have 1 HTML page to render application ✅
Follow repo to setup the generator: create-react-app ✅
Redux middleware to respond to state changes ✅
Rails API handles data persistence ✅
Use fetch() for GET and POST data from API ✅
Client-side handles display of data w/ minor data manipulation ✅
There should be 3 routes ✅
There should be 5 stateless components ✅
Make use of async actions and react-thunk middleware ✅
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
doosemavis
Moose Davis

Posted on February 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related