How to Write a Single Page Application

Learn How To Build a Professional App for the Web Using React, Redux, & React Router 4

The #1 Skill for Front-End Developers & Front-End Engineers

The #1 skill for Front-End Developers and Front-End Engineers is knowing how to build scalable Single Page Applications. That's because you're developing everything the user sees, touches, and feels. Couple that with knowledge of what modern browsers like Chrome for Android can do and you'll be able to create some amazing stuff.



Learn How React, Redux, and React Router 4 Work Together

There are lots of tutorials on how to use React and Redux. But this course shows you how React, Redux, and React Router (version 4, the latest) work together to build a professional Single Page Application.

I'll set you up with everything you need, including professional boilerplate so that you can create a well-architected application for yourself, a client, or an employer.



Step-By-Step Instructions On How to Develop a Real Professional App for the Web

In order to learn how a professional app for the Web is developed, you need to create a REAL app. In this course, you will create an app I call Voice Record Pro, a Web-based audio recorder that makes use of the HTML5 MediaRecorder API. You will receive step-by-step instructions on how to develop the main functionality for this app.

You'll also learn how to get your app out onto the Web in a matter of seconds by using Firebase, one of the best Backend As a Service platforms on the Web today.


Learn How to Develop In Components, the Modern Way of Creating Interfaces

Front-End development and modern UI engineering have come a long way. Today, we craft user interfaces by thinking and developing in highly reusable components. This is THE way we develop front-end interfaces today.

Get up to speed with this approach because this is the new way of crafting UI (and you're going to love it).



Skin Your App With Material-UI & Learn How To Use Pre-Made Components


If you're like me, designing your app can be a challenge. That's because good design is hard. But you don't have to be a professional designer to give a professional look and feel to your app. You can use pre-made libraries like Material-UI to skin your app.

In this course you'll get to see how I customize Material-UI components so that you can get the look and feel that you like.



Just Say No to Boring To-Do Tutorials

I created this course because I love the Web and because I wanted to show people how to develop real apps for the Web. Simple To-Do tutorials aren't sufficient for developers who want to know how a professional app is architected.

I also understand how painful it is for teams to write separate apps and maintain separate codebases for multiple platforms (IOS, Android, Web). Sometimes you have to do that, but oftentimes you don't! The best thing we can do is to help move the Web forward so that it remains a strong and viable option for mobile applications.

When I started developing Single Page Apps for clients, I didn't have the right foundation and boilerplate to start with and I spent A LOT of time researching while setting things up. I wish I had a proper guide on how to architect things correctly for my clients. Now, I know how to do this and I'm sharing my knowledge with other developers so that they can have an easier time developing their apps.


Companies Are Looking for Developers Skilled In React & Redux

I work in the tech industry and many companies are transitioning their front-ends to use React & Redux.

Becoming proficient in React & Redux will put you on the cutting edge and help you get the best jobs out there. Trust me, you don't want to work on crufty front-ends built with Jquery and spaghetti-code. That's just a recipe for pain (I know, I've been there).

Have more fun developing by learning React and Redux, and see a whole new world open up for you.


Course Curriculum

Intro

  • Course Welcome and Overview
  • What You're Going to Build In This Course
  • Prerequisites
  • Course Resources
  • Course Outline
  • About the Instructor

From Zero to Deploy

  • Get the Boilerplate and Serve Locally
  • Create an App on Firebase
  • Firebase Initialization
  • Firebase Deploy
  • Initialize Git

React Crash Course

  • Why Use React
  • Definition of a Component
  • Class Components vs. Presentational Components
  • Containers vs. Non-Container Components
  • JSX
  • Props, Prop Types, Default Props
  • Lifecyle Hooks
  • ES6 Modules - Importing & Exporting
  • Styling Components
  • Managing Internal State
  • Wrapping Third Party Components

Redux Crash Course

  • Why Use Redux
  • Redux High Level Review
  • Redux Main Packages
  • Two Redux Functions You Must Know
  • Redux Directory Structure
  • Redux In Action - Opening & Closing the Left Nav
  • Actions
  • Reducers
  • The Store & Middleware

Navigation with React Router 4

  • What You Will Develop In This Lecture
  • Update Your Code For This Lecture
  • The Web Link Is Powerful
  • React Router 4
  • HashRouter vs. BrowserRouter
  • Coding Step 1 - Add the Main Tabs
  • Coding Step 2 - Add the Main Routes
  • Coding Step 3 - Keep the URL In Sync
  • Coding Step 4 - Highlight the Right Tab When Component First Mounts
  • Deploy to the Web

Record Audio with the MediaRecorder API

  • What You Will Develop In This Lecture
  • Update Your Code For This Lecture
  • The MediaRecorder HTML5 API
  • Coding Step 1 - Add the Microphone Button
  • Coding Step 2 - Add the Timer
  • Coding Step 3 - Record the Audio
  • Coding Step 4 - Save a Recording
  • Deploy to the Web

Develop the Audio Playback View

  • What You Will Develop In This Lecture
  • Update Your Code For This Lecture
  • Coding Step 1 - Route to the Recordings View After Saving
  • Coding Step 2 - Create the List of Recordings
  • Coding Step 3 - Display the List of Recordings
  • Coding Step 4 - Provide a Unique Title for Each Recording
  • Coding Step 5 - Store Recordings to IndexedDB
  • Coding Step 6 - Retrieve Stored Recordings From IndexedDB
  • Coding Step 7 - Add the DetailsView Part I
  • Coding Step 8 - Add the DetailsView Part II
  • Coding Step 9 - Add the DetailsView Part III
  • Deploy to the Web

Your Instructor


Mark Muskardin
Mark Muskardin

Mark is a UI and Web Engineer located in the San Francisco Bay Area. He believes in the promise of the open Web, the most ubiquitous software runtime on the planet. So he works a lot with Web technologies, and teaches others how to do the same.

Over the last decade, he has developed applications for many high profile Internet companies (Fitbit, Trulia, and Ebay to name a few). Working in conjunction with expert teams of Software Engineers, Designers, and Product Managers, he has had the opportunity to create responsive, fast and compelling UX-driven Web applications for many different products.

Currently, Mark is specializing in Web and Mobile front-end applications built with React.js and its associated ecosystem of related technologies. It's an ecosystem he believes holds a lot of promise for Web Engineers.


Frequently Asked Questions


Who is this course for?
This course is for Front-End Developers or Front-End Engineers who want to learn how to develop a scalable, professional, and maintainable Single Page App for the Web.
When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.

Get started now!