SuperHi FM

Lesson 01

Welcome to the course

Welcome to Introduction to Full Stack Javascript!

My name’s Sam Nixon and I’ve been building stuff with JavaScript for the last decade. I’ve worked for tiny startups, agencies and big scale-ups that have IPOed - I even got to #1 on Product Hunt with a JavaScript-based app back in 2017.

In this course we’re going to dive deep into the world of JavaScript ecosystem to build full stack experiences.

We’ll be writing a lot of JavaScript (as you would imagine) and we’ll be building all our frontends in React.js. Some experience writing JavaScript and some background knowledge of React.js is required to get the most out of this course, so if you’re new to either then I recommend picking up an intro course to brush up and make sure your ready for this course.

In general with a lot of the JavaScript world, there’s no golden path - it’s an ecosystem defined by a mixed approach, where you pick and choose the technologies you need based on the project you’re working on.

We’ll take a look at the React.js ecosystem where that is very true, and the Node.js ecosystem which has a few more perennial features, like Express.

To help acclimatise to the JS ecosystem, this course seeks to expose you to as many different combinations as possible, so we can explore the strange behaviours together that you may later encounter in your personal or work projects.

This course mixes presentations and explanations of key concepts with a live-coding approach to the videos for the projects themselves. That means a lot of mistakes and debugging, but a true to life view of how (and how long) it takes to develop the kind of applications we’ll build together.

Together we’ll build:

  • brut: a brutalist web music player built upon the Spotify API.
  • Notes: a wallet-style notes app that allows people to store notes in folders
  • Careful: an app for healthcare workers to view patient records

Transcript

00:00

- Hi everyone. My name's Sam Mixon, and this is Introduction to Full Stack JavaScript. Throughout this course, we're gonna be touching upon a great many of the parts of the React ecosystem and wider JavaScript ecosystem to build full stack web applications. We're gonna be building three projects. The first, brut a minimalistic brutalistic music player, built around the Spotify API. Through brut, we're gonna look at Vite as a way of scaffolding our application, TypeScript as a way of writing JavaScript style components, as a way of writing CSS, and Axios as a way of writing API requests.

00:39

We'll also take a look at testing our application to understand whether it's functioning in the way we expect. In chapter two, we're gonna build a wallet style notes app together, which has both a front end and a backend and the database. In order to do that, we're gonna take a look at forms, at how to structure our front end to make it as extensible and flexible as possible. We'll also take a look at MongoDB and how to build an API and backend using Node and Express.

01:15

Then in chapter three, we're gonna build a healthcare app together called Careful, which will display healthcare information from visits between carers and people being cared for. That will expose us to Amazon Web Services, AWS, as well as how to build a backend that can serve data to a front end which we have not written. Then we'll refactor that front end with authentication and a new state management approach that up to that point of the course we will not use, but you might go back and apply elsewhere.

01:56

That's a lot to get in, and so this course is fairly long. Hopefully, you enjoy it. Throughout the course I take the approach of bouncing between presentations and examples, some challenges thrown in there just to keep you on your toes and a lot of effectively live coding sessions where I'll work through the problem, the file that we're trying to change, the sort of element that we're trying to add to the application.

02:27

I'll do that live and so you get a sense of all the mistakes that someone makes when they're writing this thing, even when they know exactly what they should be doing. So let's get started.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!

Feeling stuck?

Don’t worry, we are here to help you with:

  • Speedy help from one of our team members
  • Detailed, relevant solutions
  • Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!