Want some ambient music in the background? Play our radio station!
Don’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
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.
https://github.com/samnixon87/notes-starter/tree/6682fa2e1694bba7c68ccee88782c66f03219aca
https://github.com/samnixon87/notes-starter/tree/0318ff6d7fd3c28b214b62933581e49d7e3ea850
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?
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.
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?
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.
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.
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.
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.
A place for you to post notes about anything on this page. Only you can view your notes.
