Voyage: A Musical Adventure Traveling Through the Web
This is a sequel, or part 2 if you will, to my (hopefully) ongoing series of voyage cohorts through Chingu (https://medium.com/chingu). Special thanks to Chance Taken yet again for creating a beautiful community that brings together learners, teachers, and coders with passion, determination, and a strong collection of creativity.
Entering Voyage 4, I was hopeful for an active, motivated group to build an awesome project. Luckily for me I got grouped up with an incredible team consisting of Mary, Raymond Cox, and Oliver De La Via. Each brought their own flavor to our app and not only helped put our project together, but also taught me many things along the way. A large part of the success behind the Chingu Cohort teams is from great teamwork and communication. Through this, I’ve become a much better developer, but also a more efficient teammate and strengthened my skills in writing pull requests, code reviewing, pair programming, and project planning through an agile process.
Similar to previous cohorts, we had about ~7–8 weeks to brainstorm an idea, and put it into fruition.
Pre-Sprints: Decide on a project as a team
Code Sprints 1–End: Everybody is assigned tasks to code
- Initial setup
- Wireframes
- New features/implementations
- Refactoring/cleaning up code
- Styling for consistency
- Optimizations
Conclusion: Final polishes, fix bugs, hosting app onto Heroku and making it available to public
Things I learned along the way
In this voyage I definitely pushed myself to learn a lot of new things and implement them into our app to gain experience. Tutorials help a lot (youtube and medium articles in particular), reading through documentation has become a skill of mine, and of course Stack Overflow yet again coming to the rescue when needed. Aside from that, I learned a lot as well through some Udemy courses I purchased (most are only ~$10, but you can easily find free ways to learn the same material if you take the time and effort). Some of the new things that we were able to incorporate into our app that I learned along the way include:
- Solidifying knowledge of RESTful routing
- Using axios
- Setting up webpack for bundling code, implementing hot module reloads, and utilizing optimizations for production-ready code
- Solidifying my knowledge of React and React-Router
- Using redux
- Using SASS mixins
- CSS Grids (thanks Raymond Cox for carrying the team on your back with this)
- Using passport for authentication
- Solidifying knowledge using NoSQL DB with Mongo
some tl;bdr (too long; but do read)
- If you’ve never worked in a team setting before, JOIN CHINGU. The experience is everything you never knew you needed.
- If you’ve never worked in a team setting before, do yourself a favor and try to learn Git and GitHub beforehand. It’s very integral in the success of your team’s production and efficiency, and I highly suggest getting a bit used to it beforehand rather than going into it blind. You’ll definitely still learn along the way; everybody does, don’t worry! Having some knowledge and experience though will help you avoid completely BREAKING all of your code and not knowing why.
- If you’ve never worked in a team setting before, PAIR PROGRAM. If given the chance, do it. Not only will it level you up as a programmer much faster than learning everything on your own, but you will be more productive working with another programmer, you’ll learn how other coders think, and you’ll gain incredible experience spot checking another person’s work in real time. I’m a huge proponent of this and highly suggest your team try and do pair programming sessions throughout your cohort.
- If you’ve never worked in a team setting before, split up your work accordingly! It’s a team effort, and you can’t expect to do everything yourself. Sure if one member is more experienced they can, and probably will, make more commits, add more lines or code, and in general do more work. But that doesn’t mean they’ll do everything for you. Tasks are assigned for a reason. To force you to put fingers to the keyboard and make meaningful contributions to your team’s project. If you know something really well that your team wants to implement, do it! OR, offer to help another teammate do it if they want to learn how to incorporate it. Stress is REAL and sometimes you just need to take a step back and let your teammates aid you in your process.
- If you have worked in a team setting before, do all of the above anyways. It will make you a better programmer, teammate, and overall person knowing that you can effectively communicate with others while learning and growing as a developer through both technical and soft skills.
That being said, I had a wonderful experience with this past Voyage and was lucky enough to even have one teammate located close enough to meet in person. This led to us attending a local coding meetup and continuously pair program in-person. The Chingu community is an amazing resource to be a part of and have access to. I hope everybody reading this, whether you’re completely new to coding, already working and just trying to sharpen your skills, or simply want to be a part of an ecosystem built upon by ambitious developers, has been, or will be, a part of Chingu.
About Gecho
Our web application is a video-music player that utilized YouTube’s API, built with the MERN stack. As a guest, you can view music-related content based on youtube searches (with a few bugs dealing with VEVO artists channels). As a user, you can create a profile and save your videos for viewing at a later time. We’re currently in the process of implementing playlists to be included in the future as well. When signed in, you can also edit your credentials including your name, username, email, location, and choose an avatar for your profile. We’ve also incorporated themes that a logged in user can choose from.
You can find the YouTube API here
You can find the source of icons used here
Here are some gifs that illustrate the above:
The MVP for Gecho is complete and live on heroku! We’ll continue to implement features and fix up some bugs, but it’s completely open source so feel free to contribute or create issue cards if you’re interested!
If you’d like to try out the features as a user without creating your own, use the following:
username: chingu
password: geckos32
You can find a live demo here
You can find the repo here
Until next time — Happy Coding!
