The Path to MusicList

On Friday I mentioned that I'd put together the initial plan for the first tutorial series that I'm going to run on CloseBrace, and that it was going to be a big one (40+ tutorials!). I also promised I'd tell you more about it on Tuesday. Well, it's Tuesday, so let's do this thing.

First off, the expected name of the series is going to be "Five Minute React" and will feature videos of roughly five minutes in length with accompanying text. The goal is to keep things in bite-sized pieces so that it's not too overwhelming, which is important, because we'll be covering a lot of stuff.

The series will actually encompass more than just this one project, eventually, but for now it'll be all about building a specific site, MusicList.com, from the ground up. MusicList will allow users to create an account, and then access a database of musical artists, which they can save to their profile in order to receive updates via email (and possibly other means) when an artist they like releases something new. The entire thing will run on a React front-end talking to both internal and external APIs for data.

It's a simple site, but it will provide insight into a whole host of complex topics, which is why we're going to divide it into bite-sized chunks. We're going to start at the extreme basics—installing and configuring a development environment—and move all the way up through deployment. Below, I'm going to list the entire plan I have so far. It's probably missing some stuff, but that's fine; I'll be working with plenty of lead time. My goal is to launch the site with the first five or so tutorials finished, and then post at least two per week moving forward. We'll see how that goes!

Here's the current tutorial list (warning: it's a big list). Let me know what you think!

  • Installing Sublime Text
  • Configuring Sublime Text
  • Installing Node
  • Intro to NPM / Yarn
  • Installing MongoDB
  • Set up Github
  • Set up Continuous Integration (maybe)
  • Creating an Express skeleton
  • Express: Explaining Routes & Views
  • Express: Data Modeling w/ Mongoose
  • Express: User Authentication
  • React: Pre-Requisites Overview (Webpack, Babel, etc)
  • React: Hello World (mostly Webpack config)
  • React: Simple Jest Testing
  • React: My First Component
  • React: Introduction to Props
  • Styling with SASS
  • React: Managing Store w/ Redux
  • React: Component Containers
  • Express: Building a Basic API
  • Express: Creating User Authentication Endpoints
  • React: Let's Talk Promises/Async
  • React: Sagas (maybe)
  • React: Displaying Data from the API
  • React: Sending Data to the API
  • React: User Registration and Auth (probably multi-part)
  • React: Creating a Basic Admin UI
  • Express: Creating a Simple News System API
  • React: Creating a News System Admin UI
  • React: Displaying News
  • React: Connecting to an External API
  • React: Search Artists UI
  • Express: Saving Artists to User (multi-part?)
  • React: Saving Artists to User UI
  • React: List Artists by User
  • Cleaning Up and Testing
  • Express: Lock It Down!
  • Deploy: Choosing a Host
  • Deploy: Configure Domain
  • Deploy: Configure Nginx Proxy
  • Deploy: Configure HTTPS
  • Deploy: Building for Production
  • Deploy: Publishing to Digital Ocean
  • Deploy: Run It!
  • Deploy: Publishing to Other Hosts (multi-part)
  • Wrapup & Next Steps

Phew ... that's a lot of work and a lot of ground to cover. I'll do my best to get you guys through it. Looking forward to getting this site launched and getting started.

Author image
I'm the founder, lead developer, writer, and jack of all other trades (for the moment) for CloseBrace!
Providence, RI, USA Website