This short article serves as a companion piece for the Five Minute React series of tutorials, through which users will create an entire application called MusicList. All Five Minute React tutorials contain both full video on YouTube and full text on CloseBrace. The goals of the series are straightforward: to teach users who are familiar with JavaScript how to work with Node, Express, and MongoDB on the back-end, and how to work with React and Redux on the front-end.

The Five Minute React approach is summed up in its name. The goal is to keep the videos as close to five minutes in length as possible, so as not to overwhelm the user with information. A few videos creep into the 7-or-8 minute range in order to completely encapsulate a lesson instead of splitting it over multiple tutorials, but most fall very close to the five minute ideal (note that video times may look slightly longer due to approximately 30 seconds on intro/outro). In most cases the text content of the video and article are identical, though small bits of humor or instruction that only make sense in one format are omitted in the other format.

MusicList itself is a simple application. It will contain basic user authentication (registration, logging in and out, password reset, etc …), and will allow users to look up bands and albums from a public database and add them to their public user profiles, thus building a list of music that they like. Additional features may be added to the site in future tutorial series.

By creating this application, users will learn about concepts like setting up their development environment for React development, basic MongoDB administration with Mongoose, basic API design and RESTful implementation, app state management, connecting to exterior APIs, and more. Attention will also be given to production deployment, including tutorials for how to deploy to several popular cloud services (Digital Ocean, Heroku, and others).

Having trouble? All working code for MusicList is available in a GitHub repository, checked in as new tutorials are completed. The repository tends to run a couple of tutorials ahead, as they're developed in advance in order to provide some padding in the schedule in case of emergency. Additionally, comments can be left on either CloseBrace or YouTube and will be answered as quickly as possible. For enhanced support options (and other bonuses), please consider signing up for CloseBrace Pro.

Development on MusicList is slightly circuitous; in order to cover a variety of topics and help users understand not only what's being done, but why, diversions are sometimes necessary. Additionally, problems are sometimes intentionally introduced, in order to be resolved in future tutorials. The coding style is relatively verbose, sometimes eschewing the most compact approach in order to better illustrate what the code is doing. Often this code is DRYed in later tutorials.

Five Minute React tutorials are released on Tuesday and Thursday of each week. If you'd like to be notified of new content, check out our weekly newsletter. It's a short wrapup of site development, tutorials, and anything else that happened on CloseBrace that week, and contains no advertisements. We will never sell your email address to any other company.


Image Copyright: dmitryguzhanin / 123RF Stock Photo