For those of you who are unfamiliar with these posts, I have a weekly post walking everyone through my week at the Lambda Bootcamp. Hopefully giving you a solid insight of what a week at Lambda could look like! This past week there was not any new curriculum taught as it was project week, or as they call it, build week. We are given a 4 days, Monday through Thursday evening, to build a project chosen from a list of provided ideas. Here's what went down during week 8!
My Team
Our team was rather large for the project, however, we definitely made it work! Starting from beginning to end, we had:
- Web UI Developer for a landing page x 1
- Front-End React Developers to build the application x 3
- Back-End Java Developers to provide access to the data x 2
- Data Science to mold the data for the back-end developers x 3
The Project
The project was an awesome idea, it taught me a lot about React, React Router, and User log-in. Essentially our project was a "song suggester".
Data science provided the back-end Java developers with raw data containing 130k+ songs, and attributes for each song such as: energy, loudness, danceability, etc. We were tasked with grabbing data from the back-end developers, and rendering it on our application that we created.
We then implemented a search bar, to filter through the large sum of songs. We used this to find songs that matched the user's input, and allowed them to select an option to view extended information about that song. This included:
- Song name
- Artist name
- Song duration
- Tracks similar to the selected one
- A chart displaying the data attributes of each song
- A snippet of the song rendered from the Spotify API
The neat part was the data science developers were able to use a model to provide songs that were similar to your selected song's genre. We then displayed that data on a card along with the original song information. Giving the user the ability to discover new music they may have not heard before!
What provided us with more experience with React Router, was providing each card with the option to save that song to a "Saved Songs" tab, where we displayed every song the user saved - similar to a playlist.
From this saved songs tab, we provided the option to either view the song (in the expanded song view, featuring all of the information covered above), or remove it from the playlist tab altogether.
Overall it was a simple idea, but really fun implementation of React. Understanding local storage, routes vs. private routes, and ultimately my first implementation of React in a project environment!
What I learned
While it was only 4 days, I feel I learned a lot during that time, so here is the general breakdown:
Team Communication
When paired with such a large group of individuals, I quickly realized the importance of communication.
- Which person is building which feature?
- Who is handling the majority of the merge conflicts?
- Who is available at certain times? (Considering sometimes we get paired with students overseas)
So many questions come into play, and without effective communication, you're left in the dust! Be sure to inform others of any large changes, mistakes, issues, or conflicts. Over-communication is better than none.
Private Routes vs. Standard Routes
For some, this may be obvious, but I found this concept extremely interesting. As someone who never gave URLs much thought, I never considered the idea to navigate to a different URL (that you may not have access to!)
Private Routes in React Router allowed us to prevent the dashboard of the application being available to a user without an account to our application. I found this so neat, and was a nice new nugget to take away!
Learning to speak other developer's language
This definitely stood out as a challenge, when faced with speaking to data science and back-end developers. While the back-end developers in our group had already taken the front-end curriculum, and could understand what we were attempting to do - it was definitely difficult understanding them!
I learned how important it is to break down each step of the goal you're trying to achieve.
- What data do you need?
- What does the data need to look like?
- How are you using the data?
Some small minor things that I never considered, in comparison to using a free, easy to use API that throws you a JSON object right off the bat. Before that, I had never given a thought to what data I needed exactly. Lesson learned!
Conditional Rendering
I am unsure of how to put this exactly, but in essence, JavaScript is the only language I've worked with, thus far. Being aware that it is a functional language, I quickly learned the power of the if...else thought process. The mindset.
After understanding this concept, actually thinking through problems in an if...else or if...then aspect, really helps solve any challenges in JavaScript. This concept still holds true in this React project. Having to consider the questions:
- What do I want to render?
- When do I want it to render?
- What should happen if it isn't supposed to render?
I feel that each project I've built is giving me a further better understanding of this mindset when coding, and problem-solving.
What's next?
As we dive into this next unit of the curriculum we'll be covering the advanced portion of react, to get a better grip on the aspect of the virtual DOM, harnessing our skills and comfort with using state and props, as well as, introducing Redux into the mixture. Ultimately, I am so excited to continue building more projects as they just continue to be increasingly exciting. Looking forward to the future! For now... It's time to clean up these linter errors!
Check it out!
If you happen to be curious, and would like to take a peek at the deployed version of the project you can view it here:
Be sure to proceed through the registration process to gain access to the application. Do keep in mind the project was built for a desktop view, and not optimized for mobile use. While some bugs still do remain, I am extremely proud of our team and what we were able to build in the short amount of time given!
Top comments (0)