SuperHi FM

In our second project, we’ll be building a full stack, wallet-style notes app that will allows us to store text. This project is a big undertaking, so we’ll split the task into two parts. In part A, we’ll use starter code to get a head start on the frontend of our application then experiment with animation using react-spring, forms using Formik and we’ll explore how we can organise our workflow and code to make it easier for others to work with us.

Assets

https://github.com/samnixon87/notes-starter/tree/6682fa2e1694bba7c68ccee88782c66f03219aca

https://github.com/samnixon87/notes-starter/tree/0318ff6d7fd3c28b214b62933581e49d7e3ea850

Videos

Welcome to Chapter 2! Let’s see what’s in store in this part of the course.

Lesson 01

Intro

Welcome to Chapter 2! Let’s see what’s in store in this part of the course.

What do we look for when we’re developing a full stack application? How do we critically review a design from an engineering point of view?

Lesson 02

Starting with the design and making some development choices

What do we look for when we’re developing a full stack application? How do we critically review a design from an engineering point of view?

This time around, some code has been written for us so we can dive into the juicier elements of designing our Notes app. Let’s take a look around to familiarise ourselves.

Lesson 03

Finding your way around the starter files

This time around, some code has been written for us so we can dive into the juicier elements of designing our Notes app. Let’s take a look around to familiarise ourselves.

When thinking about how we’ll build our application, we need to decide where we want to stay flexible and how will we allow our application to grow in the future.

Lesson 04

Thinking about extensibility

When thinking about how we’ll build our application, we need to decide where we want to stay flexible and how will we allow our application to grow in the future.

One approach to allowing our application to grow is to adopt a modular folder structure. Here we talk about one way to achieve this given our current code and why that might help us add features and collaborate with others in the future.

Lesson 05

Modular extensibility in the starter

One approach to allowing our application to grow is to adopt a modular folder structure. Here we talk about one way to achieve this given our current code and why that might help us add features and collaborate with others in the future.

How do our folders open and close, and what options are there for improving the user experience?

Lesson 06

Opening and closing a component

How do our folders open and close, and what options are there for improving the user experience?

A look at the various animation libraries that have been built for React.js and how we can utilise them to add movement and physics to our application.

Lesson 07

Animation in React

A look at the various animation libraries that have been built for React.js and how we can utilise them to add movement and physics to our application.

A dive into the world of React physics with react-spring, an animation library specifically built for react. We’ll be playing with tension and springs to add some dynamism to our folders.

Lesson 08

Adding physics to folders with react-spring

A dive into the world of React physics with react-spring, an animation library specifically built for react. We’ll be playing with tension and springs to add some dynamism to our folders.

We need to capture information in our Notes app, but what are our options? Do we hand-roll a form ourselves, or can one of the form libraries help us?

Lesson 09

Forms in React

We need to capture information in our Notes app, but what are our options? Do we hand-roll a form ourselves, or can one of the form libraries help us?

We use Formik to add data capture to our Notes application.

Lesson 10

Adding our AddFolder form with Formik

We use Formik to add data capture to our Notes application.

Now that you’ve seen how we can add forms using Formik, we have a _Challenge_. Can you do it with little help? What will be the same as the previous example and what will be different?

Lesson 11

Challenge: Adding a form and animating our AddNote component

Now that you’ve seen how we can add forms using Formik, we have a Challenge. Can you do it with little help? What will be the same as the previous example and what will be different?

A Walkthrough of our previous Challenge so that we’re all on the same page.

Lesson 12

Walkthrough: Adding a form and animating our AddNote component

A Walkthrough of our previous Challenge so that we’re all on the same page.

With our forms and localStorage now in place, we are ready to iterate through our wallet-style notes app and generate an approximation of our finished application. This kind of quick and dirty functional helps us understand whether we’ve made any errors.

Lesson 13

Iterating through our wallet

With our forms and localStorage now in place, we are ready to iterate through our wallet-style notes app and generate an approximation of our finished application. This kind of quick and dirty functional helps us understand whether we’ve made any errors.

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!