Voice Record Pro Snapshots
Get Instant Access!

The #1 skill for Front-End Engineers is knowing how to develop scalable Single Page Applications.

What are Single Page Apps? They're blazing-fast apps built for the Browser. They can render on any device since they're designed for the Web (the most ubiquitous software run-time on the planet).

Why is knowing how to build Single Page Apps an extremely valuable skillset for Developers? Because you're building everything the user sees, feels, and touches while leveraging the distribution power of the Web.

But how do all the moving pieces of a well-developed app work together? That's what you'll learn by taking this video course.

Mobile browsers like Chrome for Android are advancing very rapidly. Now is the perfect time to enhance your development skills by learning how to write Single Page Apps.

This is what you'll get by taking this course:

Transform from a Front-End Developer
to a Front-End Engineer.

Voice Record Pro List View

In this course you'll learn how to develop Voice Record Pro, a Web-based audio recorder.

Voice Record Pro was developed using React, Redux, React Router 4, & Material-UI.

By showing you how I developed Voice Record Pro, you will learn how to think and develop in highly reusable components, the MODERN way of constructing front-end UIs.

Heard of React? Heard of Redux? Of course you have. That's because companies are searching HARD for these skills. But there's a lot to learn! This course is designed to make you proficient fast.

If you're a Front-End Developer who wants to become a Front-End Engineer, or if you want to develop an application for the Web, this course is for you!

Voice Record Web App Badge

Get Step-By-Step Instructions On How to Develop a Professional App From An Expert

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 receive step-by-step instructions on how to develop a professional app that scales and is highly maintainable.

Sublime Text Editor Code Snapshot

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

Material-UI Snapshot

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 want.

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

React-Mic NPM page snapshot

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).

When you learn to think and develop in components, you can even go as far as PUBLISHING your own components to share with the world.

Companies Are Looking for Developers With These Skills

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.

Before you build a Progressive Web App,
you need to build a Single Page App

Course Outline

  • 1 Single Page Application Intro (FREE)
  • Hello And Welcome
  • What is a Single Page Application?
  • The App You're Going To Build In This Course
  • Course Outline
  • Prerequisites
  • About the Instructor
  • 2 From Zero to Deploy (FREE)
  • Get the Boilerplate and Serve Locally
  • Create an App on Firebase
  • Firebase Initialization
  • Firebase Deploy
  • Initialize Git
  • 3 React Crash Course (Lecture)
  • Course Resources (& The Full Code for Voice Record Pro)
  • 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
  • 4 Redux Crash Course (Lecture)
  • 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
  • 5 Navigation w/ React Router 4 (Step-By-Step Coding)
  • 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
  • 6 Record Audio with the MediaRecorder API (Step-By-Step Coding)
  • 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
  • 7 Develop the Audio Playback View (Step-By-Step Coding)
  • 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

A 7 part video course. Invest the time to learn these skills, it will be worth it.

How to Write a Single Page Application

Get the foundation you need to start now.

Get Instant Access

The Complete Video Course

30 Day Money Back Guarantee

Includes professional boilerplate you can use for your
clients, employer, or your own apps.

The author.  Walking through the woods.

Hi, I’m Mark.

I'm a UI and Web Engineer located in the San Francisco Bay Area.

I believe in the promise of the open Web. So I spend a lot of time working with Web technologies, and teaching others how to do the same.

When I'm not working I'm usually outside (hiking, backcountry camping, biking, mountaineering), and I focus a lot on personal development.

If I live by any motto it would be this: work less, adventure more.

I think we're all here for a reason. I hope that you discover yours.