But fear not, fellow coder, for I bring you the trusty map to navigate the treacherous bug-infested waters of programming. Whether you're a self-learner aiming to land that dream job in tech or just tinkering for fun, here's how to become a debugging ninja.

Look for Errors in Your IDE

Your Integrated Development Environment (IDE) isn't just a fancy text editor – it's your first line of defense against bugs.

TypeScript, for example, is like that friend who points out the pothole you're about to step into – it helps catch errors early with its type-checking prowess.

Imagine you accidentally try to add a number to a string. TypeScript waves a big red flag, saving you from a facepalm moment later. It's one of the many reasons we adore TS.

Example: You declare let age: number = 'twenty';. TypeScript will frown upon this, telling you that 'twenty' is not a number. It's like having a guardian angel for your code.

Try and Isolate the Area

Before you start pulling out your hair, try to play detective and isolate where the crime scene is.

Is the bug lurking in the backend, hiding in the frontend, conspiring in the database, or chilling in the infrastructure?

When you're working locally, it's usually one of the first three suspects. And here's a hot tip: the network tab in your browser's developer tools is like your police scanner, helping you pinpoint the location of the distress call.

Example: Let's say you send out a request to GET /users and it returns a 500 status. That's the server telling you, "Mate, I've got problems." It's a backend issue. But if the call comes back with a 200 status and your UI is still playing hide and seek with the data, then the bug's hosting a party in your frontend. The network tab just handed you the address.

By narrowing down the location of your issue, you can focus your debugging efforts more efficiently. It's like knowing whether to raid the castle, the dragon's lair, or the dark forest. Happy hunting!

Look for Errors in the Browser Console

The browser console is your Sherlock Holmes magnifying glass for web projects. It uncovers clues hidden in plain sight. The console tab, on the other hand, is like tracking where the villain has been, helping you spot those pesky code misfires.

Example: Your React app isn't fetching data. A quick peek in the console tab shows an "undefined" error, and a line number. This is where your problem is at. Elementary, my dear Watson!

Add console.log() to Different Functions

Ah, the humble console.log(), the print statement that could. When in doubt, log it out. It's like dropping breadcrumbs through your code to see how far Little Red Riding Hood gets before she meets the Big Bad Bug.

Example: Unsure if your function is receiving the expected data? console.log('Data:', data) at the start of the function. No data? Now you know where the problem starts.

Use Try-Catch Blocks

Try-catch blocks are your safety net, allowing your code to perform daring feats without crashing your app. They let you gracefully handle errors by catching them before they wreak havoc. They also let you specify your own custom error messages for a given block of code, helping you to find the problem area.

Example: Wrap your API call in a try-catch. If the call fails, the catch block catches the error, allowing you to console.log it or display a friendly message to the user.

Heres what a try catch block looks like in JS:

  function displayUsers() {
    try {
      const users = getUsers();
    } catch (error) {
      console.log("oh crap");
    }
  }

Search Google or Use ChatGPT to Help With Error Messages

Stuck on an error message? Google and ChatGPT are your library and librarian. Just copy and paste the error into the search bar and watch a plethora of solutions unfold. It's like asking the hive mind: someone, somewhere, has had your problem before.

Example: Getting a "TypeError: Cannot read property 'map' of undefined"? A quick search reveals you might be trying to use .map() on something that's not an array. Oops!

Test Often

The mantra "test early, test often" will save you heaps of time. By testing small bits of code as you go, you catch bugs early, when they're easier to squash. It's like cleaning as you cook– it makes the final cleanup so much easier.

Example: Just added a new feature? Test it out before moving on. Does it work as expected? Great! No? Time to debug while the code is still fresh in your mind.

Try a Different Approach

If you're banging your head against the wall with a problem, maybe it's time to climb over it instead. Don't get too attached to your code. Be willing to refactor or even start from scratch if it means a cleaner, more elegant solution.

Example: If your code is more tangled than a bowl of spaghetti, stepping back and rethinking your approach might reveal a simpler, more efficient path.

Debugging is part art, part science, and entirely a test of patience. But with these strategies in your toolkit, you'll be squashing bugs with the best of them. Happy coding, and may your bug hunts be short and your code be clean!

Real Life Scenario

Let's take real life scenario. I have a React, Node, Postgres app that displays users in the browser. The code, as far as I know, should be working but I'm not seeing the users displayed on the frontend.

Step 1 – Check the Console

Let's have a nosey at the Chrome dev tools console and see what's going on.

"Look ma, errors!"

Ah, the plot thickens in the saga of "Why isn't this thing working?". Let's dive into the drama unfolding in your console and break down the breadcrumbs left behind by our mischievous friend, the bug.

First up, we have our leading clue: GET http://localhost:3000/api/users 500 (Internal Server Error). This line is the equivalent of a scream in the night in our detective story. It tells us that our backend is in distress, possibly tied to a nefarious SQL query or a rogue piece of logic in our API route.

The server's cry for help is loud and clear: "Internal Server Error." Classic move by the backend, really.

Now, our supporting cast makes their entrance with ResponseError: Response returned an error code. This is the big reveal. The issue isn't just a server having a bad day – it's a ResponseError caught red-handed by UsersApi.request, and even tells us where the error line is (UserApi.ts:83).

Step 2 – Check the backend Terminal

Our journey into investigating the bug has brought us to the backend, where we are greeted with this:

If you see this and your first instinct is to run away and hide, don't worry – that was mine too. But fear not! There are plenty of clues that point us to the issue.

When a backend error occurs, this is what's known as a stack trace – basically all the errors, info, line numbers, and so on that the compiler encountered in one big block of text. Thanks compiler!

What we do here is look for key words, recognisable files, or anything that's readable by humans. Did you spot anything? Let's dive deeper:

Digging deeper into the errors

The highlighted parts in yellow, indicate that there was an error in userController.ts, specifically at getAllUsers() function. If we read further, the highlighted parts in red point us to the error message:

Authentication failed against database server at `dpg-cn9kr28l6cac73a1a7eg-a.frankfurt-postgres.render.com`, 
the provided database credentials for `dmin` are not valid.\n\nPlease make sure to provide valid database credentials for the database server

Hurray! Now we know the error. We have spelled "admin" incorrectly in our database connection string, meaning the connection failed. Doh! After we fix this, the error is resolved:

Error resolved

Step 3: Verify the Fix

Now we've added a fix, we can verify by checking the browser to see if everything's working. In this case, checking the UI is enough to verify, but for more complex flows you can get that the API is returning the correct status code (in this case, 200)

Conclusion

I hope this article has shed some light on how you can debug your projects.

If you are looking for more debugging insights, and real industry level projects to build, you can check out by YouTube where we build and deploy full stack applications using React, Node, and some other cool tech. Hope to see you there!

We've all been there, and it can be a frustrating experience when learning to code.

In this article, I will show you some of the best techniques you can use to get the most out of any video tutorial and maximize your learning.

🎮 Code Along

This is a great way to practice the actual typing of code, and you'll build muscle memory as you do. Eventually things like creating functions, new files, and so on will become second nature. It also helps to drive home the concepts you're learning.

Imagine playing a video game where you're just watching the hero battle dragons without jumping into the fray yourself. Sounds boring, right? And you wouldn't get any better at fighting the dragons.

That's exactly why you should code along with tutorials instead of passively watching them. Open your IDE, type out the code, and run it. See those errors and successes in real time? They’re your battle scars and medals.

Example:

When the tutorial says, "Let's build a to-do list," don't just nod along. Build it as they do, line by line. If they add a feature to check off completed tasks, jump in and code that checkbox. It's like following a recipe – you wouldn't just read it and expect a cake to appear.

📝 Make a Note of Common Functionality

Coding is not just about learning syntax – it's about learning how to recognize patterns. Many web apps share common functionalities. Authentication, CRUD operations (Create, Read, Update, Delete), and API calls are your bread and butter.

Example:

In my full-stack project videos on YouTube, I show you how to implement a lot of common web app features such as authentication, CRUD operations, sorting, filtering, and more. If you take a note on how and when to use these features, you'll be able to refer back to this when you need these features in your future projects.

🔄 Watch a Section, and See If You Can Redo That Section Yourself

This is where the magic happens. After watching a segment, take a deep breath, and try to replicate what you just learned without peeking.

It's like trying to draw a map of a dungeon after walking through it once. Don’t worry if you miss a turn – the goal is to etch those coding pathways into your brain. Remember: repetition is key for learning coding concepts.

Example:

If the tutorial just showed how to add a feature to sort tasks by priority, close the video and see if you can implement it again from scratch. It's okay to struggle. That's when you know you're learning. You can always refer back to the video if you get stuck and then try again.

🚀 See If You Can Do the Next Section Yourself

Feeling bold? Try to predict and code the next feature before the tutorial shows you how. It’s like choosing your own adventure in a storybook. This not only tests your understanding but also boosts your problem-solving skills.

Example:

The tutorial plans to add a feature to filter tasks? Take a stab at it before hitting play. Whether you nail it or not, comparing your approach to the tutorial's solution offers incredible insights.

⏸ Pause and Add Your Own Little Bits

Who says you have to stick to the script? Toss in your own mini-features or tweaks. If the tutorial’s app is as plain as a potato, why not spice it up with some CSS magic? Or add a feature that you think would be useful?

Example:

Building that to-do list but it's all text? Add emojis for tasks! 🎉 A task about calling your grandma? Slap a heart emoji next to it. It’s your world – have fun decorating it.

🌟 Extend the Tutorial with Your Own Features

This is one of my favourite ways to learn, as it's not as daunting as starting from a blank slate.

Once you've followed the tutorial to the end, don't stop there. Think of it as the base game, and now you're adding DLCs (Downloadable Content). This is your chance to get creative and make the project truly yours.

Example:

Got that to-do list working? Great! How about adding a feature to share tasks with friends or sync it across devices? The sky's the limit.

🏖 Take Lots of Breaks

Ever noticed how ideas sometimes hit you when you're away from the computer, maybe in the shower or taking a walk? That's your brain processing in the background.

Coding marathons can lead to burnout, so remember to take breaks. Stretch, hydrate, or do a quick dance-off. Your brain (and body) will thank you.

Example:

After coding a new feature, step away for a bit. Try taking a walk, or working on another non-coding project. You might come back with a fresh perspective or a new idea to implement. It’s like letting your game character rest at an inn before the next big quest. 😉

🔍 Conclusion

If you're eager to put these techniques into practice, feel free to visit my YouTube channel. There, I tackle enterprise-level projects, unravelling the how, the what, and the why behind each line of code. Drop by and say hello!

In this handbook, I'm going to introduce you to the MERN stack, a widely-used technology stack embraced by many leading companies. I'll guide you through 7 essential steps to start learning these technologies on your own.

By the time you finish reading, you'll have a solid understanding of what the MERN stack entails, its component technologies, and various resources for learning. You'll also have 10 project ideas that you can develop and showcase in your portfolio.

Table of Contents

1. What is the MERN stack?
2. The MERN Stack Roadmap
   • STEP 1: Learn the right amount of HTML, JavaScript, and CSS
   • STEP 2: Get familiar with React
   • STEP 3: Understand REST API's and how a backend server works using Express/Node
   • STEP 4: Storing data with MongoDB and Mongoose
   • STEP 5: Writing tests
   • STEP 6: Using Git
   • STEP 7: Deployments
3. Top Resources to learn the MERN Stack
4. 10 project ideas you can try today
5. Wrapping up the MERN stack journey

What is the MERN stack?

The MERN stack, comprising MongoDB, Express.js, React, and Node.js, is a cohesive set of technologies used for building efficient and scalable web applications.

Its popularity stems from the seamless integration of each component: MongoDB's flexible data handling, Express.js's efficient server-side networking, React's dynamic user interfaces, and Node.js's powerful back-end runtime environment.

For beginners, the MERN stack is a smart choice because it uses JavaScript across all layers, simplifying the learning curve. This uniformity, coupled with a strong community and ample learning resources, makes it an accessible and practical toolkit for anyone looking to dive into full-stack development.

The MERN stack is also heavily utilized in the industry, favored by startups and large enterprises alike for its efficiency and the robust, modern web applications it can produce. This industry adoption not only validates its effectiveness but also opens up numerous career opportunities for those skilled in these technologies.

Let's look at a brief overview of what each part of the MERN Stack looks like:

Frontend (React)

The frontend of a website is like the dining area of a restaurant. It's everything you see and interact with directly on a website – the layout, design, buttons, and text.

Example: When you visit a website and see a beautiful homepage, interact with menus, or fill out forms, you're experiencing the frontend.

Backend (Node.js)

The backend is like the kitchen in a restaurant. It's where all the behind-the-scenes work happens. It includes the server, applications, and databases that work together to process the information you see on the frontend.

Example: When you order food (submit a form on the website), the kitchen (backend) processes the order (the data) and prepares your meal (the information or service you requested).

Database (MongoDB)

A database in web development is similar to a restaurant’s pantry or storage where all the ingredients (data) are kept. It stores and manages all the information needed by the website, like user profiles, content, and other data.

Example: In an online store, the database stores product information, prices, user reviews, and customer details.

REST APIs (Express)

REST APIs are like the waiters in a restaurant. They are the messengers or go-betweens for the frontend and backend. They take requests (like orders) from the frontend (customer), fetch or update data in the backend (kitchen), and then return responses (prepared orders).

The terms POST, PUT, DELETE, and GET are types of requests used in REST APIs:

• POST: Used to create new data. Like placing a new order in the restaurant.
• PUT: Used to update existing data. Similar to changing an order you've already placed.
• DELETE: Used to remove data. Like cancelling an order.
• GET: Used to retrieve data. Comparable to asking about the menu or checking the status of your order.

The MERN Stack Roadmap

STEP 1: Learn the right amount of HTML, JavaScript, and CSS

The MERN stack uses JavaScript heavily, so its a natural first step to learn. In this section you will look at the main things you will use day-to-day when creating full-stack MERN apps.

Understanding JavaScript is like knowing the right amount of ingredients needed for a recipe. You don't need to master everything at once, just the essential ingredients that make your particular dish (or your web project) come to life.

Variables

Variables in JavaScript are like labelled jars in your kitchen. You can store things in them (like numbers, text) and use these jars later in your cooking (or coding).

Example: A variable storing the user's name, so you can use it later to say "Hello, [Name]!"

Functions

Functions are like recipes in a cookbook. They are sets of instructions that perform a specific task. You can reuse these recipes whenever you need to perform that task again.

Example: A function that calculates the total price of items in a shopping cart.

Objects & Arrays

Objects are like information cards holding details about something (like a contact card), and arrays are like lists.

Example of an Object: A card holding a user's information (name, age, email).
Example of an Array: A list of all the user's favorite book titles.

If/else Statements, Switch Statements

These are like decision-making processes. If/else statements are like choosing what to wear based on the weather, and switch statements are like a more complex decision, like choosing what to cook based on multiple ingredients you have.

Example: If it's raining (if), take an umbrella (else), take sunglasses.

Callbacks/Promises/Async Await

These are ways to handle tasks that take some time, like ordering food and waiting for it. Callbacks are like calling a friend to do something when they’re free. Promises are like your friend promising to do it. Async-await is like making a plan to do tasks one after another in an organized way.

Example: Ordering a coffee (a task) and waiting to get it before leaving the cafe (ensuring order of actions).

ECMAScript (Template Strings, Destructuring Assignment, Spread Operator, Default Parameters, and so on)

These are advanced tools and shortcuts in JavaScript to make coding easier and cleaner. It's like having a food processor in your kitchen that makes chopping and mixing faster and more efficient.

Example: Automatically creating a welcome message like "Hello, [Name]!" without manually joining words and variables.

TypeScript

TypeScript is like JavaScript but with more rules for organizing your code (like a more detailed recipe book). It helps in managing larger projects by adding types to your code, making sure you don’t mix incompatible ingredients. This guide teaches you TypeScript basics.

Example: Specifying that a function should only take a number as an input, not text or anything else.

STEP 2: Get Familiar with React

Once you've got a feel for JavaScript, its time to venture into the wonderful world of frontend development.

React.js is a popular JavaScript library used for building user interfaces, particularly known for its efficiency in rendering dynamic, interactive web pages. It enables developers to create large web applications that can change data, without reloading the page, making for a smoother user experience.

Below is a list of common things you want to know when working with React.

Components

Think of components as individual LEGO blocks in a large LEGO model. Each block is a small, reusable piece that you can use to build different parts of your web application.

Example: A 'button' component in a website that can be used in many places, like for submitting a form or closing a pop-up.

JSX (JavaScript XML)

JSX lets you write your website's design code (like HTML) inside your JavaScript code. It's like writing the recipe and the cooking instructions in one place for easier reference.

Example: Writing a piece of JSX code that includes both JavaScript and HTML-like tags to create a user login form.

Props (Properties)

Props are like instructions or settings you pass to your LEGO blocks (components) to tell them what they should look like or do.

Example: Passing a 'color' prop to a 'button' component to make it red or blue depending on the situation.

State

State is like a personal notebook for each component, where it keeps track of its own information, like whether a button is clicked or not. Here's a course all about state management in React.

Example: A 'like' button keeping track of whether it has been clicked (liked) or not.

Hooks

Hooks are special tools in React that let you add features like state to your components without needing to use complex code structures.

Example: Using the useState hook to keep track of a counter in a component.

Event Handling

This is how you tell a component to do something when a user interacts with it, like clicking a button or entering text in a form.

Example: Setting up an event handler so that when a user clicks a 'submit' button, it sends their information to the server.

Conditional Rendering

This is like having a magic painting that can change its picture based on certain conditions. In React, you can show different components based on different conditions.

Example: Showing a 'login' button if a user is not logged in, and a 'logout' button if they are.

Lists and Keys

Keys are like name tags for items in a list. They help React keep track of which items are new, changed, or removed.

Example: Displaying a list of messages in a chat app, where each message has a unique key.

Context API

The Context API a way to share information (like a theme setting or user data) across many components without passing the information through each level manually.

Example: Using Context API to share the current logged-in user's information across different components in a web app.

Fragment

Fragments let you group several components or elements together without adding extra layers to the website. It's like putting multiple LEGO pieces on a baseplate without the baseplate being part of the final model.

Example: Grouping a list of items together in a menu without adding extra wrappers or divs around them.

STEP 3: Understand REST API's and how a backend server works using Express/Node

Every UI needs a way to store and retrieve the data it needs to make the frontend work. This is where our backend comes in.

In the MERN stack, the backend is composed of 3 main bits: Express, a Node.js server, and a database. We'll cover the database shortly, for now we'll focus on the Express/Node pieces of the MERN stack, as they're closely related.

Express.js is a lightweight, flexible framework for Node.js, designed to build web applications and REST APIs with ease and efficiency. Node.js is a powerful JavaScript runtime that allows for the development of scalable server-side applications, making the duo a popular choice for backend development.

Node.js: Foundation for Building Web Applications

Think of Node.js as the foundation for constructing a modern building. It's a platform that lets you build web applications, similar to how you would use a set of basic tools and materials to start building a house. You might hear this being to referred to as the "backend".

Example: Building a chat application where multiple users can send messages in real-time.

Express: Streamlining REST API Development

Express is a helper tool for Node.js. It's like having a pre-built kit that makes building certain parts of your house easier and faster, providing templates and shortcuts so you don't have to start from scratch.

Example: Using Express to quickly set up routes for a website, like a route to a contact page or a product catalog.

Modules and Packages: Ready-Made Components

In Node.js, modules are like pre-made components or sections of a house (like a bathroom unit or a kitchen set) that you can simply choose and add to your building project.

Example: Adding a 'date-time' module to display current times and dates on your web application.

Node Package Manager (NPM): The Tool and Material Warehouse

NPM acts like a vast warehouse where you can find all sorts of tools and materials (modules) you might need. It's a central place to get additional resources for building your web applications.

Example: Installing 'body-parser' from npm to handle JSON data in your web application.

Routing: Directing Web Traffic

Routing in Express is like setting up roads and paths in a housing complex. It's about directing the flow of traffic (data and user requests) to different parts of your web application.

Example: Creating routes in an online store, like /products for the product list and /products/:id for individual product details.

Middleware: Additional Functional Layers

Middleware in Express can be seen as extra layers or services in your building, like security, plumbing, or electrical systems. They add specific functionalities to your web application.

Example: Adding 'cookie-parser' middleware to handle cookies in your web application.

Request and Response: Communication Channels

Requests and responses in Express are like sending and receiving mail or messages. They are the way your web application communicates with users, sending them data or receiving their inputs.

Example: Your application receiving a user's login request (request) and then sending back a confirmation message (response).

Environment Variables: Secure Storage Spaces

Think of environment variables as secure storage spaces or safes in your building. They're used to store sensitive information like passwords or personal settings, keeping them secure and separate from the main construction.

Example: Storing the database connection string in an environment variable to keep it secure.

Security: Building Safeguards

In the context of web applications, security is about building safeguards into your project. It's like installing locks, security systems, and fire safety measures in a building to protect it from various threats.

Example: Implementing HTTPS to secure data transmission and using JWT (JSON Web Tokens) for user authentication to protect user data.

STEP 4: Storing data with MongoDB and Mongoose

MongoDB is a NoSQL database that offers high flexibility and scalability for storing and managing data, making it ideal for handling large volumes and diverse types of data.

Mongoose is an Object Data Modeling (ODM) library for MongoDB, providing a straightforward schema-based solution to model application data, enhancing database interaction with useful features and validation.

MongoDB: A NoSQL Database

MongoDB is a type of database that stores data in a flexible, JSON-like format. This makes it different from traditional databases, which use tables and rows. It's great for handling large volumes of data and is very scalable.

Example: Using MongoDB to store user profiles where each profile can have different fields.

Collections and Documents

In MongoDB, data is stored in 'collections', which are similar to tables in a relational database. Inside these collections, data is stored in 'documents'. Think of a document as a single record in your collection, like an entry in a diary or a contact in an address book.

Example: A 'users' collection with documents each representing a user with details like name and email.

Mongoose: A MongoDB Object Modeling Tool

Mongoose is a library for Node.js that makes it easier to interact with MongoDB. It provides a straightforward, schema-based solution to model your application data. It's like having a personal assistant to help manage the communication between your application and MongoDB.

Example: Using Mongoose to easily add, retrieve, and manage user data in a MongoDB database.

Schemas

In Mongoose, a schema is a structure that defines the format of the data to be stored in MongoDB (like defining fields and data types). Think of it as a blueprint for how your data should look.

Example: Creating a Mongoose schema for a blog post with fields like title, author, and content.

Models

A model in Mongoose acts as a constructor, compiled from the Schema definitions. It represents documents in a MongoDB database. Models are responsible for creating and reading documents from the underlying MongoDB database.

Example: Defining a 'User' model based on a user schema to interact with the 'users' collection in the database.

CRUD Operations

CRUD stands for Create, Read, Update, Delete. These are the basic operations you can perform on the database. Mongoose provides easy methods to execute these operations on your data.

Example: Using Mongoose methods to add new users, find users by name, update user information, or delete users.

Connecting to MongoDB

You can use Mongoose to connect your Node.js application to a MongoDB database. This is like setting up a phone line between your application and the database so they can talk to each other.

Example: Writing a Mongoose connect function to link your Node.js application to a MongoDB database hosted on Atlas.

Querying Data

Mongoose allows you to query your MongoDB database. This means you can search for specific data, filter your data based on certain criteria, and more.

Example: Using a Mongoose query to find all blog posts written by a specific author.

Data Validation

Mongoose provides built-in validation. This is a way to make sure the data being saved to your database is in the right format, like checking if an email address looks like an email address.

Example: Defining a schema in Mongoose where the email field must match the format of an email address.

Middleware (Pre and Post Hooks)

Mongoose middleware are functions which can be executed automatically before or after certain operations, like saving a document. They're useful for complex logic like hashing passwords before saving them to the database.

Example: Using a pre-save middleware in Mongoose to hash user passwords before saving them to the database.

Indexes

Indexes in MongoDB are used to improve the performance of searches. They are similar to indexes in a book, helping the database find data faster.

Example: Creating an index on the 'email' field in a user collection to speed up the search for users by email.

Aggregation

Aggregation in MongoDB is a powerful way to process data and get computed results. It's like having a sophisticated calculator to perform complex operations on your data, such as summing up values or averaging them.

Example: Using MongoDB's aggregation framework to calculate the average number of comments on blog posts.

STEP 5: Writing Tests

Testing in software development is like a safety check to ensure everything in your application works as expected. It's a crucial step in the development process where you look for bugs or issues before your users do. Think of it like proofreading an essay or checking a car before a road trip – it helps catch and fix problems early.

There are different types of testing, each serving a unique purpose:

Unit Testing

This is the most basic form of testing. Here, you test individual parts of your code (like functions or components) in isolation. It's like checking each light bulb in a string of Christmas lights.

In the MERN stack, tools like Jest or Mocha are commonly used for this. They let you write small tests to check if a specific part of your application behaves as expected.

Integration Testing

This type of testing checks how different parts of your application work together. It's like making sure all the light bulbs light up when connected and the string is plugged in.

For the MERN stack, you might still use Jest or Mocha, combined with other tools like Chai for assertions, to ensure that different components or services in your application interact correctly.

End-to-End (E2E) Testing

Here, you test your application's workflow from start to finish. It's like checking if the entire Christmas tree lights up and twinkles as expected.

For a MERN stack application, Cypress or Selenium are popular choices. They simulate real user scenarios, ensuring the entire application, from the front end in React to the back end with Express and Node.js, functions smoothly together.

Performance Testing

This checks if your application can handle stress, like heavy traffic or data processing. It's akin to ensuring the Christmas tree lights don't blow a fuse when they're all on. Tools like Loader.io or Apache JMeter can be used here.

Each type of testing serves to ensure a different aspect of your application is working correctly, and together, they contribute to building a robust, reliable, and user-friendly application.

By employing these tests in the MERN stack, you not only catch bugs early but also maintain a high standard of quality for your application.

STEP 6: Using Git

Git is a version control system, a tool that tracks changes in your code over time. Think of it like a detailed diary for your coding project. Every time you make changes to your code, Git keeps a record of what was changed, when, and by whom. This becomes incredibly useful when you’re working on complex projects, like those involving the MERN stack.

Why is Git so important when building with the MERN stack, or any software for that matter?

Collaboration

Git is like a team playbook. It allows multiple developers to work on the same project without stepping on each other's toes.

Everyone can work on different features or parts of the application simultaneously (like MongoDB database schemas, React components, or Express.js routes). Git helps manage these contributions, ensuring changes can be merged smoothly into the main project.

Tracking Changes

Imagine you've made changes to your React component, and suddenly things aren't working as they used to. Git allows you to go back in time and see what changes were made and by whom.

This historical data is invaluable for understanding how your project evolved and for fixing issues without having to start from scratch.

Branching and Merging

Git’s branching feature lets you diverge from the main line of development and experiment with new features or ideas in a controlled way.

You can create a branch, make your changes, and then merge those changes back into the main project when they're ready. This ensures the main project (often referred to as the 'master' or 'main' branch) remains stable.

Backup and Restore

With Git, your project's entire history is stored in the repository. If anything goes wrong, you can roll back to a previous state. It’s like having a fail-safe backup system.

Documentation

Commit messages in Git provide a narrative for your project. They allow you to document what changes were made and why, which is extremely helpful for both your future self and other developers who might work on the project.

When building applications with the MERN stack, Git offers a safety net and a collaborative workspace. It keeps your project organized, tracks every change, and allows multiple developers to work together more efficiently.

Using Git is essential for managing complex development projects in today's software development world.

STEP 7: Deployments

Code deployment is the process of taking code written by developers and making it operational on a live environment where users can interact with it.

In the context of the MERN stack, which involves technologies like MongoDB, Express.js, React, and Node.js, deployment is the final step in the journey of bringing a full-stack application to life.

Imagine you've built a house (your web application). Deployment is like moving it from the construction site (development environment) to its actual location where people can live in it (production environment). This process involves several key steps to ensure that everything works as expected when users access your app.

Preparing for Deployment

Before deploying, you need to prepare your application. This involves ensuring your code is complete and tested, dependencies are properly managed, and your app is configured for the production environment.

For MERN stack applications, this might mean setting up environment variables, configuring your database (MongoDB) connection for production, and optimizing your React front-end for performance.

Hosting and Servers

Choosing where to host your application is crucial. For MERN stack apps, you can use cloud-based hosting services like AWS, Heroku, or DigitalOcean. These platforms offer services to host both your Node.js backend and MongoDB database, and they often provide additional features like scaling, monitoring, and security.

Continuous Integration/Continuous Deployment (CI/CD)

CI/CD is a methodology that automates the deployment process. Whenever you make changes to your codebase (like fixing a bug or adding a new feature), CI/CD tools automatically test your code and deploy it if the tests pass. This ensures that your application is always up-to-date with the latest changes.

Tools like Jenkins, Travis CI, or GitHub Actions are commonly used for this purpose.

Monitoring and Maintenance

After deployment, it’s important to monitor your application for any issues and perform regular maintenance. This could involve checking server logs, updating dependencies, or rolling out fixes for any bugs that might arise.

Rollbacks

A good deployment strategy also includes plans for rollbacks. If something goes wrong after deployment, you need to be able to revert to the previous version quickly to minimize downtime.

In the MERN stack, each component (MongoDB, Express.js, React, and Node.js) might require specific considerations for deployment. For instance, you might use Docker containers to package your Node.js and Express.js backend, ensuring it runs consistently across different environments. React apps might be minified and bundled for optimal performance.

In essence, deployment in the MERN stack is about getting your application from your local machine to a server where it can serve users reliably and efficiently. It involves careful planning, choosing the right hosting solutions, automating the process as much as possible, and being prepared to address issues post-deployment.

Top Resources to Learn the MERN Stack

Now that you have a pretty good idea of what you need to learn to master the MERN stack, lets look at a list of free resources you can start using today to begin your journey!

• The freeCodeCamp curriculum is one of the best places to learn how to code for free. The curriculum is super in depth and covers alot of the topics mentioned in this post.
• The freeCodeCamp YouTube channel has a ton of free courses you can try as well. This MERN stack book project is an excellent one for beginners.
• Full Stack open is another good resource. It doesn't teach MongoDB but you learn about SQL instead which is equally as useful.
• My MERN stack hotel booking app project on YouTube is a free 15 hour course where you will learn everything talked about in this post.

10 Project Ideas You Can Try Today

One of my favourite ways to learn new technologies is to build projects. If you're struggling with coming up with ideas, here's 10 projects you can start building today. I'll be building some of these on my YouTube channel so feel free to subscribe to stay up to date!

Personal Blog Website

• Functionality: Users can read posts, and the admin can create, edit, or delete posts.
• Learning Focus: Basic CRUD operations, user authentication, integrating React with Express API, and using MongoDB for data storage.

Task Manager (To-Do List)

• Functionality: Users can add, view, edit, and delete tasks. Tasks can have deadlines and priority levels.
• Learning Focus: React state management, Express route handling, MongoDB operations, and basic UI development.

Simple E-commerce Site

• Functionality: Display products, add to cart, and checkout functionality. Admin features for adding or removing products.
• Learning Focus: React components for product listing, cart management, Express.js for product APIs, MongoDB for product data, and handling user inputs.

Recipe Sharing Application

• Functionality: Users can post, view, edit, and delete recipes. Implement a rating or comment system for interaction.
• Learning Focus: File upload for images, user-generated content management, and MongoDB schema design.

Budget Tracker

• Functionality: Users can input their expenses and income, categorize them, and view a summary of their finances.
• Learning Focus: Handling forms in React, creating RESTful services with Express, and effective data structuring in MongoDB.

Event Planning Application:

• Functionality: Users can create and manage events, send invitations, and track RSVPs.
• Learning Focus: Date handling in JavaScript, complex MongoDB documents, and Express middleware for authentication.

Fitness Tracker:

• Functionality: Log workouts, track progress over time, set fitness goals.
• Learning Focus: Data visualization with React, creating API endpoints for varied data types, and MongoDB for storing time-series data.

Chat Application:

• Functionality: Real-time chat rooms, private messaging, and user profiles.
• Learning Focus: WebSockets with Node.js for real-time communication, MongoDB for message storage, and React for dynamic UI updates.

Book Review Platform:

• Functionality: Users can post book reviews, rate books, and browse reviews by other users.
• Learning Focus: Integrating external APIs for book data, user-generated content moderation, and complex querying in MongoDB.

Local Business Directory:

• Functionality: Listing of local businesses with categories, user reviews, and contact information.
• Learning Focus: Geolocation, advanced querying and indexing in MongoDB, and creating a responsive layout with React.

Wrapping Up the MERN Stack Journey

As we reach the end of our exploration of the MERN stack, I hope this guide has illuminated the path for your journey into the world of full-stack development.

We've covered the fundamental components – MongoDB, Express.js, React, and Node.js – and delved into the practical aspects of building, testing, and deploying applications using this versatile stack.

Remember, the road to mastering the MERN stack is both challenging and rewarding. Each project you undertake will add to your skills and confidence. Use the resources and project ideas provided as stepping stones to build your portfolio and deepen your understanding.

The beauty of the MERN stack lies in its community-driven nature, so don't hesitate to seek help, collaborate, and share your experiences.

If you want to get in touch, you can reach me over at LinkedIn, or drop a comment on my YouTube channel. Good luck and happy coding!

• Building an API server in Node
• Integrating securely with a 3rd party API
• Interacting with a Postgres database using Prisma
• Making API requests from React
• Creating reusable components
• Working with pagination
• Working with UI elements such as tabs, image grids, modals and styling

Let's dive in.

Table of Contents

• Prerequisites
• GitHub Repositories
• Video Tutorial
• Project Architecture
• How to Setup the Backend
• How to Setup the Database and Prisma
• How to Get and Secure a Spoonacular API Key
• How to Create the Search Endpoint
• How to Setup the Frontend
• How to Call the Search API and Display Results on the Frontend
• How to Create the Search Input and Recipe Card Component
• How to Build the Pagination and View More Functionality
• How to Build the Recipe Summary Modal Component
• How to Create Endpoints to Get/Create/Delete Favorite Recipes
• How to Add Favorites Functionality to the Frontend
• How to Adding CSS/Styling
• Conclusion

Prerequisites

Since we will be focusing on how to build a project, there are a few prerequisites that will be needed to get the most out of this tutorial:

• Some knowledge about web development concepts (frontend, backend, databases, API's, REST).
• Some knowledge of JavaScript (variables, functions, objects, arrays, and so on).
• Basic understanding on React (how to create components, add styles, work with state).
• Basic understanding on Node.js/Express (working with APIs).

GitHub Repositories

Completed Code

You can find the completed code on GitHub by clicking here, or clone the repo:

git clone git@github.com:chrisblakely01/react-node-recipe-app.git

Starter Code

If you want to save some time and skip the initial setup, you can find the starter code here. This has a skeleton frontend/backend project already setup, as well as the basic layout and CSS. Or clone the repo:

git clone git@github.com:chrisblakely01/react-node-recipe-app-starter.git

Video Tutorial

If you'd like to learn from the video version as well, here it is:

Project Architecture

Here's a diagram that illustrates how the various components of our app will interact with each other:

Diagram illustrating the various components of the app

We will have a React front end and a Node backend. These two will communicate through specific endpoints. We will establish five endpoints, all housed within our backend.

We can categorize these endpoints into two distinct groups. The first group will cater to recipe searches. It will invoke the recipe API and return the results based on a given search query. Our front end will initiate a call to our backend, which will then relay the search request to the recipe API.

We choose not to call the recipe API directly from our front end because it requires an API key—a form of authentication similar to a password. Exposing this key in our front end code could lead to unauthorized access if someone delves into the code through their browser to retrieve the API key.

It's a more secure practice to house the API key on our backend within environment variables. From there, we can call the recipe API and then transmit the response back to our front end.

This approach aligns with common practices in production environments. It also offers the flexibility to modify the data on the backend, if necessary, before sending it back to the front end. And it enhances performance, as the UI will not have to manage multiple API requests to and from the recipe API.

That's the essence of how our search functionality will operate. We'll also have several endpoints to add, create, and delete favorites. These favorites will be stored in our own database, providing a clear picture of what we aim to build.

How to Setup the Backend

In this tutorial, we will walk through the process of building a full-stack recipe application. We'll set up the backend, create the frontend, and link it to a database. We will also connect to a recipe API using an API key.

If you prefer to skip the setup, a starter code is available on CodeCoyotes, which includes some basic setup and CSS. But you'll still need to create a database and obtain an API key.

Let’s start by setting up our workspace:

Step 1: Setup Your Workspace

Start by opening Visual Studio Code (or your preferred code editor). Create a new folder named recipe-app on your desktop or another location. Then drag this folder into the Visual Studio Code window to open it.

Your folder structure should now look like this:

recipe-app

Step 2: Setup the Backend

In the recipe-app folder, create another folder named backend.

Navigate to View -> Terminal in Visual Studio Code to open a terminal. Change your directory to the backend folder using the command cd backend.

Type npm init to initialize a new npm package, then hit Enter to move through the prompts. For the entry point, type ./src/index.ts and hit Enter.

Your folder structure should now look like this:

recipe-app
|-- backend
    |-- package.json

Step 3: Install the Dependencies

First, install the necessary dependencies using the following command:

npm install express prisma @prisma/client cors

Now, install the development dependencies:

npm install --save-dev ts-node typescript nodemon @types/cors @types/express @types/node

Your folder structure should now look like this:

recipe-app
|-- backend
    |-- node_modules
    |-- package.json
    |-- package-lock.json

Step 4: Setup Your Backend Code

In the backend folder, create a new folder named src. Inside src, create a file named index.ts.

Add the following code to index.ts:

import express from "express";
import cors from "cors";

const app = express();

app.use(express.json());
app.use(cors());

app.get("/api/recipe/search", async (req, res) => {
  res.json({ message: "success" });
});

app.listen(5000, () => {
  console.log("Server running on localhost:5000");
});

Step 5: Add the Start Script

First, open package.json in the backend folder. In the scripts section, replace the test script with a start script as follows:

"scripts": {
    "start": "npx nodemon ./src/index.ts"
}

Step 6: Run Your Backend

In the terminal, ensure you are in the backend folder, then type npm start to run your backend server.

Then open a browser and go to http://localhost:5000/api/recipe/search. You should see a response with the message success.

Congratulations! You have successfully set up and run your backend server. In the next part of this tutorial, we will focus on setting up the frontend and connecting to a database.

How to Setup the Database and Prisma

In this section, we'll focus on setting up a Postgres database using ElephantSQL and integrating Prisma to interact with our database effortlessly. Let's jump right in!

Step 1: Set Up the ElephantSQL Database

Start by navigating to ElephantSQL. Click on "Get a managed database today," followed by selecting the "Tiny Turtle" plan for a free instance.

Sign in or create an account to proceed to the "Create new instance" page.

Then enter a name for your database (for example, recipe-app-db), keep the plan on the free tier, and choose a region closest to you.

Click on "Review," verify the details, and then click on "Create instance."

Step 2: Retrieve the Database Credentials

Once your instance is created, click on it to view the details.

Locate and copy the URL under the "Details" section. This URL contains the credentials needed to connect to your database.

Step 3: Create an Environment File

Now, return to your code editor and open the backend folder.

Create a new file named .env. Inside the .env file, add the following line:

DATABASE_URL=<Your-Copied-Database-URL>

Replace <Your-Copied-Database-URL> with the URL you copied from ElephantSQL.

Step 4: Integrate Prisma

Stop your server if it's running by pressing Ctrl + C (or Cmd + C on Mac) in the terminal.

In the terminal, ensure you are in the backend directory, and type the following command to initialize Prisma:

npx prisma init

This command will create a new folder named prisma with a file named schema.prisma.

Step 5: Verify Prisma Integration

Now, open prisma/schema.prisma to ensure your DATABASE_URL has been detected correctly.

Start your server again with the command npm start. Then navigate to http://localhost:5000/api/recipe/search in your browser to ensure your API still works and returns the success message.

Your folder structure should now include the Prisma folder and look like this:

recipe-app
|-- backend
    |-- prisma
        |-- schema.prisma
    |-- .env
    |-- ...

How to Get and Secure a Spoonacular API Key

Step 1: Obtain an API Key from Spoonacular

To do this, navigate to Spoonacular and click on "Start Now." Sign up for an account and proceed to the dashboard.

Within the dashboard, click on “Profile” on the left-hand side, and find the section related to API keys. Generate a new API key, and copy it to your clipboard.

Step 2: Store the API Key Securely

Now, return to your code editor and open the .env file in the backend folder.

Add a new environment variable to store your API key as follows:

API_KEY=<Your-Copied-API-Key>

Replace <Your-Copied-API-Key> with the API key you copied from Spoonacular.

Step 3: Install and Setup Thunder Client

In Visual Studio Code, navigate to the extensions tab (square icon on the sidebar), and search for Thunder Client.

Install Thunder Client by clicking on the Install button. Once installed, you will see a new icon (a purple thunderbolt) on the sidebar.

Step 4: Test the API Key with Thunder Client

Now click on the Thunder Client icon, then click on “New Request.”

Copy the endpoint URL for searching recipes from Spoonacular's documentation. It should look something like this: https://api.spoonacular.com/recipes/complexSearch.

Paste this URL into the URL bar in Thunder Client.

Under the query tab, add two new parameters:

• apiKey with the value of your API key.
• query with a value of burgers or any other term you wish to search for.

Then hit "Send" to issue the request and observe the response. You should see a list of recipes related to the term you searched for, indicating that your API key and endpoint are working correctly.

How to Create the Search Endpoint

Step 1: Setup a New File for Recipe API Logic

First, navigate to your backend/src folder and create a new file named recipe-api.ts.

In recipe-api.ts, initiate a constant to store your API key from the environment variables:

const API_KEY = process.env.API_KEY;

Step 2: Create the searchRecipes Function

In recipe-api.ts, define a new asynchronous function searchRecipes that takes in a searchTerm and a page as parameters:

export const searchRecipes = async (searchTerm: string, page: number) => {
  if (!API_KEY) {
    throw new Error("API key not found");
  }

  const baseURL = "https://api.spoonacular.com/recipes/complexSearch";
  const url = new URL(baseURL);

  const queryParams = {
    apiKey: API_KEY,
    query: searchTerm,
    number: 10,
    offset: (page - 1) * 10,
  };

  url.search = new URLSearchParams(queryParams).toString();

  try {
    const searchResponse = await fetch(url.toString());
    const resultsJson = await searchResponse.json();
    return resultsJson;
  } catch (error) {
    console.error(error);
  }
};

Step 3: Import and Use searchRecipes in index.ts

Now, navigate back to index.ts in the backend/src folder.

Import the searchRecipes function from recipe-api.ts at the top of your file:

import * as RecipeAPI from "./recipe-api";

Locate the endpoint where you wish to utilize the searchRecipes function, and modify it to call searchRecipes with the appropriate arguments, then return the results:

app.get("/api/recipe/search", async (req, res) => {
  const searchTerm = req.query.searchTerm as string;
  const page = parseInt(req.query.page as string);

  const results = await recipeAPI.searchRecipes(searchTerm, page);
  return res.json(results);
});

Step 4: Test Your Endpoint

Now you can restart your server by stopping it (Ctrl + C or Cmd + C on Mac) and then running npm start.

Test your endpoint by sending a GET request with the appropriate query parameters. For example, navigate to http://localhost:5000/api/recipe/search?searchTerm=burgers&page=1 in your browser or use a REST client like Postman or Thunder Client.

You should now see a list of recipes returned in response to your request, indicating that your backend logic for calling the Recipe API and returning the results is functioning as expected.

How to Setup the Frontend

Before you get started on this section, make sure you're in the top-level directory of your project, which in this case is named recipe-app.

Step 1: Create a React App with Vite

Start by opening a terminal and ensuring you're in the top-level folder (recipe-app).

Then run the following command to install the latest version of Vite:

npm install vite@latest --save-dev

Now, initiate a new React project with Vite by running:

npx create-vite frontend --template react-ts

This command creates a new folder named frontend, sets it up as a React project, and specifies TypeScript as the language.

Step 2: Navigate to Your New React App

Change your directory to the frontend folder:

cd frontend

Then install any necessary dependencies:

npm install

Step 3: Start the Development Server

You can start the development server with the following command:

npm run dev

Your default web browser should now open displaying the initial setup of your React app, which includes a counter example.

Step 4: Clean Up and Personalize Your React App

Now you can head back to your code editor and navigate to frontend/src. Delete the index.css file as it won't be needed.

In main.tsx, remove the import statement for index.css.

Now, open App.tsx. Here, you'll see code for a counter. Delete all the content inside App.tsx.

Let’s start fresh by adding the following code to App.tsx:

// src/App.tsx
const App = () => {
  return <div>Hello from Recipe App</div>;
};

export default App;

Save App.tsx and check your browser to see the updated text: "Hello from Recipe App".

Step 5: Setup Your Stylesheet

Go to src and open App.css. Delete all the pre-filled styles but keep the .root class definition empty for now.

Add a font-family property to the .root class:

/* src/App.css */
.root {
  font-family: Helvetica, Arial, sans-serif;
}

Then head back to App.tsx and import your stylesheet:

// src/App.tsx
import "./App.css";

const App = () => {
  // ...
};

Then save App.tsx and check your browser to see the updated font.

Now you have a clean slate to start building out the frontend of your recipe app with React and TypeScript, using Vite as your build tool. As you progress, you can now start adding components, routing, and state management to build out your application's UI and functionality.

How to Call the Search API and Display Results on the Frontend

Now we are going to fetch data from an API and display the results on the UI. The API response is structured as follows:

{
  "results": [
    {
      "id": 650235,
      "title": "Loaded Turkey Burgers",
      "image": "https://spoonacular.com/recipeImages/650235-312x231.jpg",
      "imageType": "jpg"
    }
    // ... other recipes
  ],
  "offset": 10,
  "number": 10,
  "totalResults": 50
}

Each recipe object contains an id, title, image, and imageType. We will map through the results array and display each recipe on our UI.

Step 1: Setup State

In your App.tsx, setup state to store the searchTerm and recipes.

import React, { useState } from "react";

const App = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [recipes, setRecipes] = useState([]);

  // ... rest of your component
};

Step 2: Fetch Data from the API

Create a new file API.ts and set up a function to make the API call.

// src/API.ts
const searchRecipes = async (searchTerm: string, page: number) => {
  const baseURL = new URL("http://localhost:5000/api/recipes/search");
  baseURL.searchParams.append("searchTerm", searchTerm);
  baseURL.searchParams.append("page", page.toString());

  const response = await fetch(baseURL.toString());

  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  return response.json();
};

export { searchRecipes };

Step 3: Create a Handler Function

Back in App.tsx, import the searchRecipes function and create a handler function to be called when the form is submitted.

import React, { useState, FormEvent } from "react";
import { searchRecipes } from "./API";

const App = () => {
  // ... previous state setup

  const handleSearchSubmit = async (event: FormEvent) => {
    event.preventDefault();

    try {
      const { results } = await searchRecipes(searchTerm, 1);
      setRecipes(results);
    } catch (error) {
      console.error(error);
    }
  };

  // ... rest of your component
};

Step 4: Display the Data

Display the recipes data in your component's return statement.

const App = () => {
  // ... previous code

  return (
    <div>
      <form onSubmit={handleSearchSubmit}>
        <button type="submit">Submit</button>
      </form>
      {recipes.map((recipe) => (
        <div key={recipe.id}>
          Recipe Image Location: {recipe.image}
          <br />
          Recipe Title: {recipe.title}
        </div>
      ))}
    </div>
  );
};

export default App;

Step 5: Define the Recipe Type

Define a Recipe interface in a new file named types.ts.

// src/types.ts
export interface Recipe {
  id: number;
  title: string;
  image: string;
  imageType: string;
}

Back in App.tsx, import the Recipe interface and use it to type your state and map function.

import React, { useState, FormEvent } from 'react';
import { searchRecipes } from './API';
import { Recipe } from './types';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [recipes, setRecipes] = useState<Recipe[]>([]);

  // ... rest of your code

  return (
    <div>
      {/* ... rest of your return statement */}
      {recipes.map((recipe: Recipe) => (
        {/* ... rest of your map function */}
      ))}
    </div>
  );
};

export default App;

Step 6: Test Your Setup

Now, start both your frontend and backend servers. Open your browser, navigate to your app, and try submitting a search. You should see the recipes data displayed on the screen.

# In one terminal
cd frontend
npm run dev

# In another terminal
cd backend
npm start

This setup should now fetch and display recipe data based on the hardcoded searchTerm of "burgers". In a real-world scenario, you'd replace the hardcoded searchTerm with a dynamic value from a user input field.

How to Create the Search Input and Recipe Card Component

Step 1: Setup Your Project

Start by setting up a new React project or navigate to your existing project directory.

npx create-react-app recipe-search-ui
cd recipe-search-ui

Step 2: Create State Hooks for User Input and Data

In your src folder, create a new file named App.tsx and import the necessary dependencies:

import React, { useState, FormEvent } from "react";

function App() {
  const [searchTerm, setSearchTerm] = useState < string > "";
  const [recipes, setRecipes] = useState < Array < any >> [];

  // ... rest of the code
}

export default App;

Here, we have set up two state hooks: one for capturing the user's search term and another for holding the recipe data returned from the backend.

Step 3: Build a Form to Capture User Input

Within the App component, build a form with an input field and a submit button. We'll also create a function to handle the form submission, which will trigger the API call.

function App() {
  // ... rest of the code

  const handleSearchSubmit = async (event: FormEvent) => {
    event.preventDefault();
    // ... API call logic
  };

  return (
    <div>
      <form onSubmit={handleSearchSubmit}>
        <input
          type="text"
          required
          placeholder="Enter a search term"
          value={searchTerm}
          onChange={(event) => setSearchTerm(event.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      {/* ... rest of the code */}
    </div>
  );
}

Now, users can enter their search term, and upon form submission, handleSearchSubmit will be triggered.

Step 4: Fetch Recipe Data from the Backend

In the handleSearchSubmit function, use the fetch API to send a request to your backend, capture the returned data, and update the recipes state.

const handleSearchSubmit = async (event: FormEvent) => {
  event.preventDefault();
  try {
    const response = await fetch(
      `http://localhost:5000/api/recipes/search?searchTerm=${searchTerm}`
    );
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    setRecipes(data.results);
  } catch (error) {
    console.error(error);
  }
};

Step 5: Display Recipe Data

Create a new folder named components in your src directory. Inside this folder, create a file named RecipeCard.tsx. This component will display individual recipe data.

import { Recipe } from "../types";

interface Props {
  recipe: Recipe;
}

const RecipeCard = ({ recipe }: Props) => {
  return (
    <div className="recipe-card">
      <img src={recipe.image}></img>
      <div className="recipe-card-title">
        <h3>{recipe.title}</h3>
      </div>
    </div>
  );
};

export default RecipeCard;

Now, go back to App.tsx and import RecipeCard. Map over the recipes state to display each recipe using the RecipeCard component.

import RecipeCard from "./components/RecipeCard";

// ... rest of the code

return (
  <div>
    {/* ... rest of the code */}
    {recipes.map((recipe) => (
      <RecipeCard key={recipe.id} recipe={recipe} />
    ))}
  </div>
);

Now, when you submit a search term, the UI will display a list of recipe cards containing the images and titles of the recipes returned from the backend.

Step 6: Test Your UI

Run your React app, enter a search term such as "pasta" or "burgers", and submit the form. You should see a list of recipe cards displaying the relevant recipes from the backend.

npm start

Navigate to http://localhost:3000 in your browser and try out your new recipe search UI!

How to Build the Pagination and View More Functionality

Step 1: Backend Pagination

We added a page query parameter in the search endpoint. The page value is used to calculate the offset for the recipe data fetched from the database or external API.

Step 2: Add "View More" Button to the UI

Navigate to your App.tsx file. Scroll down to the JSX code where you map through the recipes array and add a "View More" button below it.

// ... other code
{
  recipes.map((recipe) => <RecipeCard key={recipe.id} recipe={recipe} />);
}
<button className="view-more" onClick={handleViewMoreClick}>
  View More
</button>;
// ... other code

Step 3: Create a useRef Hook to Store the Current Page Number

Above your component's return statement, create a useRef hook to keep track of the current page number without causing re-renders.

// ... other code
const pageNumber = useRef(1);
// ... other code

Step 4: Implement the handleViewMoreClick Function

Define a function called handleViewMoreClick to handle the logic for loading more recipes.

// ... other code
const handleViewMoreClick = async () => {
  try {
    const nextPage = pageNumber.current + 1;
    const nextRecipes = await api.searchRecipes(searchTerm, nextPage);
    setRecipes((prevRecipes) => [...prevRecipes, ...nextRecipes.results]);
    pageNumber.current = nextPage;
  } catch (error) {
    console.error(error);
  }
};
// ... other code

Step 5: Reset Page Number on New Search

Modify your handleSearchSubmit function to reset the page number back to 1 whenever a new search term is entered.

// ... other code
const handleSearchSubmit = async (event: FormEvent) => {
  // ... other code
  setRecipes(recipes.results);
  pageNumber.current = 1;
};
// ... other code

Step 6: Test Your Implementation

Run your app and perform a search. Click the "View More" button to load more results. Change the search term and ensure that the page number resets, and you get a fresh list of recipes.

npm start

Now, as you search for recipes and click "View More," you should see additional recipes being loaded and displayed in the UI.

How to Build the Recipe Summary Modal Component

I'll walk you through this process step-by-step. We'll create a model that displays a recipe summary using a specific endpoint from the provided API.

Step 1: Understanding the Recipe Summary Endpoint

You can understand where the summary data comes from by looking at your API documentation. The endpoint you need is called Summarize Recipe. This endpoint requires a recipe ID to generate a summary.

Step 2: Setup Backend Endpoint

Create a backend endpoint that interfaces with the Summarize Recipe endpoint.

// In your backend, create an endpoint to fetch recipe summary
// File: recipe-api.ts
export const getRecipeSummary = async (recipeId: string) => {
  if (!apiKey) {
    throw new Error("API key not found");
  }

  const url = new URL(
    `https://api.spoonacular.com/recipes/${recipeId}/summary`
  );
  const params = { apiKey: apiKey };
  url.search = new URLSearchParams(params).toString();

  const response = await fetch(url.toString());
  const json = await response.json();
  return json;
};

Step 3: Create a Backend Route

Create a route in your backend to handle requests to your new endpoint.

// File: index.ts
app.get("/api/recipe/:recipeId/summary", async (req, res) => {
  const recipeId = req.params.recipeId;
  const result = await recipeSummary(recipeId);
  res.json(result);
});

Step 4: Create the Recipe Modal Component

Create a React component for the recipe modal. We will use the useEffect hook to call the backend endpoint we just created, and store the Recipe Summary data in state.

First add a type for RecipeSummary to types.ts

export interface RecipeSummary {
  id: number;
  title: string;
  summary: string;
}

// File: RecipeModal.tsx
import React, { useState, useEffect } from "react";
import { RecipeSummary } from "../types";

interface Props {
  recipeId: string;
  onClose: () => void;
}

const RecipeModal: React.FC<Props> = ({ recipeId, onClose }) => {
  const [recipeSummary, setRecipeSummary] =
    (useState < RecipeSummary) | (null > null);

  useEffect(() => {
    const fetchRecipeSummary = async () => {
      try {
        const summary = await getRecipeSummary(recipeId);
        setRecipeSummary(summary);
      } catch (error) {
        console.error(error);
      }
    };
    fetchRecipeSummary();
  }, [recipeId]);

  return (
    <div className="overlay">
      <div className="modal">
        <div className="modal-content">
          <div className="modal-header">
            <h2>{recipeSummary?.title}</h2>
            <span className="close-button" onClick={onClose}>
              &times;
            </span>
          </div>
          <p dangerouslySetInnerHTML={{ __html: recipeSummary?.summary }} />
        </div>
      </div>
    </div>
  );
};

export default RecipeModal;

Step 5: Style the Modal

Add the following CSS to style the modal:

/* File: app.css */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: white;
  padding: 2em;
  border-radius: 4px;
  max-width: 500px;
}

.modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

Step 6: Render and Handle Modal Interactions

Modify your main component to handle rendering and interactions with the modal.

// File: App.tsx
const App: React.FC = () => {
  const [selectedRecipe, setSelectedRecipe] =
    (useState < Recipe) | (undefined > undefined);

  return (
    <div className="App">
      {/* Other components and logic */}
      {selectedRecipe && (
        <RecipeModal
          recipeId={selectedRecipe.id.toString()}
          onClose={() => setSelectedRecipe(undefined)}
        />
      )}
    </div>
  );
};

export default App;

Now, when a user clicks on a recipe, the modal will appear displaying the summary of the selected recipe. The modal can be closed by clicking the close button, which will set the selectedRecipe back to undefined, hiding the modal.

How to Create Endpoints to Get/Create/Delete Favorite Recipes

Step 1: Setup the Database

First, we need to extend our database schema to include a table for storing favorite recipes by their IDs.

First, navigate to the Prisma folder within the backend directory of your project. Then open the schema.prisma file.

Define a new model for favorite recipes as follows:

model FavoriteRecipe {
  id        Int    @id @default(autoincrement())
  recipeId  Int    @unique
}

Step 2: Synchronize the Database Schema

Now, let's synchronize the updated schema with our database.

cd backend
npx prisma db push

Step 3: Setup the Endpoints

We need to set up endpoints in our Node backend to handle creating, viewing, and deleting favorites. We'll use the prismaClient to help us perform crud operations on the database.

First, we'll create a new post endpoint like this:

// In backend/index.ts
import { PrismaClient } from "@prisma/client";

const prismaClient = new PrismaClient();

app.post("/api/recipes/favorite", async (req, res) => {
  const { recipeId } = req.body;
  try {
    const favoriteRecipe = await prismaClient.favoriteRecipe.create({
      data: { recipeId },
    });
    res.status(201).json(favoriteRecipe);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Oops, something went wrong." });
  }
});

Next, we'll create the View endpoint. To do that, create a utility function to fetch recipe details by IDs:

// In backend/src/recipe-api.ts
export const getFavoriteRecipesByIds = async (ids: string[]) => {
  if (!apiKey) {
    throw new Error("API Key not found");
  }
  const url = new URL("https://api.spoonacular.com/recipes/informationBulk");
  url.search = new URLSearchParams({
    apiKey: apiKey,
    ids: ids.join(","),
  }).toString();

  const response = await fetch(url);
  const json = await response.json();
  return { results: json };
};

Now, create the endpoint to fetch all favorite recipes:

// In backend/index.ts
import { getFavoriteRecipesByIds } from "./src/recipe-api";

app.get("/api/recipes/favorite", async (req, res) => {
  try {
    const favoriteRecipes = await prismaClient.favoriteRecipe.findMany();
    const recipeIds = favoriteRecipes.map((recipe) =>
      recipe.recipeId.toString()
    );
    const favorites = await getFavoriteRecipesByIds(recipeIds);
    res.json(favorites);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Oops, something went wrong." });
  }
});

Next up is the Delete endpoint:

// In backend/index.ts
app.delete("/api/recipes/favorite", async (req, res) => {
  const { recipeId } = req.body;
  try {
    await prismaClient.favoriteRecipe.delete({
      where: { recipeId },
    });
    res.status(204).send();
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Oops, something went wrong." });
  }
});

Step 4: Test the Endpoints

You can use tools like Postman or Thunder Client to test the endpoints. Make sure to adjust the request method and URL accordingly, and provide the necessary request body or parameters.

• Creating a Favorite: POST request to /api/recipes/favorite with recipeId in the body.
• Viewing Favorites: GET request to /api/recipes/favorite.
• Deleting a Favorite: DELETE request to /api/recipes/favorite with recipeId in the body.

Step 5: Verify the Database

Check the favoriteRecipes table in your ElephantSQL database to verify the actions performed through the endpoints.

How to Add Favorites Functionality to the Frontend

Step 1: Setup the Tab Functionality

Next, we'll look at how to integrate these endpoints on the frontend. We'll start by setting up tabs for 'Search' and 'Favorites' in our app.

First, define a new state to keep track of the selected tab.

import React, { useState } from "react";

type Tabs = "search" | "favorites";

function App() {
  const [selectedTab, setSelectedTab] = useState < Tabs > "search";

  // Rest of your code...
}

Step 2: Render Tabs

Now you'll render tabs in your JSX, and handle tab switching with the onClick event. This makes each <h1> element is clickable, and saves the tab the user clicked on in state. This helps conditionally render different UI elements depending on their selection.

// Inside your JSX...
<div className="tabs">
  <h1 onClick={() => setSelectedTab("search")}>Recipe Search</h1>
  <h1 onClick={() => setSelectedTab("favorites")}>Favorites</h1>
</div>

Step 3: Conditional Rendering

Based on the selected tab, you want to conditionally render either the search component or the favorites component. This will show/hide either the "search section" or the "favourites" section depending on the selectedTab state variable.

{selectedTab === 'search' && (
  // search component code...
)}
{selectedTab === 'favorites' && (
  // favorites component code...
)}

Step 4: Fetch Favorite Recipes

Next we need to populate the Favorite recipes tab with our favourite recipes. We want to do this when the App loads, for a quick user experience.

To do this, fetch the favorite recipes from the backend when the app loads using the useEffect hook, and store the fetched favorite recipes in a new state.

// api.ts
export const getFavouriteRecipes = async () => {
  const url = new URL("http://localhost:5000/api/recipes/favourite");
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
};

//App.tsx
import React, { useEffect, useState } from "react";

// ... Rest of your imports and code

function App() {
  // ... Rest of your state declarations

  const [favoriteRecipes, setFavoriteRecipes] = useState([]);

  useEffect(() => {
    const fetchFavoriteRecipes = async () => {
      try {
        const favouriteRecipes = await api.getFavouriteRecipes();
        setFavouriteRecipes(favouriteRecipes.results);
      } catch (error) {
        console.error(error);
      }
    };

    fetchFavoriteRecipes();
  }, []);

  // ... Rest of your code
}

Step 5: Render Favorite Recipes

Now you need to render the favorite recipes in the 'Favorites' tab.

{selectedTab === 'favorites' && (
  <div>
    {favoriteRecipes.map(recipe => (
      // Render each favorite recipe card...
    ))}
  </div>
)}

Step 6: Add a Heart Icon

Next we'll add a way for the user to add and remove favorites. We'll do this by adding a "heart" icon to each card.

Before diving into the code, ensure you are in the correct directory by navigating to your project's front-end directory in your terminal. Install the necessary package for icons by running:

npm install react-icons

Step 7: Import the Icon

Open the RecipeCard component, and import the heart icon at the top of your file:

import { AiOutlineHeart } from "react-icons/ai";

Step 8: Insert the icon

In the RecipeCard component, add the heart icon within a span element just above the h3 tag:

<span onClick={handleFavoriteClick}>
  <AiOutlineHeart size={25} />
</span>

Step 9: Add CSS Styling

In your App.css file, add the following CSS to style the icon and ensure it appears on the same line as the title. Using flex and align-items means the icon and title will be aligned nicely beneath the image:

.recipe-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

Step 10: Create an Add Favourite Event Handler

In App.tsx, create an event handler for favoriting a recipe. This is what will get called when the user clicks the heart icon on an recipe that hasn't yet been favorited:

const addfavoriteRecipe = async (recipe) => {
  try {
    await API.addFavoriteRecipe(recipe);
    setFavoriteRecipes([...favoriteRecipes, recipe]);
  } catch (error) {
    console.log(error);
  }
};

Step 11: API Logic

In a new file called API.ts, create a function to handle the API call to save a favorite recipe. This will call our endpoint which we created earlier in the backend:

export const addFavoriteRecipe = async (recipe) => {
  const body = {
    recipeId: recipe.id,
  };
  const response = await fetch("http://localhost:5000/api/recipes/favourite", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    throw new Error("Failed to save favorite");
  }
};

Step 12: Hook Up the Event Handler

Pass the event handler to the RecipeCard component:

<RecipeCard
  //.. other props
  onFavoriteButtonClick={favoriteRecipe}
/>

Step 13: Create the Remove Favorite Event Handler

Similarly, create an event handler for un-favoriting a recipe in App.tsx:

const removeFavoriteRecipe = async (recipe) => {
  try {
    await API.removeFavoriteRecipe(recipe);
    const updatedRecipes = favoriteRecipes.filter(
      (favRecipe) => favRecipe.id !== recipe.id
    );
    setFavoriteRecipes(updatedRecipes);
  } catch (error) {
    console.log(error);
  }
};

Step 14: API Logic

In API.ts, create a function to handle the API call to remove a favorite recipe. Again, this will call the backend API to remove a recipe which we created earlier:

export const removeFavoriteRecipe = async (recipe) => {
  const body = {
    recipeID: recipe.id,
  };
  const response = await fetch("http://localhost:5000/api/recipes/favourite", {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });
  if (!response.ok) {
    throw new Error("Failed to remove favorite");
  }
};

Step 15: Conditional Event Handler

Depending on if the user is "favoriting" or "unfavoriting" a recipe, we want to conditionally call either addFavoriteRecipe or removeFavoriteRecipe based on the favorited state:

<RecipeCard
  //.. other props
  onFavoriteButtonClick={isFavorite ? removeFavoriteRecipe : favoriteRecipe}
/>

Step 16: Determine the Favorited State

Before we can display the heart icon a favorited/non-favorited state, we need to know if the recipe is already a or not.

To do this, we determine whether a recipe is favorited by checking if it exists in the favoriteRecipes state array. Pass this information to RecipeCard:

const isFavorite = favoriteRecipes.some(
  (favRecipe) => favRecipe.id === recipe.id
);
<RecipeCard
  // ...other props
  isFavorite={isFavorite}
/>;

Step 17: Display the Favorited State

In RecipeCard, conditionally render a filled or outlined heart icon based on the isFavorite prop:

{
  isFavorite ? (
    <AiFillHeart size={25} color="red" />
  ) : (
    <AiOutlineHeart size={25} />
  );
}

How to Add CSS/Styling

Step 1: Prepare the Hero Image

We've added some basic styling so far, so lets complete the CSS so that our app looks polished!

Firstly obtain an image from a source like Pexels or any other image repository. This will be used in the Hero section of our app at the top, and will have our title overlaid on it. Ensure the image has a horizontal orientation for better handling of aspect ratios.

Place the image in the public folder of your project.

project-folder
│
└───public
    │   hero-image.jpeg

Step 2: Structure the Header

Open app.tsx and locate the JSX markup. Add a className of app-container to the top div element.

Inside the app-container div, add a new div with a className of header. Within the header div, add an img element with a src attribute pointing to your image, and a div element with a className of title containing the app's title.

<div className="app-container">
  <div className="header">
    <img src="/hero-image.jpeg" alt="Hero" />
    <div className="title">My Recipe App</div>
  </div>
  {/* ...rest of your code */}
</div>

Step 3: Style the Header

Open app.css and scroll to the top. Add the following CSS to style the app-container, header, img, and title elements. This makes the title appear on top of the image, with a translucent background:

.app-container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.header {
  position: relative;
}

.header img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  border-radius: 1em;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2em;
  text-align: center;
  background-color: black;
  opacity: 0.8;
  padding: 0.5em 1.5em 0.5em 1.5em;
}

Step 4: Adjust the Layout

Add padding to the body element and use a media query to add margins on larger screens. We do this so our app doesn't appear to narrow on mobile devices. When the screen size reaches 768px, the media query will kick in and add margin to the left and right of our app, so that the app doesn't appear too wide.

body {
  padding: 5em 0;
  height: 100vh;
  background-color: #f0f0f0; /* or any color you prefer */
}

@media (min-width: 768px) {
  body {
    margin-left: 10em;
    margin-right: 10em;
  }
}

Step 5: Style Tabs Underline

Currently its not clear which tab the user has selected. What we want to do is add an orange underline to the selected tab. To do this, we can use a combination of CSS classes and conditional rendering.

Within app.tsx, locate your h1 elements representing tabs, and dynamically apply a className of tab-active based on the selected tab.

<h1 className={selectedTab === 'search' ? 'tab-active' : ''}>Search</h1>
<h1 className={selectedTab === 'favorites' ? 'tab-active' : ''}>Favorites</h1>

In app.css, define the tab-active class:

.tab-active {
  border-bottom: 4px solid orange; /* or any color you prefer */
  padding-bottom: 0.5em;
}

Step 6: Style the Search Bar

We want our search bar to take up the width of the container, and we want to add an icon instead of the search button, which makes our UI more interesting.

In app.tsx, locate the form element within the Search tab. Replace the text "Submit" in the button element with an icon from a library like React Icons.

<button>
  <AiOutlineSearch size={40} />
</button>

In app.css, style the form, input, and button elements:

form {
  display: flex;
  background-color: white;
  align-items: center;
}

input {
  padding: 0.5em;
  font-size: 2em;
  flex: 1;
  border: none;
}

input:focus {
  outline: none;
}

button {
  background-color: white;
  border: none;
  cursor: pointer;
}

Step 7: Implement a Responsive Recipe Card Grid

Currently our Recipe Cards are stacked horizontally. We'll use CSS grid to make the recipe cards appear in a grid layout, which will also make things more responsive.

Within app.tsx, create a new div with a className of recipe-grid just above where you map over your recipes, and place the logic to rendering the recipes inside this div.

<div className="recipe-grid">
  {recipes.map((recipe) => {
    const isFavourite = favouriteRecipes.some((favRecipe) => favRecipe.id === recipe.id);

    return (
      <RecipeCard
        key={recipe.id}
        recipe={recipe}
        onFavouriteButtonClick={isFavourite ? removeFavouriteRecipe : addFavouriteRecipe}
        onClick={() => setSelectedRecipe(recipe)}
        isFavourite={isFavourite}
      />
    );
  })}
</div>

In app.css, style the recipe-grid and recipe-card elements:

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2em;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: white;
  padding: 1em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  gap: 1.5em;
}

.recipe-card h3 {
  font-size: 1.5em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Step 8: Final Touches

Style the "View More" button to make sure it matches the style of our app, and is centered beneath our recipe grid:

.view-more-button {
  font-size: 1.5em;
  padding: 1em;
  font-weight: bold;
  margin: auto;
}

Conclusion

Congrats on making it to the end! Hopefully you've learned a few things about full stack development using React and Node.

If you enjoyed this project, you can find more at CodeCoyotes.com, where you can also send me a message if you need to get in contact.

Thanks for reading, see you in the next one!

We'll start from scratch and end up with a fully functioning app where you can create, edit, and delete notes. Plus, we're adding validation on both the UI and the backend to keep things in check!

This guide is all about giving you the real-deal experience of building a web app. You'll get to learn how each piece of the puzzle fits together – from the front-end magic with React, to the server-side wonders with Node.js, and storing all the good stuff in a PostgreSQL database. And hey, we're making sure it looks good and works well on mobile screens too!

By the end of this, you’ll have a good grip on full stack development with React and Node, which you can carry with you into future projects. It’s all about learning by doing, and getting the skills to make your ideas come to life. So, grab a cup of coffee, roll up your sleeves, and let’s get coding!

Prerequisites

Since we will be focusing on how to build a project, there are a few prerequisites that will be needed to get the most out of this tutorial:

• Some knowledge about web development concepts (frontend, backend, databases, API's, REST).
• Some knowledge of JavaScript (variables, functions, objects, arrays, and so on).
• Basic understanding on React (how to create components, add styles, work with state).
• Basic understanding on Node.js/Express (working with APIs).

Table of Contents

• What We'll Build
• Challenge: Try it Yourself First!
• Video Tutorial
• PART 1 – Create the UI
• PART 2 - Create the Backend
• PART 3 - Connect UI to Backend
• The End - Why not try the bonus challenges?

What We'll Build

In this tutorial, we'll build a full stack notes app from scratch, using React, Node.js and PostgreSQL, with the following features:

• Create/Edit/Delete Notes
• Validation on the UI and Backend
• Responsive on mobile screens

Challenge: Try it Yourself First!

If you would like to attempt this project yourself first without looking at the tutorial, here's a few hints:

• Tackle one little piece at a time. For example, you would focus on getting the UI working on the UI first, and tackle the APIs later.
• Think about your data – What do you need to store? What data structure (for example, arrays) will you use to return the data via the API? How will you render this data on the UI?
• Don't forget about validation and error handling. What will happen if the user tries to save a note without a title field? How will you prevent this? (Hint: Forms and the required field will be your friend here)
• Remember there is no perfect way to complete a project. The tutorial below is one way to tackle the problem. You can choose to go a different way, putting your own unique style on things. The main thing is that you start!

If you need more help on getting started yourself, you can find more hints and tips, starter code, and completed code you can reference over at codecoyotes.com.

Video Tutorial

PART 1 – Create the UI

We'll start this tutorial by creating the UI using some mock data. This lets us focus on our styling, and how things to look, without having to worry about creating a backend right away.

Create a New React App

Okay, first things first: let's set up our project structure. Open your terminal and navigate to your desktop. Our next step is to create a new folder that will hold both our UI and backend code. Let's name it notes-app:

mkdir notes-app

Once that's done, navigate into the newly created notes-app directory:

cd notes-app

Next, we'll create a new React app using TypeScript as our template. We'll use the npx create-react-app command for this, specifying TypeScript as the template:

npx create-react-app notes-app --template typescript

After you hit Enter, the process may take a few minutes to install all necessary packages. Once it's completed, open the notes-app folder in Visual Studio Code or your preferred IDE.

In Visual Studio Code, you should see that the notes-app is at the top level of your directory. As the course progresses, we will add a notes-app-server directory as well to keep all the code together in one place.

Now open a new terminal within your IDE and navigate to your React app's directory (let's assume you named it notes-app):

cd notes-app

Then, run the following command to start the front-end development server:

npm start

If all goes well, your browser will automatically open and display your new React app. You should see a spinning React logo, among other default assets.

Finally, let's clear out the boilerplate code to have a clean starting point for our app. Open src/App.tsx in your IDE and delete its content. This will be our new starting point for building the app.

Add UI Elements

Okay, the first thing we'll do is put some of our UI components in place. This will consist of the general markup and CSS, without involving any JavaScript. This gives us a glimpse of how we envision the layout, without having to concern ourselves with API calls or database interactions at this stage.

We'll navigate to .App.tsx and create a new component. Make sure to import our stylesheet from App.css. The first thing to add is a div with a class name of AppContainer. This will help position our form and the CSS grid for our notes.

Within this div, we'll include our form tags. Here, we'll add an input field for the title — this is where the user can enter the note title. We'll also include a textarea for the note content. Both of these fields will be set to required, enabling browser-native validation messages if the user tries to submit an incomplete form.

At the bottom of the form, we'll include a button of type submit, which will handle form submissions when clicked.

Off to the right, we'll add a div to contain our notes. This will be structured as a CSS grid. Initially, we'll populate this grid with a single note to see how it looks.

For our note, we'll have a header containing a delete button situated on the right-hand side. We'll display the user-entered title – for demonstration purposes, we're using a dummy title. We'll also include the content that the user entered.

Finally, we'll export our component at the very bottom.

Completed code for this section

import "./App.css";

const App = () => {
  return (
    <div className="app-container">
      <form className="note-form">
        <input placeholder="Title" required />
        <textarea placeholder="Content" rows={10} required />

        <button type="submit">Add Note</button>
      </form>
      <div className="notes-grid">
        <div className="note-item">
          <div className="notes-header">
            <button>x</button>
          </div>
          <h2>Note Title</h2>
          <p>Note content</p>
        </div>
      </div>
    </div>
  );
};

export default App;

Add CSS

Start the App

First, let's open a terminal and type npm start. This will launch the app in the browser. As you can see on the right-hand side, the appearance isn't great yet. This is because we haven't applied any styles. To fix this, we'll navigate to App.css and style the classes we added earlier.

You can download the styles from the link in the description if you prefer to copy and paste. Alternatively, feel free to follow along with the video and pause as needed. Remember, these styles are just examples for learning – they don't have to be perfect.

Style the Body and App Container

In App.css, the first thing we'll do is add some styles to the body. We'll give it a gray background and a margin to prevent the app from touching the browser window edges. Next, we'll style our App Container.

We're designing this mobile-first, meaning the default styles will target mobile screens. We'll use media queries for larger displays. This approach is optional, but often it's easier to start with mobile designs.

For mobile screens, we want our App Container to default to a single column layout, stacking our form and notes grid on top of each other.

Use Media Queries

We'll add a media query specifying that for screens larger than 600 pixels, we'll use a two-column layout. We'll define this using grid-template-columns.

The first column will be 200 pixels wide, accommodating the form. The second column will use 1fr, filling the remaining space. A 20-pixel gap will separate the two columns.

Style the Notes Grid

Next, let's style our notes grid. We'll use CSS grid and define grid-template-columns.

Each grid item will have a minimum width of 250 pixels and can expand to fill available space. Don't worry if this sounds confusing – it will become clear soon.

We'll also set grid-auto-rows to ensure each row is a minimum of 250 pixels tall, accommodating notes of different sizes while maintaining a consistent row height.

Style Individual Notes

For each note, we'll use Flexbox and set flex-direction to column, stacking the header, title, and content vertically. We'll also add some basic styles like border, padding, and background color. A box shadow will provide a finishing touch.

Style the Header and Delete Button

The header will also use Flexbox, and we'll set justify-content to flex-end to align the delete button to the right. The button will receive custom styles for a polished look.

Style the Form

Lastly, we'll style the form on the left column. Again, we'll use Flexbox with a column layout and a 20-pixel gap between elements. The text area and input fields will get borders, padding, and resized fonts. We'll also style the submit button and add hover effects.

Completed code for this section

body {
  margin: 20px;
  background-color: lightgrey;
}

.app-container {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .app-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
  }
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 20px;
}

.note-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.notes-header {
  display: flex;
  justify-content: flex-end;
}

.notes-header button {
  font-size: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  max-width: fit-content;
}

h2 {
  margin: 0;
}

.note-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

textarea,
input {
  border-radius: 5px;
  border: 1px solid black;
  padding: 10px;
  font-size: 16px;
}

.note-form button {
  border-radius: 5px;
  background-color: rgb(64, 154, 184);
  border: none;
  padding: 10px;
  font-size: 16px;
  color: white;
}

.note-form button:hover {
  background-color: rgb(106, 175, 198);
  cursor: pointer;
}

.edit-buttons {
  display: flex;
  justify-content: space-evenly;
  gap: 5px;
}

.edit-buttons button {
  flex: 1;
}

.edit-buttons button:last-of-type {
  background-color: rgb(220, 89, 89);
  color: white;
}

Add Dummy Notes

Add Dummy Notes for CSS Grid Testing

Now that we have our CSS in place, the next step is to add dummy notes to our App component to test the responsiveness of our CSS grid. To achieve this, we'll navigate to App.tsx and import the useState hook from React.

Inside our App component, we'll store the notes within the useState hook. Whenever you have UI elements that can change, it's a good idea to manage them in the state. We'll initialize this with a dummy array of notes, where each note has an id, a title, and content:

const [notes, setNotes] = useState<Note[]>([
{
  id: 1,
  title: "test note 1",
  content: "bla bla note1",
},
{
  id: 2,
  title: "test note 2 ",
  content: "bla bla note2",
},
{
  id: 3,
  title: "test note 3",
  content: "bla bla note3",
},
{
  id: 4,
  title: "test note 4 ",
  content: "bla bla note4",
},
{
  id: 5,
  title: "test note 5",
  content: "bla bla note5",
},
{
  id: 6,
  title: "test note 6",
  content: "bla bla note6",
},
]);

Think of this as simulating an API call and storing the returned data in the state. The structure of this data will be similar to what we'll receive from our API requests when we eventually build out our backend.

Map Notes to Components

With our array of notes in state, we can now use the map function within our notes grid to display the markup for each note. The map function will run as many times as there are notes in the array. Instead of hardcoding the title and content, we'll pull these values from each note object:

<div className="notes-grid">
  {notes.map((note) => (
    <div className="note-item">
      <div className="notes-header">
        <button>x</button>
      </div>
      <h2>{note.title}</h2>
      <p>{note.content}</p>
    </div>
  ))}
</div>

Verify Responsiveness

After these steps, you should see four notes displayed in the browser, populated with the values from the objects in the array.

To verify that our layout is responsive, you can change the window size. You'll see that the notes adjust based on the window size. When the window is at its smallest—simulating a mobile screen—the form will stack vertically above the notes grid.

Save Note Form

Now that we have our UI set up, let's focus on adding functionality to the form that allows us to create a new note. Initially, we'll implement this for the UI. Later, we'll make the data persistent by linking it to the backend, which we'll build separately.

Use State for Form Inputs in React

In React, when working with forms, it's a best practice to maintain a state variable for each form input. This enables React to control those inputs, making it easier to capture their values and use them programmatically.

In our code, we have two form inputs: one for the title and another for the content. For these, we'll set up two state variables called title and content:

const [title, setTitle] = useState("");
const [content, setContent] = useState("");

For the title input, we bind its value to the title state variable and update this state whenever the user types into the field:

<input
  value={title}
  onChange={(event) => setTitle(event.target.value)}
  placeholder="Title"
  required
></input>

Similarly, we'll handle the textarea for content:

<textarea
  value={content}
  onChange={(event) => setContent(event.target.value)}
  placeholder="Content"
  rows={10}
  required
></textarea>

Handle Form Submission

After binding our form inputs to state variables, the next step is to add a function that handles the form submission. We'll name this function handleAddNote:

const handleAddNote = (event: React.FormEvent) => {
  event.preventDefault();
  console.log("title: ", title);
  console.log("content: ", content);
};

In this function, we specify the parameter type as React.FormEvent to satisfy TypeScript's typing requirement. We also call event.preventDefault() to prevent the form from submitting and refreshing the page, which is its default behavior. Following that, we log the title and content state variables to the console.

Finally, we'll connect this function to the onSubmit event in our form:

<form onSubmit={handleAddNote}>{/* ...form inputs here... */}</form>

Test the Form

To test this setup, open the browser console, input a title and some content, and click the "Add Note" button. You should see the title and content values logged in the console, confirming that our form is capturing input as expected.

Handle the "Add Note" Functionality

Now that we've set up our state variables for the title and content, we can proceed to implement the function that handles adding a new note. This function will create a new note object and add it to our notes array, thereby updating the UI.

Create a New Note Object

First, let's create a new note object and specify its type as Note, taking advantage of TypeScript's type system:

const newNote: Note = {
  id: notes.length + 1,
  title: title,
  content: content,
};

Because we've explicitly typed our object, TypeScript's IntelliSense will assist us in populating the object, ensuring that we don't miss any required properties. For now, we'll set the id to the length of the current notes array plus one, although this id will eventually be generated by our backend database.

Update State with New Note

Once we have our new note object, we need to update our notes state array. We'll use the setNotes function for this purpose:

setNotes([newNote, ...notes]);

The new note object will be the first item in the new notes array, followed by the existing notes, which we'll spread into the new array using the spread operator. This effectively makes a copy of the old notes array and inserts it into the new one.

Clear the Form Inputs

Lastly, let's reset the title and content state variables to empty strings, improving the user experience by clearing the form once a note is added:

setTitle("");
setContent("");

Test the Functionality

And that's it! If you now go to the browser, input a title and some content, and then click "Add Note," you'll see your new note appear at the top of the list, and the form fields will be cleared, ready for a new entry.

Handle the "Update Note" Functionality

In this section, we'll focus on implementing the feature that allows users to update an existing note. When a user clicks on a note, we want to populate the title and content fields in our form with the note's existing values. We'll also add a "Save" and "Cancel" button.

Cleanup and Initial Setup

First, let's clean up our code by removing any console.log statements – they are no longer needed:

const [selectedNote, setSelectedNote] = useState<Note | null>(null);

Track the Selected Note

To track which note the user has clicked on, we'll create a new state variable called selectedNote. This state variable will have a type of Note or null to account for the possibility that no note is selected. We'll initialize this state to null.

Create the Click Handler

Next, let's create a function named handleNoteClick to handle the user's click event on a note. This function will take a note object as its argument:

const handleNoteClick = (note: Note) => {
  setSelectedNote(note);
  setTitle(note.title);
  setContent(note.content);
};

Within this function, we'll use setSelectedNote to save the clicked note to our selectedNote state. Additionally, we'll populate the title and content state variables with the values from the clicked note.

Update the UI

In the JSX for rendering each note, add an onClick event to the top-level div element for each note. Call the handleNoteClick function and pass the note object to it:

<div key={note.id} className="note-item" onClick={() => handleNoteClick(note)}>
  <div className="notes-header">
    <button>x</button>
  </div>
  <h2>{note.title}</h2>
  <p>{note.content}</p>
</div>

Since we are iterating over notes using the map function, this onClick handler will be added to each note automatically.

Save user changes

Now that we have the capability for the user to edit a note, we'll implement the functionality to save the changes they make to both the title and content of a note into our state.

The handleUpdateNote Function

Let's create a new function called handleUpdateNote:

const handleUpdateNote = (event: React.FormEvent) => {
  event.preventDefault();

  if (!selectedNote) {
    return;
  }

  const updatedNote: Note = {
    id: selectedNote.id,
    title: title,
    content: content,
  };

  const updatedNotesList = notes.map((note) => (note.id === selectedNote.id ? updatedNote : note));

  setNotes(updatedNotesList);
  setTitle("");
  setContent("");
  setSelectedNote(null);
};

Within this function, we use event.preventDefault() to prevent the form from automatically submitting when the "Save" button is clicked. We also validate if a note is selected. If not, we exit the function early to prevent potential errors.

Next, we form an updated note object based on the selected note's id and the updated title and content. After that, we utilize the map function to generate a new array of notes, replacing the selected note with our updated note where the id matches. The updated array is then set to our state using the setNotes function. Finally, we reset our title, content, and selectedNote state values to their initial states.

The handleCancel Function

We'll also implement a simple handleCancel function to reset our form and selected note when the user decides not to proceed with an update:

const handleCancel = () => {
  setTitle("");
  setContent("");
  setSelectedNote(null);
};

Update the JSX

Let's introduce conditional rendering in our JSX to display the appropriate buttons based on whether a note is selected for editing or not:

<form
  className="note-form"
  onSubmit={(event) => (selectedNote ? handleUpdateNote(event) : handleAddNote(event))}
>
  {/* ... other form elements ... */}
  {selectedNote ? (
    <div className="edit-buttons">
      <button type="submit">Save</button>
      <button onClick={handleCancel}>Cancel</button>
    </div>
  ) : (
    <button type="submit">Add Note</button>
  )}
</form>

Within our form's onSubmit event, we've added a conditional. If a note is selected, we'll trigger the handleUpdateNote function. Otherwise, the handleAddNote function will be executed.

Test the Implementation

After incorporating these changes, run your application. When you select a note, make modifications, and click on "Save", you'll observe the note gets updated.

Delete Notes from the UI

The last piece of functionality we need on the frontend before moving to the backend development is the ability to delete notes. You'll recall that we added a small "X" button to each note for this purpose. Clicking this button should remove the note from the UI. Let's jump back into the App.tsx file and implement this.

The deleteNote Function

First, create a function named deleteNote as follows:

const deleteNote = (event: React.MouseEvent, noteId: number) => {
  event.stopPropagation();

  const updatedNotes = notes.filter((note) => note.id !== noteId);

  setNotes(updatedNotes);
};

This function takes in two parameters: the event object and the noteId. The event.stopPropagation() line is crucial here because the delete button is nested within a clickable note. It prevents the deleteNote event from interfering with the click event on the note itself. This is especially important when dealing with nested onClick events.

The Filtering Logic

The core of the delete functionality lies in the filter method applied to the notes array. This method loops through the array and applies a function to each element, much like the map method. It will only return the notes whose IDs do not match the noteId provided, effectively removing the selected note.

We save this newly filtered array into a variable called updatedNotes and then update our state with it by calling setNotes(updatedNotes).

Add the onClick Event

After defining the deleteNote function, attach it to the delete button within the note. Pass in the event and the note ID, like so:

<button onClick={(event) => deleteNote(event, note.id)}>x</button>

Test the Functionality

Now, if you run your app and click the delete button on a given note, you will observe that the note disappears from the UI.

PART 2 - Create the Backend

After implementing UI functionalities, it's time to set up a backend that allows us to persist notes when the user adds, edits, or deletes them. For this, create a new folder in your project at the top level and name it notes-app-server. Even though it might seem like the server code is in the same directory as the UI, they are entirely separate and will run independently.

Initial Setup

1. Open your terminal and navigate to the notes-app-server folder you just created.
2. Run the following commands:

npm init
npm i ts-node typescript nodemon @types/cors @types/express @types/node --save-dev
npm i @prisma/client cors express prisma
npx tsc --init

• npm init: Initializes a new npm module and gives you access to npm packages.
• npm i ... --save-dev: Installs development dependencies like TypeScript and type definitions.
• npm i ...: Installs production dependencies like Express and Prisma.

Modify package.json

After running the above commands, navigate to your package.json and update the scripts section with:

"start": "npx nodemon"

This script uses nodemon for hot-reloading.

Implement the Server

Now, within the notes-app-server directory, create a src folder and within it, an index.ts file. Insert the following code:

import express from "express";
import cors from "cors";

const app = express();

app.use(express.json());
app.use(cors());

app.get("/api/notes", async (req, res) => {
  res.json({ message: "success!" });
});

app.listen(5000, () => {
  console.log("server running on localhost:5000");
});

1. import express and cors: We import the required libraries for our server.
2. const app = express();: Initializes a new Express application.
3. app.use(express.json());: Parses the JSON body from incoming API requests.
4. app.use(cors());: Adds CORS support.
5. app.listen(5000, ...): This starts the server listening on port 5000.

Test

Finally, you can test the server by navigating to the notes-app-server directory in your terminal and running:

npm start

You should see the console log: server running on localhost:5000. To further test, you can use a curl command to hit the /api/notes endpoint. If everything is set up correctly, you'll get a JSON object back.

Create a Postgres Database

ElephantSQL is a PostgreSQL database hosting service that makes it easy to set up, maintain, and scale your PostgreSQL database. Here's how to get started with creating a database using ElephantSQL.

Step 1: Sign Up / Log In

1. Navigate to the ElephantSQL website.
2. If you don't have an account, you can sign up for free. If you already have one, go ahead and log in.

Step 2: Create a New Instance

1. Once logged in, you'll find yourself on the "Dashboard" page.
2. Click on the "Create New Instance" button.
3. You'll be taken to a page where you can set the details for your new PostgreSQL database instance.

Step 3: Choose a Plan

1. You can start with a free "Tiny Turtle" plan, which is perfect for small projects and testing.
2. Select the plan that best suits your needs and click "Select".

Step 4: Configure Your Instance

1. You'll be asked to name your instance. Choose a name that you'll remember and that describes the purpose of the database.
2. You can also select the data center that is geographically closest to you or your users for better performance.
3. Click on "Review" and then "Create instance" to finalize the creation.

Step 5: Access Your Database

1. Once the instance is created, click on it in the Dashboard.
2. Here, you'll see the "Details" tab which includes all the information you need to connect to your database: URL, User & Default database, Password, and more.

Populate the DB

Step 1: Login to ElephantSQL

Open your web browser and navigate to the ElephantSQL website. Log
in to your account.

Step 2: Open your Instance

Once logged in, click on the name of the database instance you've set up.

Step 3: Navigate to the SQL Browser

In the left sidebar, find and click on "SQL Browser" or something similar (it might say "Browser").

Step 4: Run SQL Query

In the SQL Query editor that appears, you can type or paste in your SQL command:

INSERT INTO "public"."Note" (title, content)
VALUES ('test title', 'test content bla bla');

After entering the SQL, click on the "Execute" or "Run" button.

That should insert a new row into your Note table with the title 'test title' and content 'test content bla bla'.

Optional: Verify the Insert

You may also want to verify if the data has been inserted correctly. For that, you could use:

SELECT * FROM "public"."Note";

Run this SQL query in the same SQL browser, and it should return all rows from the Note table, including the one you've just inserted.

And that's it! You've inserted a new row into your table through the ElephantSQL web console.

Connect to DB from Node.js backend using Prisma

Step 1: Copy the ElephantSQL Connection URL

Once you've set up your ElephantSQL database, make sure to copy the connection URL that appears on your dashboard. This URL includes your username and password to the database, so keep it secure.

Step 2: Create an .env File

Navigate to your notes-app-server directory and create a new .env file:

touch .env

Open this file and add the following line to specify the database connection URL:

DATABASE_URL="your_connection_url_here"

Make sure not to commit this .env file to your Git repository to keep your credentials secure.

Step 3: Initialize Prisma

If you haven't installed Prisma yet, install it first:

npm install prisma --save-dev

Now, initialize Prisma in the notes-app-server directory:

npx prisma init

This command will create a new prisma folder containing a schema.prisma file.

Step 4: Configure schema.prisma

Open schema.prisma in your text editor. You'll see that Prisma has already generated some configurations for you. Update the datasource block to use the environment variable:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Step 5: Create the Note Model

Below the datasource block, add a new model block to represent a Note:

model Note {
  id      Int     @id @default(autoincrement())
  title   String
  content String
}

Step 6: Generate Prisma Client and Database Table

Run the following command to generate your Prisma client and create the database tables:

npx prisma db push

Step 7: Add Prisma to Your Application

First, import Prisma at the top of your index.ts:

import { PrismaClient } from "@prisma/client";

Then, initialize the Prisma client:

const prisma = new PrismaClient();

Step 8: Query Your Database

Now you can use Prisma in your application to query the database. For example, in a GET endpoint:

app.get("/notes", async (req, res) => {
  const notes = await prisma.note.findMany();
  res.json(notes);
});

Optional: Install Thunder Client in VS Code

(Feel free to skip this step if you already have a preferred API client)

Using curl is useful for quickly testing APIs, but it becomes cumbersome when you need to build out more complex requests. For instance, handling POST requests with custom bodies and headers can be more complicated.

To make API requests more straightforward, we'll install a client designed for this purpose.

While there are several options like Postman, we're going to focus on installing Thunder Client within VS Code, which makes it simple to execute requests right from your IDE.

To install Thunder Client, navigate to the Extensions section in VS Code and type "Thunder Client" in the search bar. You'll find it in the list of available extensions, identifiable by its purple logo. Click "Install," and upon completion, you'll see a Thunder Client option appear on the left-hand taskbar of your IDE.

Once you've clicked on Thunder Client, a list of your past requests will display. To initiate a new request, click the "New Request" button at the top. This action opens a new tab within Visual Studio Code.

Before proceeding, ensure that your server is running. Open the terminal and verify this. We will use Thunder Client to test our GET endpoint and get familiar with the request-making process. In the URL bar, enter the address of your 'notes' endpoint and specify that it's a GET request.

Click "Send," and you'll see a small window displaying the response. If the status code is 200 and you see an array containing your note, you've successfully made a GET request. Thunder Client will be our tool of choice for testing subsequent create, update, and delete requests. Of course, feel free to use any other tool you're comfortable with for this purpose.

Create POST Endpoint

In this section, we'll add an endpoint to our Express application that allows us to create a new note. Locate the index.ts file and insert the following code below your existing GET endpoint:

app.post("/api/notes", async (req, res) => {
  const { title, content } = req.body;

  if (!title || !content) {
    return res.status(400).send("title and content fields required");
  }

  try {
    const note = await prisma.note.create({
      data: { title, content },
    });
    res.json(note);
  } catch (error) {
    res.status(500).send("Oops, something went wrong");
  }
});

The structure is similar to the GET endpoint, but we're using app.post this time. We specify the URL for this POST endpoint and then define our function.

Inside the function, the first task is to extract title and content from the req.body. This is what the UI will send when a user submits the "Add Note" form.

After obtaining title and content, we utilize the Prisma client that we set up earlier to create a new note. We pass the title and content to the prisma.note.create() method, which returns a new note object complete with an ID. This object is then sent back as a JSON response.

To test the endpoint, go to the Thunder Client tab in VS Code. Switch the HTTP method from GET to POST while keeping the URL the same. Click the "Body" tab, which should default to JSON, and input some test values for title and content. After hitting "Send," you should receive a 200 OK status along with the created note, containing an ID, title, and content.

For robustness, we've added validation and error-handling. If either title or content is missing, the server returns a 400 Bad Request status with an appropriate error message. To test this, remove either title or content from the request body and resend it. You should now see a 400 status code along with your error message.

Additionally, we use a try-catch block to handle any errors thrown by the Prisma client. This helps in cases of database connection issues or other unforeseen errors, preventing the backend from crashing.

Finally, you can test the GET endpoint again. It should now return two notes: the first one manually added to the database, and the second one just created through Thunder Client. Switch the method back to GET in Thunder Client and hit "Send"; you should see two notes in the response.

Create PUT Endpoint

In this segment of the tutorial, we'll focus on adding the ability to update a note. Add the following code snippet below the code for your previous POST endpoint:

app.put("/api/notes/:id", async (req, res) => {
  const { title, content } = req.body;
  const id = parseInt(req.params.id);

  if (!title || !content) {
    return res.status(400).send("title and content fields required");
  }

  if (!id || isNaN(id)) {
    return res.status(400).send("ID must be a valid number");
  }

  try {
    const updatedNote = await prisma.note.update({
      where: { id },
      data: { title, content },
    });
    res.json(updatedNote);
  } catch (error) {
    res.status(500).send("Oops, something went wrong");
  }
});

The structure of this app.put function is similar to the GET and POST endpoints you've already created. The major difference is the :id parameter in the URL. This acts as a placeholder, allowing you to specify the ID of the note you wish to update.

Inside the function, you'll notice we extract title and content from req.body, just like before. Additionally, we retrieve the ID from req.params and convert it to an integer using parseInt(), as our database stores IDs as integers.

We've added validation checks to ensure that the id exists and is a valid number. If either id, title, or content is missing or invalid, the API returns a 400 status code along with an error message.

Next, we use a try-catch block to attempt the update operation. Within the try section, we call the prisma.note.update() function. We specify the id in a where object and provide the new title and content via a data object. If the operation succeeds, the updated note is sent back in the response. In case of an error, the catch block will return a 500 status and an error message.

To test this, switch to your Thunder Client tab in VS Code. Update the method to PUT and set the URL to include the ID of the note you want to update, for example, /api/notes/3. In the request body, send JSON data with the new title and content. Upon hitting "Send", a 200 status should confirm the update. The returned note should reflect your changes.

To double-check, perform a GET request on the /api/notes endpoint. You should see the updated note in the list.

Lastly, test the validation by supplying an invalid ID, like a random string. The API should return an error message stating that the ID must be a valid number.

Create DELETE Endpoint

In addition to our existing endpoints, it's crucial to add validation for empty title or content fields in our app.put function, since these fields are required by our database. Revisit your app.put function in index.ts and add similar validation to what we added for the POST request. Specifically, if either title or content is empty, return a 400 status code along with an error message.

With that in place, let's move on to the DELETE endpoint. Add the following code just after your PUT endpoint:

app.delete("/api/notes/:id", async (req, res) => {
  const id = parseInt(req.params.id);

  if (!id || isNaN(id)) {
    return res.status(400).send("ID field required");
  }

  try {
    await prisma.note.delete({
      where: { id },
    });
    res.status(204).send();
  } catch (error) {
    res.status(500).send("Oops, something went wrong");
  }
});

This app.delete function works similarly to the update (app.put) endpoint. It also accepts an ID as part of the URL parameters (query params should be URL parameters or route parameters).

First, we validate that the provided ID is a valid number. If it isn't, we return a 400 status code and an accompanying error message.

Once the ID is validated, we proceed to delete the note using Prisma's delete method. In the try block, we specify which note to delete by its ID in the where object. Upon successful deletion, we return a 204 status code, which indicates 'No Content.' This is a standard way to signal to the frontend or API consumers that the deletion was successful.

If an error occurs during the deletion, the catch block returns a 500 status code along with a generic error message.

To test the new DELETE endpoint, switch your HTTP method to DELETE in your testing tool (like Thunder Client or Postman). Use the ID of the note you wish to delete, such as /api/notes/3, and hit 'Send'. You should receive a 204 status code, indicating the operation was successful. To confirm, perform a GET request on your /api/notes endpoint and observe that the note with the specified ID has indeed been removed.

PART 3 - Connect UI to Backend

Now that we have our backend and UI ready, it's time to connect them. We will do this by using the built in fetch function to call our backend from our UI.

Get and Display Notes

Let's dive back into our frontend code. Just below our state declarations at the top of our component, we're going to introduce a useEffect hook:

useEffect(() => {
  // ...
}, []);

Inside this useEffect, we'll define an asynchronous function named fetchNotes. We need to put this in a separate function because React does not support making the useEffect hook asynchronous directly:

const fetchNotes = async () => {
  // ...
};

To handle any potential errors from the API, we'll wrap our API logic inside a try-catch block:

try {
  // ...
} catch (e) {
  console.log(e);
}

Inside the try block, we use the native fetch function to make an API call. Our API is running at http://localhost:5000/api/notes. By default, fetch performs a GET request, which is what we need:

const response = await fetch("http://localhost:5000/api/notes");

After making the request, we'll process the response and convert it to JSON. The API returns an array of notes, which we'll capture in a variable named notes of type Note[]:

const notes: Note[] = await response.json();

If everything goes smoothly, the next step is to update our state with the notes fetched from the API:

setNotes(notes);

In the catch block, we'll log any errors that may occur:

console.log(e);

We've defined fetchNotes, but haven't called it yet. To invoke this function, add a call to fetchNotes() at the end of the useEffect block:

fetchNotes();

Lastly, add an empty dependency array to ensure that this code only runs once when the component is first mounted:

}, []);

After saving your changes, you should see the notes from your database displayed in the browser. If you've added or deleted notes directly through the database, those changes should be reflected here.

To wrap things up, you can remove any hardcoded array that you initially added to your notes state variable. Instead, populate it with the data fetched from the API:

const [notes, setNotes] = useState<Note[]>([]);

This ensures that the notes state is initially empty, then populated by the useEffect through the fetchNotes function.

Completed Code for this Section

  const [notes, setNotes] = useState<Note[]>([]);


  useEffect(() => {
    const fetchNotes = async () => {
      try {
        const response = await fetch(
          "http://localhost:5000/api/notes"
        );

        const notes: Note[] =
          await response.json();

        setNotes(notes);
      } catch (e) {
        console.log(e);
      }
    };

    fetchNotes();
  }, []);

Save New Note

Next, let's explore how to save a note to our backend. We already have a function called handleAddNote that deals with adding a note to the UI:

const handleAddNote = async (
  event: React.FormEvent
) => {
  // ...
};

To start, remove any code that manually creates a new note object on the frontend. This is because our backend will return this object with all its properties once the note has been saved to the database.

As in our previous example, we'll use a try-catch block to handle the API logic and error handling:

try {
  // API logic here
} catch (e) {
  console.log(e);
}

Place your existing state-changing function calls (setNotes, setTitle, and setContent) inside the try block. These will be executed after the API successfully saves the note:

setNotes([newNote, ...notes]);
setTitle("");
setContent("");

To call the API, we'll use the fetch function, similar to how we fetched notes. The difference is that this time, we need to pass a second argument to fetch to specify the HTTP method and payload:

const response = await fetch(
  "http://localhost:5000/api/notes",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      content,
    }),
  }
);

Don't forget to add the async keyword to the handleAddNote function signature if you haven't already, as we are using the await keyword inside the function.

The server will respond with the newly created note object, which we can then add to our UI. Convert the response to JSON and store it in a variable named newNote:

const newNote = await response.json();

Finally, in the catch block, we log any errors that might occur:

console.log(e);

Also, make sure to add headers to specify the content type of the data we are sending:

headers: {
  "Content-Type": "application/json",
}

Save your changes and test the functionality in the browser. Use the form to add a new note and click "Add Note." If everything is set up correctly, your new note should appear in the list.

Completed Code for this Section

  const handleAddNote = async (
    event: React.FormEvent
  ) => {
    event.preventDefault();
    try {
      const response = await fetch(
        "http://localhost:5000/api/notes",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title,
            content,
          }),
        }
      );

      const newNote = await response.json();

      setNotes([newNote, ...notes]);
      setTitle("");
      setContent("");
    } catch (e) {
      console.log(e);
    }
  };

Save Updated Note

Next, let's explore how to save a note to our backend. We already have a function called handleAddNote that deals with adding a note to the UI:

const handleAddNote = async (
  event: React.FormEvent
) => {
  // ...
};

To start, remove any code that manually creates a new note object on the frontend. This is because our backend will return this object with all its properties once the note has been saved to the database.

As in our previous example, we'll use a try-catch block to handle the API logic and error handling:

try {
  // API logic here
} catch (e) {
  console.log(e);
}

Place your existing state-changing function calls (setNotes, setTitle, and setContent) inside the try block. These will be executed after the API successfully saves the note:

setNotes([newNote, ...notes]);
setTitle("");
setContent("");

To call the API, we'll use the fetch function, similar to how we fetched notes. The difference is that this time, we need to pass a second argument to fetch to specify the HTTP method and payload:

const response = await fetch(
  "http://localhost:5000/api/notes",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      content,
    }),
  }
);

Don't forget to add the async keyword to the handleAddNote function signature if you haven't already, as we are using the await keyword inside the function.

The server will respond with the newly created note object, which we can then add to our UI. Convert the response to JSON and store it in a variable named newNote:

const newNote = await response.json();

Finally, in the catch block, we log any errors that might occur:

console.log(e);

Also, make sure to add headers to specify the content type of the data we are sending:

headers: {
  "Content-Type": "application/json",
}

Save your changes and test the functionality in the browser. Use the form to add a new note and click "Add Note." If everything is set up correctly, your new note should appear in the list.

Completed Code for this Section

  const handleAddNote = async (
    event: React.FormEvent
  ) => {
    event.preventDefault();
    try {
      const response = await fetch(
        "http://localhost:5000/api/notes",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title,
            content,
          }),
        }
      );

      const newNote = await response.json();

      setNotes([newNote, ...notes]);
      setTitle("");
      setContent("");
    } catch (e) {
      console.log(e);
    }
  };

Save Deleted Note

In this section, we'll discuss how to delete a note by invoking an API endpoint. We'll focus on the deleteNote function for this functionality:

const deleteNote = async (
  event: React.MouseEvent,
  noteId: number
) => {
  // ...
};

First, we need to make our function asynchronous to handle API calls. So, add the async keyword to the function declaration like this:

const deleteNote = async (
  event: React.MouseEvent,
  noteId: number
) => {
  // ...
};

Next, let's add a try-catch block to manage the API call. The catch block is essential for logging errors, which prevents the application from crashing unexpectedly:

try {
  // API logic here
} catch (e) {
  console.log(e);
}

Copy the existing UI-update logic you have and paste it into the try block, right after the API call. This ensures that the UI only updates if the API call is successful.

Now, let's get to the main part—making the API call to delete the note. To do so, we'll use the fetch API:

await fetch(
  `http://localhost:5000/api/notes/${noteId}`,
  {
    method: "DELETE",
  }
);

Note that the URL is a template string. It allows us to inject the ID of the note (noteId) that we want to delete. This noteId is passed into our deleteNote function when the user clicks the delete button corresponding to a specific note.

We specify the HTTP method as "DELETE" to indicate that we're requesting to delete a note:

method: "DELETE",

Unlike the 'add' or 'update' operations, there's no need to assign the API response to a variable, as we're not expecting any data to be returned:

await fetch(
  `http://localhost:5000/api/notes/${noteId}`,
  {
    method: "DELETE",
  }
);

After successfully deleting the note, we filter out the deleted note from our local notes state:

const updatedNotes = notes.filter(
  (note) => note.id !== noteId
);
setNotes(updatedNotes);

Finally, if everything goes smoothly and you save your changes, try running the application in the browser. Click the delete button for a specific note, and then refresh the page. You'll see that the note has been removed successfully.

Completed Code for this Section

  const deleteNote = async (
    event: React.MouseEvent,
    noteId: number
  ) => {
    event.stopPropagation();

    try {
      await fetch(
        `http://localhost:5000/api/notes/${noteId}`,
        {
          method: "DELETE",
        }
      );
      const updatedNotes = notes.filter(
        (note) => note.id !== noteId
      );

      setNotes(updatedNotes);
    } catch (e) {
      console.log(e);
    }
  };

The End - Why not try the bonus challenges?

Congratulations on making it to the end! If you enjoyed this project, I have created a list of additional challenges to try over at codecoyotes.com.

If you have any questions or suggestions feel free to drop me a message here. See you in the next one!

• Learn about the different parts of Redux and how they work together
• Learn how to fetch data from an API using Redux
• Learn how to use Redux Toolkit to setup and work with Redux using less code

And I’ll give you some challenges which you can try at the end.

This is what we'll build

Yep, its a Todo List! But this one uses Redux which makes it a fancy todo list!

The user can:

• Add todos
• Remove todos
• Mark todos as complete
• View the number of completed todos

Video Walkthrough

Heres a video walkthrough if you want to supplement your reading (on YouTube).

Source Code

Finally, you can grab the finished code here (on GitHub).

Get the Starter Code

I've provided some starter code that gives us a basic React UI with all the components in place. This lets us focus more on the Redux side of things which is the reason we're all here!

Let's start by opening a terminal and running the following commands:

git clone https://github.com/chrisblakely01/react-redux-todo-app.git
cd react-redux-todo-app/starter
npm install
npm start

This should fire up a browser with the app started.

Next, open the react-redux-todo-app folder up in your IDE (I'll be using VS Code). The project tree should look like this:

You'll notice a few folders in here:

• API: This is the API we'll use later in the project when we learn about working with API's in Redux (how exciting!)
• Final: This is the finished code. Note, if you run this, the API needs to be started as well. See the readme in the GitHub repo for how to do this
• Starter: This is the folder we'll be working in if you decide to follow along with the tutorial

Redux Overview

Before we get into the code, let's look at the different parts of Redux and how they work together.

Redux is made up of actions, reducers, state and the store. Each thing does one specific task. Lets take an example:

image from redux.js.org

Let's say we have a component that lets us deposit some money with the click of a button (the "UI" box in the diagram above).

When we click a button, we usually call a function which handles this event. This is where we would dispatch an action.

Dispatch is a function given to us by Redux, and lets us trigger actions.

The action contains a type, and a payload. The type is typically just a string with the name of the action. The payload contains data we need to know about. For example, we can’t deposit any money without knowing the amount

The store receives the action, and is in charge of holding the state. Think of it like a database, in a sense that it holds all our data in one place

The store is also in charge of updating the state based on the action and the current state which it does by using reducers.

A reducer sounds fancy but its just a function that takes the current state from the store, and the action. It combines things together and returns the new state.

Think of it like a conveyor belt – it takes the old state and the action, does some work, and spits out the new state.

The store then saves this new state which is returned from the reducer and passes the state to the components. This causes them to re-render, displaying the new data.

Why do we need all this?

Imagine an app with hundreds or even thousands of components. It would become unwieldy to pass state around and remember which component is changing the state, how it's changing the state, and so on.

By breaking things up like this, we give different responsibilities to different things, and we keep all our state in one place.

This makes it easier for us to understand and easier to test. For example, you can test reducers in isolation since they’re just pure functions. We can test that our actions dispatch correctly, and that our store correctly saves the state.

How to Configure Our Store

We’re going to use Redux toolkit to set up all the things we need to make Redux work, starting with the store.

Create a new folder in the src folder called redux. Within this folder create a file called store.js, and add the following code:

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
    reducer: {},
});

The configure store function does all the hard work for us. It creates the store which holds our state, combines our reducers, and has some nice built in middleware that we’ll use later.

The configureStore function gives us back a store, which we can export (line 3). This allows us to link the store to our app which we’ll do in a second.

We need to pass our reducers to the configureStore function, which we do by passing an object.

We haven’t created any reducers yet, but we could have as many reducers as we want here.

How to Connect the Store to the App

We have a store, and we have an app, so let's join these two things up!

Open up index.js and update it with the following:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './redux/store';
import { Provider } from 'react-redux';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

We import the store and the Provider (at the top), and then we wrap our App component in the Provider component. The Provider needs to be given a store to use, so we pass in the store we just created. This gives our components access to the state that lives in the store.

How to Create a Slice

A slice gives us a way to store a piece, or slice, of data, and gives us all the things we need to change and retrieve that data.

You can think of it like a grouping of data, similar to database tables.

In the src/redux folder, create a new file called todoSlice.js:

import { createSlice } from '@reduxjs/toolkit';

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, title: 'todo1', completed: false },
        { id: 2, title: 'todo2', completed: false },
        { id: 3, title: 'todo3', completed: true },
        { id: 4, title: 'todo4', completed: false },
        { id: 5, title: 'todo5', completed: false },
    ],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },

    },
});


export const { addTodo } = todoSlice.actions;

export default todoSlice.reducer;

The createSlice function will give us back some stuff and assign it to the todoSlice variable (line 3)

This is where we get our actions and reducers which we can export.

We need to pass some properties to this function so it gives us back the right things. We do this with an object.

First, we give the slice a name. We’re in the todo’s slice so we’ll call it todos. This is also what we’ll see in the Redux dev tools (line 4).

Next we add initial state. We’re going to add some dummy data for now. This can be empty, but we’re going to add stuff so we can see what’s going on (line 5)

Now we add the reducers. The reducer responds to the action, takes the current state, and creates new state based on the action payload. The first one we are adding is the addTodo reducer (line 13)

This is just a plain function. Redux passes in the state and action behind the scenes. The state is the current state of this slice, and the action contains the type and the payload.

So when we dispatch the addTodo action, this is the reducer that handles that action.

Within the reducer, this is where we want to perform the logic to update the state (line 14).

Since we’re adding a todo, the first thing we want to do is create a new todo object. This object is going to have the same properties that our other todos have. We’ll generate a new ID based on the date to make sure it's unique, take the title from the payload, and default completed to false.

Now we just push this to the state object. At this point, redux will take this new state and update the store

This is the first one we need, but we’ll add more reducers as we go through the tutorial

When we add a reducer object like this, the createSlice function creates actions based on the reducer names.

How to export our actions and reducer

We use destructuring to get the actions and export them, so our components can access them.

So the todoSlice has created a bunch of actions for us based on our reducer names, and we just use destructuring to get the addTodo action and export it (line 26).

And we export the reducer so we can add it to our store (line 28).

How to Add the Reducers to the Store

Now we need to add our reducer to the store. In store.js, add the following:

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

export default configureStore({
    reducer: {
        todos: todoReducer,
    },
});

Remember that the store holds all our reducers and manages them for us.

For example we could have another reducer called userReducer in here and the store will handle everything for us. This just makes our code more manageable to maintain.

How to Add a New Todo

We’ve created the reducer and the action to add a todo. This doesn’t do anything yet because we haven’t dispatched the action.

Dispatch the addTodo action

What we want to happen is when the user hits submit, we want to dispatch the addTodo action.

In AddTodoForm.js, when the user hits submit, we want to dispatch the addTodo action.

Update the code in AddTodoForm.js with the following:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../redux/todoSlice';

const AddTodoForm = () => {
    const [value, setValue] = useState('');
    const dispatch = useDispatch();

    const onSubmit = (event) => {
        event.preventDefault();
        if (value) {
            dispatch(
                addTodo({
                    title: value,
                })
            );
        }
    };

    return (
        <form onSubmit={onSubmit} className='form-inline mt-3 mb-3'>
            <label className='sr-only'>Name</label>
            <input
                type='text'
                className='form-control mb-2 mr-sm-2'
                placeholder='Add todo...'
                value={value}
                onChange={(event) => setValue(event.target.value)}
            ></input>

            <button type='submit' className='btn btn-primary mb-2'>
                Submit
            </button>
        </form>
    );
};

export default AddTodoForm;

• We import the useDispatch hook and the addTodo action (line 2/line 3)
• Now in our function that gets called when the form is submitted, we’ll add a call to dispatch the addTodo action (line 12)
• For each todo we need to know the title, so we’ll add a new object and pass in the title. This object will get mapped to the action payload (line 13)

Now if we try this, nothing happens in our UI because we haven’t updated the TodoList to pull data from Redux, which we’ll do in a second.

If we open the Redux dev tools, you can see under the action tabs that our action has been dispatched, and the payload has our title in it:

The action is being dispatched with the correct payload

You can also see that the state has updated with the new todo by clicking on the state tab.

How to Display the Todo List

Now that we’ve looked at dispatching actions and updating state, we’ll look at how to retrieve data from Redux

In our TodoList component we want to take the TODO’s from Redux, as opposed to using the dummy list

To do this we use what’s called the useSelector hook. Open up TodoList.js and update it with the following:

import React, { useEffect } from 'react';
import TodoItem from './TodoItem';
import { useSelector } from 'react-redux';

const TodoList = () => {
    const todos = useSelector((state) => state.todos);

    return (
        <ul className='list-group'>
            {todos.map((todo) => (
                <TodoItem id={todo.id} title={todo.title} completed={todo.completed} />
            ))}
        </ul>
    );
};

export default TodoList;

The useSelector hook accepts a function, and returns us the data based on that function.

So we’ll pass in our function – in this case we’ll do an arrow function. This accepts the state which is passed in by Redux. In this case, we want to do state.todos to get all the todos.

Now this is going to go to the store, pick out all the todos from state, and assign this to the todos variable which we defined ourselves

Since we’ve done the hard work already to display the list in our JSX, we just need to replace the dummy list with whatever we received from Redux.

If we try this, you can see that the todos are now being pulled from our todosSlice!

The state value that gets passed in to the useSelector hook function is the entire state tree that is stored in Redux.

So if you have multiple slices of state, this will return the whole thing. This lets us do pretty cool things – for example if we wanted to get a specific todo, or filter the list, we can do this here in this function.

How to Mark a Todo as Complete

Create the reducer/action

Next we’ll look at how to mark a todo as complete. This is interesting since it involves updating existing state. Update todoSlice.js with the following:

import { createSlice } from '@reduxjs/toolkit';

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, title: 'todo1', completed: false },
        { id: 2, title: 'todo2', completed: false },
        { id: 3, title: 'todo3', completed: true },
        { id: 4, title: 'todo4', completed: false },
        { id: 5, title: 'todo5', completed: false },
    ],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex((todo) => todo.id === action.payload.id);
            state[index].completed = action.payload.completed;
        },
    },
});

export const { addTodo, toggleComplete } = todoSlice.actions;

export default todoSlice.reducer;

We add our new reducer (line 21). Remember that each reducer accepts the current state and an action which gets passed in by Redux.

When our component dispatches the toggleComplete action, this reducer will handle that action.

Now that we have our reducer we need to implement the logic to update the state (line 22).

So remember that each todo in the list has an ID. Our component will pass this ID as part of the action payload and we’ll use the ID to determine which todo in the array we need to update.

We’ll use the ID to find the index of the todo in the array, so if the ID is 1, it will return index 0.

Now that we know the index, we can update the “completed” property for the given todo.

We’ll set the complete property for that todo to be whatever it is in the payload.

Lastly we export the action so that the components can dispatch it (line 30). Remember that the createSlice function automatically creates actions based on our reducer names, so since we have a toggleComplete reducer, that means we have a toggleComplete action.

Dispatch the action

Now when our checkbox is clicked, we want to trigger the toggleComplete action. Update TodoItem.js with the following:

import React from 'react';
import { useDispatch } from 'react-redux';
import { toggleComplete } from '../redux/todoSlice';

const TodoItem = ({ id, title, completed }) => {
    const dispatch = useDispatch();

    const handleCheckboxClick = () => {
        dispatch(toggleComplete({ id, completed: !completed }));
    };

    return (
        <li className={`list-group-item ${completed && 'list-group-item-success'}`}>
            <div className='d-flex justify-content-between'>
                <span className='d-flex align-items-center'>
                    <input
                        type='checkbox'
                        className='mr-3'
                        onClick={handleCheckboxClick}
                        checked={completed}
                    ></input>
                    {title}
                </span>
                <button className='btn btn-danger'>Delete</button>
            </div>
        </li>
    );
};

export default TodoItem;

Now when our checkbox is clicked, we want to trigger the toggleComplete action.

In our TodoItem component we’ll create a click handle function that dispatches an action.

First we import toggleComplete/useDispatch (line 2/ line 3)

Next, we create a click handler function called handleCompleteClick (line 8). This will be an arrow function that dispatches our action.

We’ll call the dispatch function, and pass in the action we want to dispatch (line 9).

Remember, our reducer needs to know the ID of the todo item we’re changing, and what the new completed value is, so we’ll pass this in as our payload object.

We’ll pass in the ID and pass in a completed value, which will be the opposite of what the current completed value is. So if current value if true, the new value will be false, and vice versa.

Now we just call this function from our input (line 19).

How to Delete a Todo

We’ll look at another example of using this pattern in our app with deleting a todo.

Create the reducer

Jump into TodoSlice.js and update it with the following:

import { createSlice } from '@reduxjs/toolkit';

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, title: 'todo1', completed: false },
        { id: 2, title: 'todo2', completed: false },
        { id: 3, title: 'todo3', completed: true },
        { id: 4, title: 'todo4', completed: false },
        { id: 5, title: 'todo5', completed: false },
    ],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex((todo) => todo.id === action.payload.id);
            state[index].completed = action.payload.completed;
        },
        deleteTodo: (state, action) => {
            return state.filter((todo) => todo.id !== action.payload.id);
        },
    },
});

export const { addTodo, toggleComplete, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

We’ll create our reducer (line 25).

When our action is dispatched we’ll send the ID of the todo that was clicked, and then filter this TODO out of the current list in state.

Use the filter function to get all the todos that do not equal the ID in the payload (line 26). We have to return this since the filter function gives us a new array back.

Lastly, we’ll export our action which was created for us (line 31).

Dispatch the action

Now we need to dispatch our deleteTodo action when the delete button is clicked. Jump into TodoItem.js and update it with the following:

import React from 'react';
import { useDispatch } from 'react-redux';
import { toggleComplete, deleteTodo } from '../redux/todoSlice';

const TodoItem = ({ id, title, completed }) => {
    const dispatch = useDispatch();

    const handleCheckboxClick = () => {
        dispatch(toggleComplete({ id, completed: !completed }));
    };

    const handleDeleteClick = () => {
        dispatch(deleteTodo({ id }));
    };

    return (
        <li className={`list-group-item ${completed && 'list-group-item-success'}`}>
            <div className='d-flex justify-content-between'>
                <span className='d-flex align-items-center'>
                    <input
                        type='checkbox'
                        className='mr-3'
                        onClick={handleCheckboxClick}
                        checked={completed}
                    ></input>
                    {title}
                </span>
                <button onClick={handleDeleteClick} className='btn btn-danger'>
                    Delete
                </button>
            </div>
        </li>
    );
};

export default TodoItem;

We'll create the handleDeleteClick function (line 12) which will dispatch the delete action, passing the ID as an object in the payload. Remember, the reducer needs to know the ID of the todo to be removed.

How to Display Total Completed Items

Next we’ll look at displaying the number of completed items. Open up TotalCompleteItems.js and add the following:

import React from 'react';
import { useSelector } from 'react-redux';

const TotalCompleteItems = () => {
    const todos = useSelector((state) =>
        state.todos.filter((todo) => todo.completed === true)
    );

    return <h4 className='mt-3'>Total complete items: {todos.length}</h4>;
};

export default TotalCompleteItems;

First we import the useSelector hook (line 2) and assign this to a variable so we can use it (line 5).

Now we can pass a function to tell Redux what we want to return. We’ll use the filter function to return all the todos that have a completed value of true (line 6).

Remember that the state value that gets passed to the selector is the TOTAL state tree, which is why we need to specify the todos in here.

Now the result of our function gets passed to the todos variable. Since we used the filter function, the result is an array.

Now we can use this variable however we want, so we’ll output the length in our JSX (line 9).

So whenever this component mounts, it's going to go and get the todos that are completed, and output he length in the JSX.

Now if you save and run the code, you'll see every time we tick a todo, the count at the bottom gets updated!

How to Work with an API in Redux

To do API calls in Redux, we need what is called middleware.

Instead of dispatching an action that goes straight to the reducer, we dispatch an action that calls a thunk, which does the API call.

This then creates a normal action, and sends it on its way to the reducer. Let's have a look at a diagram:

Image from redux.js.org

Instead of dispatching a plain action, our component dispatches an action that calls a thunk.

This action gets intercepted by the middleware, which does the API call.

Once the API does its thing and we get the response back, the middleware takes the data and dispatches a plain old action.

So the payload here could be whatever was returned from the API.

From here things go on as we’re used to – a reducer handles the action, accepting the current state and the action, and returns some new state.

The flow is the same as what we’ve learned so far – we’re just adding an extra step in between which handles the API call.

This is the logical place to do this, as we can’t do the API call in our components since it would be difficult to reuse the code, and we can’t do the API call in the reducer because the reducer is a pure function that creates new state only.

Setup the API

Now we’re going to connect our app to an API, so we can practice working with APIs in Redux.

I’ve included a prebuilt API that we’ll use for this.

If you haven't cloned the source code already, you do so by opening a terminal and typing:

Git clone https://github.com/chrisblakely01/react-redux-todo-app.git

Once you have the code cloned, run the following:

cd react-redux-todo-app/api
npm install
npm run server

Test it by going to localhost:7000/todos in the browser, and you should see an array of todos returned:

Note if you stop/start the server, any data you changed will be lost since its not connected to a database!

How to Get Todos from the API

Let's start by getting the todos from the API. Jump into todoSlice.js and update it with the following:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const getTodosAsync = createAsyncThunk(
    'todos/getTodosAsync',
    async () => {
        const resp = await fetch('http://localhost:7000/todos');
        if (resp.ok) {
            const todos = await resp.json();
            return { todos };
        }
    }
);

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [
        { id: 1, title: 'todo1', completed: false },
        { id: 2, title: 'todo2', completed: false },
        { id: 3, title: 'todo3', completed: true },
        { id: 4, title: 'todo4', completed: false },
        { id: 5, title: 'todo5', completed: false },
    ],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex((todo) => todo.id === action.payload.id);
            state[index].completed = action.payload.completed;
        },
        deleteTodo: (state, action) => {
            return state.filter((todo) => todo.id !== action.payload.id);
        },
    },
        extraReducers: {
        [getTodosAsync.fulfilled]: (state, action) => {
            return action.payload.todos;
        },
    },
});

export const { addTodo, toggleComplete, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

Create the API call/Thunk

The first thing we’ll do is import the createAsyncThunk function and create our thunk (line 3). A thunk is a function that returns another function.

This thunk is the new action which we dispatch from our components.

This will in turn dispatch its own action when the response completes, with the data from the response as the payload.

We need to pass some stuff to the createAsyncThunk function, so we'll give it a name, and pass in a function that uses the fetch API to get the data (line 4 / line 5).

If the response is good, we will convert the response to JSON. The response comes back as a string so we need to convert it to an object (line 8).

Lastly we’ll return an object containing our todos. Remember that the API returns an array of todos.

Once the function returns, it will dispatch an action. Whatever we return, in this case an object containing the todo array, will be the payload of the action (line 9). All this is done behind the scenes.

Create the Reducer

Now we need to implement the reducer logic which handles this action.

We do this within the extraReducers object (line 39 in the code snippet above). This is where we specify additional reducers that our todoSlice can use.

The syntax is a bit different, as our thunk will dispatch a number of actions.

The action we care about right now is the fulfilled action. When the thunk dispatches this action, this means the API call in our thunk has completed.

These reducers work the same as our plain reducers – they are just a function that accepts the current state and the payload.

Now we’ll return the todos that came in the payload, at which point Redux will update the state for us.

We now have our new action, and our reducer, we just need to export our thunk (line 3).

Dispatch the Action

Now we have to trigger the action that fetches the todo. The best place to do this is when the TodoList component gets loaded for the first time.

Open up TodoList.js and update it with the following:

import React, { useEffect } from 'react';
import TodoItem from './TodoItem';
import { useSelector, useDispatch } from 'react-redux';
import { getTodosAsync } from '../redux/todoSlice';

const TodoList = () => {
    const dispatch = useDispatch();
    const todos = useSelector((state) => state.todos);

    useEffect(() => {
        dispatch(getTodosAsync());
    }, [dispatch]);

    return (
        <ul className='list-group'>
            {todos.map((todo) => (
                <TodoItem id={todo.id} title={todo.title} completed={todo.completed} />
            ))}
        </ul>
    );
};

export default TodoList;

First we'll import the useDispatch hook, and assign this to a variable (line 7).

Next we import the action we want to dispatch (line 4).

We want to get the Todos as soon as the component loads, so we’ll add the useEffect hook (line 10).

From here, we dispatch our action (line 11).

When the state in the store updates, the useSelector hook gets notified and updates the todos variable with the new todos taken from state.

Try this out and see it in action!

How to Add a Todo via API

Next we'll look at how to create a Todo and persist it on the API. This will be similar to what we had before, so open up TodoSlice.js and update it with the following:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const getTodosAsync = createAsyncThunk(
    'todos/getTodosAsync',
    async () => {
        const resp = await fetch('http://localhost:7000/todos');
        if (resp.ok) {
            const todos = await resp.json();
            return { todos };
        }
    }
);

export const addTodoAsync = createAsyncThunk(
    'todos/addTodoAsync',
    async (payload) => {
        const resp = await fetch('http://localhost:7000/todos', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ title: payload.title }),
        });

        if (resp.ok) {
            const todo = await resp.json();
            return { todo };
        }
    }
);

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex((todo) => todo.id === action.payload.id);
            state[index].completed = action.payload.completed;
        },
        deleteTodo: (state, action) => {
            return state.filter((todo) => todo.id !== action.payload.id);
        },
    },
    extraReducers: {
        [getTodosAsync.fulfilled]: (state, action) => {
            return action.payload.todos;
        },
        [addTodoAsync.fulfilled]: (state, action) => {
            state.push(action.payload.todo);
        },
    },
});

export const { addTodo, toggleComplete, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

Create the API call/Thunk

We're creating another thunk, giving it a name, and creating our async function. This time we pass the payload parameter, as we need to know the title of the Todo. This payload contains whatever was sent to us by the component when it dispatched the action.

Use the fetch API, this time we need to pass an object with some configuration to indicate that the fetch request is a POST. We'll pass in the content-type and stringify the body (line 17).

Now if the response is OK, the API will give us back a Todo object with a title, ID, and completed value.

Similar to before if the response is ok we’ll return the data, which in this case is a single todo object.

Create the Reducer

Similar to before, add a fulfilled function, update the state by pushing this todo to the todos array (line 56).

Dispatch the Action

Now open up AddTodoForm.js and add the following:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodoAsync } from '../redux/todoSlice';

const AddTodoForm = () => {
    const [value, setValue] = useState('');
    const dispatch = useDispatch();

    const onSubmit = (event) => {
        event.preventDefault();
        if (value) {
            dispatch(
                addTodoAsync({
                    title: value,
                })
            );
        }
    };

    return (
        <form onSubmit={onSubmit} className='form-inline mt-3 mb-3'>
            <label className='sr-only'>Name</label>
            <input
                type='text'
                className='form-control mb-2 mr-sm-2'
                placeholder='Add todo...'
                value={value}
                onChange={(event) => setValue(event.target.value)}
            ></input>

            <button type='submit' className='btn btn-primary mb-2'>
                Submit
            </button>
        </form>
    );
};

export default AddTodoForm;

Note that all we're really doing here is changing our onSubmit function to dispatch the addTodoAsync action rather than the addTodo action (line 13).

Now if you try this in the browser by adding a todo, you'll notice the todo persists – even after you refresh the page!

How to Mark a Todo as Complete via API

So I’m hoping you’re starting to see how this all works, but we’ll go through one last example just to make sure.

We need to call the API to update the “completed” property when the user clicks the checkbox.

Jump into TodoSlice.js and add the following:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const getTodosAsync = createAsyncThunk(
    'todos/getTodosAsync',
    async () => {
        const resp = await fetch('http://localhost:7000/todos');
        if (resp.ok) {
            const todos = await resp.json();
            return { todos };
        }
    }
);

export const addTodoAsync = createAsyncThunk(
    'todos/addTodoAsync',
    async (payload) => {
        const resp = await fetch('http://localhost:7000/todos', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ title: payload.title }),
        });

        if (resp.ok) {
            const todo = await resp.json();
            return { todo };
        }
    }
);

export const toggleCompleteAsync = createAsyncThunk(
    'todos/completeTodoAsync',
    async (payload) => {
        const resp = await fetch(`http://localhost:7000/todos/${payload.id}`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ completed: payload.completed }),
        });

        if (resp.ok) {
            const todo = await resp.json();
            return { todo };
        }
    }
);

export const todoSlice = createSlice({
    name: 'todos',
    initialState: [],
    reducers: {
        addTodo: (state, action) => {
            const todo = {
                id: new Date(),
                title: action.payload.title,
                completed: false,
            };
            state.push(todo);
        },
        toggleComplete: (state, action) => {
            const index = state.findIndex((todo) => todo.id === action.payload.id);
            state[index].completed = action.payload.completed;
        },
        deleteTodo: (state, action) => {
            return state.filter((todo) => todo.id !== action.payload.id);
        },
    },
    extraReducers: {
        [getTodosAsync.fulfilled]: (state, action) => {
            return action.payload.todos;
        },
        [addTodoAsync.fulfilled]: (state, action) => {
            state.push(action.payload.todo);
        },
        [toggleCompleteAsync.fulfilled]: (state, action) => {
            const index = state.findIndex(
                (todo) => todo.id === action.payload.todo.id
            );
            state[index].completed = action.payload.todo.completed;
        },
    },
});

export const { addTodo, toggleComplete, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

Create the API call/Thunk

We're creating our Async thunk as usual (line 32).

This time its going to be a PATCH, as we’re updating part of an object. We’ll pass the ID via the URL, and we’ll pass the completed value taken from the payload.

The response will give us back the updated Todo object, so we’ll return that which will get passed to the reducer as part of the action.

Create the Reducer

Now we'll handle the toggleCompleteAsync.fulfilled action.

We use the ID from the payload to get the index, and update the todo at that position with whatever the new completed value is (line 77).

Dispatch the Action

Finally, we just need to dispatch our new action. Jump into TodoItem.js and update it with the following:

import React from 'react';
import { useDispatch } from 'react-redux';
import { toggleCompleteAsync, deleteTodo } from '../redux/todoSlice';

const TodoItem = ({ id, title, completed }) => {
    const dispatch = useDispatch();

    const handleCheckboxClick = () => {
        dispatch(toggleCompleteAsync({ id, completed: !completed }));
    };

    const handleDeleteClick = () => {
        dispatch(deleteTodo({ id }));
    };

    return (
        <li className={`list-group-item ${completed && 'list-group-item-success'}`}>
            <div className='d-flex justify-content-between'>
                <span className='d-flex align-items-center'>
                    <input
                        type='checkbox'
                        className='mr-3'
                        onClick={handleCheckboxClick}
                        checked={completed}
                    ></input>
                    {title}
                </span>
                <button onClick={handleDeleteClick} className='btn btn-danger'>
                    Delete
                </button>
            </div>
        </li>
    );
};

export default TodoItem;

Again, all we're doing here is dispatching the toggleCompleteAsync action from our event handler function (line 8).

Now, if you open this in the browser and toggle a few todos as complete, you'll notice the state is saved even after you refresh the page.

Challenge - How to Delete a Todo via API

One to practice yourself is to delete the todo via the API! The API I've provided has support to delete todos by passing an ID. Some tips to get started.

First, you'll need to create an async thunk/API call similar to what we did before. The request to delete a Todo will look like this:

const resp = await fetch(`http://localhost:7000/todos/${payload.id}`, {
    method: 'DELETE',
});

Next, you will need to add a reducer that updates the state when the response completes

And you will need to dispatch an action when the button is clicked which triggers the thunk you created at step 1.

You can find the solution in the final code on GitHub!

Thanks for Reading!

• We’ll learn how break down a UI into React components
• Learn how to work with state using the Context API
• Learn about actions, reducers, and the dispatch function

And I’ll give you some challenges which you can try at the end!

This is what we'll build:

The user can:

• Add expenses which have a name and a cost
• Remove expenses
• View how much of their budget is remaining
• View how much they've spent so far
• (Challenge) Edit budget
• (Challenge) Search expenses

Video Walkthrough

Heres a video walkthrough if you want to supplement your reading (on YouTube)

Source Code

Finally, in case you get lost while following along, you can grab the finished code here (on GitHub).

Let's Go!

How to Setup a React Project

The first thing we need to do is setup a React project. For this we'll use create-react-app.

Fire up a terminal and type:

npx create-react-app budget-tracker

When that's finished doing its thing we're going to install Bootstrap. This will give us ready-made styles we can use instead of having to create our own in CSS.

In the same terminal, change to your working directory, and install Bootstrap:

cd budget-tracker
npm i bootstrap

Next we're going to install a package that allows us to generate IDs. We'll be using IDs to identify each expense in the list, so this is important.

Run the following command in your project directory:

npm i uuid

The last package we need to install gives us some icons to use, which saves us from having to create them ourselves.

Run the following command in your project directory:

npm i react-icons

Now open up the project in VS Code (or whatever IDE you use). You should see some stuff appear in the project tree (this is our empty React project).

You can ignore most of this, as we'll be creating our own components. Open up App.js, delete everything, and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return <p>Hello React!</p>;
};

export default App;

What this does:

• Imports the bootstrap CSS into our project
• Creates a component that displays "Hello React!" with paragraph tags
• Exports this component so other components can use it

Next we'll fire up the app and make sure everything is working as it should. Open a terminal (either in VS Code or otherwise) and start the app by typing the following:

npm start

All being well, the app should start and open in a browser:

The text "Hello React" should appear on the page. This means your app is working!

Success! Now we're ready to start building out our React components.

How to Put the UI Components in Place

One approach to building apps is to start by putting the UI components in place with some dummy data. This usually helps with visualising what state objects are needed, and usually means less rework later on.

With that in mind we're going to put our UI components in place starting at the top and working down.

We'll add a title, then add a new component for each of the "boxes" shown. We'll add some dummy data just to get things displaying correctly

How to Create the Budget Component

Jump into the code, in the src folder, create a new folder called components. Within this, create a file called Budget.js. Your project structure should look like this:

Open up Budget.js and add the following:

import React from 'react';

const Budget = () => {
    return (
        <div className='alert alert-secondary'>
            <span>Budget: £2000</span>
        </div>
    );
};

export default Budget;

What we're doing:

• Creating a new component called Budget (line 3)
• Using the Bootstrap Alert classes to gives us a nice gray background (line 5)
• Adding some text and hard coding a value (line 6)

How to Create the Remaining Component

Next we'll create the Remaining component, which shows how much budget the user has left.

Create a new file under src/components called Remaining.js. Open it up and add the following:

import React from 'react';

const Remaining = () => {
    return (
        <div className='alert alert-success'>
            <span>Remaining: £1000</span>
        </div>
    );
};

export default Remaining;

What we're doing:

• Creating a new component called Remaining (line 3)
• Using the Bootstrap Alert classes to gives us a green background (line 5)
• Adding some text and hard coding a value (line 6)
• Adding Spent so Far

Lastly, we'll create the Spent so Far component, which shows how much the user has spent so far.

Create a new file under src/components called ExpenseTotal.js. Open it up and add the following:

import React from 'react';

const ExpenseTotal = () => {
    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £1000</span>
        </div>
    );
};

export default ExpenseTotal;

What we're doing:

• Creating a new component called ExpenseTotal (line 3)
• Using the Bootstrap Alert classes to gives us a blue background (line 5)
• Adding some text and hard coding a value (line 6)

How to Add a Title and Render our Components

At this point you might be thinking, "these components all look the same, what gives?!". This is true, although remember we're just adding some hard coded data for now. Later, each component will do different things to display the data dynamically.

Now we've created our components, we need to render them in App.js. Open App.js and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';

const App = () => {
    return (
            <div className='container'>
                <h1 className='mt-3'>My Budget Planner</h1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    </div>
                    <div className='col-sm'>
                        <Remaining />
                    </div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    </div>
                </div>
            </div>
    );
};

export default App;

What we're doing:

• Importing our different components (lines 3-5)
• Adding a bootstrap container that helps us center our App on the page (line 9)
• Adding a title (line 9)
• Adding a Bootstrap row (line 10)
• Adding a column within the row for each of our components so far (lines 12-20)

Now if you run the app, you should see the title, and our components rendered on the page!

How to Create the Expense List Component

The expenses list shows the expenses the user has added so far, displaying the Name, cost, and a delete button for each

Next we'll build the ExpenseList component. This component will be in charge of taking a list of expenses, and rendering an ExpenseItem component for each item.

We'll add some dummy data, to make sure our UI looks good and things are working as intended. Later, this stuff will come from context.

Start by creating a new file under src/components called ExpenseList.js. Open up ExpenseList.js and add the following:

import React from 'react'
import ExpenseItem from './ExpenseItem';

const ExpenseList = () => {
    const expenses = [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ];

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        </ul>
    )
}

export default ExpenseList

What we're doing:

• Adding a dummy list of expenses. For each expense we need an ID, a name, and a cost. Later, we'll take this list from context (line 4)
• Creating a list (line 11)
• Using the map function to iterate over the expenses and displaying an ExpenseItem component (we haven't created this yet! Line 12)
• Passing the ID, name, and cost to the ExpenseItem component as props

How to Create the Expense Item Component

Now we've created a component to hold our list, we need a component to render each item. Create a new file in the src/components folder called ExpenseItem.js. Open it up and add the following:

import React from 'react';
import { TiDelete } from 'react-icons/ti';

const ExpenseItem = (props) => {
    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                </span>
                <TiDelete size='1.5em'></TiDelete>
            </div>
        </li>
    );
};

export default ExpenseItem;

What we're doing:

• Creating a list item (line 6)
• Rendering the name of the expense, which we get from props (line 7)
• Rendering the cost of the expense, which we also get from props
• We're displaying a DeleteIcon (line 12) which we get from react-icons package (line 2)

How to Render the ExpenseList Component

Now we've created our components, we just have to render ExpenseList in App.js. Open up App.js and update it with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Planner</h1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                </div>
                <div className='col-sm'>
                    <Remaining />
                </div>
                <div className='col-sm'>
                    <ExpenseTotal />
                </div>
            </div>
            <h3 className='mt-3'>Expenses</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                </div>
            </div>
        </div>
    );
};

export default App;

What's new:

• We imported our ExpenseList (line 6)
• Added a new Bootstrap row (line 24)
• Rendered our ExpenseList (line 26)

Now if you save/run the App, you'll see the Expenses list has appeared!

How to create the "Add Expense" form component

Our UI components are nearly complete! The last component we need is the "Add Expense" form component, which lets users add new expenses. We'll put the UI components for the form in place first, then come back later and add the fancy stuff.

Create a new file in src/components called AddExpenseForm.js. Fire this up and add the following:

import React from 'react';

const AddExpenseForm = () => {

    return (
        <form>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                    ></input>
                </div>

            </div>
            <div className='row'>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Adding our form tags (line 6)
• Adding a label/input for our name field (line 9)
• Adding a label/input for our cost field (line 18)
• Adding a button to submit the form (line 30)

How to Render the AddExpenseForm component

Finally in App.js, we have to render our new component. Update App.js with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Planner</h1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                </div>
                <div className='col-sm'>
                    <Remaining />
                </div>
                <div className='col-sm'>
                    <ExpenseTotal />
                </div>
            </div>
            <h3 className='mt-3'>Expenses</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                </div>
            </div>
            <h3 className='mt-3'>Add Expense</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <AddExpenseForm />
                </div>
            </div>
        </div>
    );
};

export default App;

What's changed:

• Imported the AddExpenseForm (line 7)
• Rendered the AddExpenseForm (line 33)

How to Add the Context API

The Context API is what we'll use to store our global state. It's already part of the React library so no need to import/install anything else.

Start by creating a new folder in the src folder called context. Within this folder create a new file called AppContext.js.

How to Create the Initial State

The first thing our context needs to work is an initial state. This indicates the "shape" of our state (in other words, what properties and data we have) and can be used to initialise the app with data from an API call, for example.

For now we'll just add some initial values. In AppContext.js, add the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

• We're adding an initial budget
• We're adding a dummy list of expenses

NOTE: the intialState properties do not need to have values, they can be set to empty strings, empty arrays, and so on. We're adding data for visual purposes

How to Create the AppContext

Next we'll create the AppContext. This is the thing our components import and use to get the state.

Update AppContext.js with the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

All we've done is added a call to createContext at line (11) - thats our context object created!

How to Create the AppProvider

The provider is a component that wraps the components which we want to pass the state to. We use it in conjunction with the useReducer hook to actually store the global state.

Update the AppContext.js file like so:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        </AppContext.Provider>
    );
};

What we're doing:

• Creating our Provider component (line 12)
• Setting up the useReducer hook which will hold our state, and allow us to update the state via dispatch (NOTE we haven't created the AppReducer yet! Line 13)
• We're returning AppContext.Provider. This has a value prop which contains the data which we allow our components to see and have access to, as well as the dispatch function that lets us update the state by dispatching actions (line 16)

How to Create the AppReducer

Next we’ll create the AppReducer. The reducer is in charge of creating the new global state object, based on an action type and a payload.

Update AppContext.js with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        </AppContext.Provider>
    );
};

What we're doing:

• Creating a function which accepts the current state, and an action (line 1)
• We use a switch based on the action.type to decide how to update the state (line 2)
• For now since we’re just getting things set up we’re just going to return the default state, and add actions later as we need them (line 3)

And thats it! Our global state is now set up and ready to go.

How to Link AppContext to our App

The next step is to link our AppContext to our App component. We do this by wrapping the components which we want to pass the state to with the AppProvider.

Jump back into App.js and update the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';
import { AppProvider } from './context/AppContext';

const App = () => {
    return (
        <AppProvider>
            <div className='container'>
                <h1 className='mt-3'>My Budget Planner</h1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    </div>
                    <div className='col-sm'>
                        <Remaining />
                    </div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    </div>
                </div>
                <h3 className='mt-3'>Expenses</h3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <ExpenseList />
                    </div>
                </div>
                <h3 className='mt-3'>Add Expense</h3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <AddExpenseForm />
                    </div>
                </div>
            </div>
        </AppProvider>
    );
};

export default App;

What's changed:

• Imported our AppProvider (line 8)
• Nested our components in the AppProvider element (lines 12 / lines 39)

Now that our components are nested within the AppProvider, they have access to value object that the AppProvider exposes.

How to Connect our Components to AppContext

How to Render Budget from Context

Now we can start pulling global state values into our components. We'll start with the budget, so jump into Budget.js and add the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Budget = () => {
    const { budget } = useContext(AppContext);

    return (
        <div className='alert alert-secondary'>
            <span>Budget: £{budget}</span>
        </div>
    );
};

export default Budget;

What we're doing:

• We have to import AppContext from our Context (line 2)
• We import the useContext hook, and pass our AppContext to it - this is how a component connects to the context in order to get values from global state
• We use destructuring to get the budget from context (line 5)
• We're rendering the budget in our JSX (line 9)

Now if you change the budget in AppContext and reload your browser, you will see the budget updates on the UI. This means our component is successfully pulling data from our context. Success!

How to Render Expenses from Context

Now we can do something similar with the expense list. Open up ExpenseList.js and update it with the following:

import React, { useContext } from 'react';
import ExpenseItem from './ExpenseItem';
import { AppContext } from '../context/AppContext';

const ExpenseList = () => {
    const { expenses } = useContext(AppContext);

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        </ul>
    );
};

export default ExpenseList;

What we're doing:

• Importing our AppContext and useContext hook like before
• We've removed the dummy list of expenses
• We've replaced the dummy list with the expenses list we store in context

Since we've already done the work to render the list of expenses, we don't have to do anything else! Refresh the browser and you'll see the list now comes from context rather than the dummy list.

Remember we exported expenses as part of the value object in the provider. Any component wrapped in the provider can get access to this value object, and use destructuring to get the specific value it needs.

How to Add a New Expense - Capturing Form Values

So far we've looked at how to get values from state, next we'll look at how we can dispatch actions and update the state.

Before we do that, we need to know the name and the cost of the new expense that the user has entered. Jump into AddExpenseForm.js and add the following:

import React, { useState } from 'react';

const AddExpenseForm = () => {
    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {

    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Using React to control the input values. For each input field, we have a state object (lines 7 and 8)
• When the user types into the inputs, the corresponding state values will update (lines 25 and 36)
• When the user clicks the button, it will call an onSubmit function. This function doesn't do anything right now, but this is where we'll dispatch the action from

Now we have the form values stored in state, we can dispatch an action to update the state.

How to Add a New Expense - Dispatching an action

Update the AddExpenseForm with the following:

import React, { useContext, useState } from 'react';
import { AppContext } from '../context/AppContext';
import { v4 as uuidv4 } from 'uuid';

const AddExpenseForm = () => {
    const { dispatch } = useContext(AppContext);

    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {
        event.preventDefault();

        const expense = {
            id: uuidv4(),
            name: name,
            cost: parseInt(cost),
        };

        dispatch({
            type: 'ADD_EXPENSE',
            payload: expense,
        });
    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Importing AppContext and useContext as usual
• Getting dispatch from our global state (line 6)
• Creating an expense object, containing the name and the cost. This is what will get dispatched as the payload, and what we'll use to update the state. We're also using the uuid package we imported earlier to create an ID. This is used to identify a given expense (line 14).
• We're dispatching an action, with a type and our payload. The type tells the reducer how to update the state, which we'll see in a minute (line 20)

How to Add a New Expense - Updating the reducer

That's it from the component side. You'll notice if you run this in the browser, nothing happens. Thats because we haven't updated our reducer to handle the action and update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        default:
            return state;
    }
};

What we're doing:

• We're checking the type of the action (which we get from the action variable) (line 2)
• Adding a new case to the switch statement called "ADD_EXPENSE" (line 3)
• Returning a new state object with the new expense taking from the payload (which we get from the action variable) (line 4)

When we return something from a case statement, the reducer automatically updates the state and re-renders the components, almost like magic.

Now if you run the code, and add a new expense, you can see it gets added to the expense list!

How to Calculate spent so far

The next thing we'll look at is calculating how much the user has spent so far. To do this, we'll take a total of all the expenses the user has spent and display it on the UI.

Open up ExpenseTotal.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const ExpenseTotal = () => {
    const { expenses } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total += item.cost);
    }, 0);

    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £{totalExpenses}</span>
        </div>
    );
};

export default ExpenseTotal;

What we're doing:

• importing our useContext and AppContext as usual
• Taking the expenses from state (line 5)
• Using the reduce function to get a total of all the costs and assigning this to a variable (line 7)
• Displaying the variable in our JSX (line 13)

Now whenever the user adds an expense, this causes the state to update, which will cause all components connected to the context to re-render and update themselves with new values.

Go ahead and try this out in the browser.

How to Calculate Remaining

Now we'll look at calculating how much budget the user has left to spend.

To do this, we'll get the total costs of the expenses, and subtract it from the budget. If the user goes over budget, i.e the expenses are more than the budget, we want to display a red background (as opposed to a green background). Luckily Bootstrap gives us these nice things already.

Open up Remaining.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Remaining = () => {
    const { expenses, budget } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total = total + item.cost);
    }, 0);

    const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';

    return (
        <div className={`alert ${alertType}`}>
            <span>Remaining: £{budget - totalExpenses}</span>
        </div>
    );
};

export default Remaining;

What we're doing

• Importing expenses and budget from Context (line 5)
• Getting the total cost of the expenses using the reduce function (line 7)
• Creating a variable to store the CSS classname we want to display (depending on if the user has gone over the budget or not, line 11)
• Using a template string to create our classes (line 14)
• Rendering the remaining budget using a subtraction (line 15)

Now if you run the code in the browser, and add a bunch of expenses until the total goes over 2000, you'll see the "Remaining" component background turns to red!

How to Remove an Expense

The last thing we'll look at before getting into the challenges is to remove an expense.

When the user clicks the little cross beside an expense, we want to dispatch an action to remove it from state. When this happens, our ExpenseList will re-render with the removed expense.

Jump into ExpenseItem.js and update it with the following:

import React, { useContext } from 'react';
import { TiDelete } from 'react-icons/ti';
import { AppContext } from '../context/AppContext';

const ExpenseItem = (props) => {
    const { dispatch } = useContext(AppContext);

    const handleDeleteExpense = () => {
        dispatch({
            type: 'DELETE_EXPENSE',
            payload: props.id,
        });
    };

    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                </span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete>
            </div>
        </li>
    );
};

export default ExpenseItem;

What we're doing:

• Importing dispatch from Context, which allows us to dispatch a delete action (line 6)
• Creating a function that gets called when the delete icon is clicked (line 8)
• Dispatching an action. Our action contains the type (so the reducer knows how to update the state) and the payload. In this case we're passing the ID of this expense (which we get from props when we rendered the ExpenseList) (line 9)

If you try this in the browser, you'll see that nothing happens. Even though we're dispatching an action, we haven't implemented the reducer logic for this action type, so it doesn't know how to update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        case 'DELETE_EXPENSE':
            return {
                ...state,
                expenses: state.expenses.filter(
                    (expense) => expense.id !== action.payload
                ),
            };
        default:
            return state;
    }
};

All we're really doing here is adding a new case statement, to handle our DELETE_EXPENSE action. We're using the filter array method to remove the expense that has the ID which we received from the payload.

Now if you try this, you can remove an expense by clicking the delete icon. Notice how all the other components update as well. Nice!

Challenges to Try

Congrats on making it this far! Now its time for you to have a go at some challenges. Remember you can see how I've done it in the GitHub source code.

Allow the user to edit the budget

You'll notice that so far we have been using a hard coded value for the budget. Your first task is to add functionality that allows the user to edit the budget. Some tips to get started:

• You will need to add a text input that allows the user to enter a value for their desired budget.
• We store the budget in state, so you will need to dispatch an action with a new TYPE and a PAYLOAD that will update the state

Allow the user to search for an expense

If the user has many expenses, it will be difficult to find the one they are looking for. Add a way for the user to search for the expense by name. Some tips to get started:

• You will need to add an input field which lets the user enter a value to search for.
• You'll have to add something to the ExpenseList component that filters the list from context based on this search value.

Thanks for Reading!

• Use a real API to search for movies as we type
• Create a "Netflix style" horizontal scroll effect
• Add movies to and remove them from our favourites
• Save our favourites to local storage to they appear when the app refreshes

This is what we'll build:

And here's a video walkthrough if you want to supplement your reading.

Finally, in case you get lost while following along, you can grab the finished code here (on GitHub).

Let's Go!

Our movie app wouldn't be any good if we didn't have any movies to display.

We're going to use the OMDB API as our source for movies. This API is free to use, and all we have to do is sign up and get an API key.

How to Get an API Key

Go to http://www.omdbapi.com/apikey.aspx and fill out the form. You should receive an email like this:

Click the activation link (highlighted in green) and you're good to go. Woohoo!

Exploring the API with PostMan

This is an optional step, so if you'd rather get into the React-y goodness feel free to jump to the next section.

We're going to use Postman (download if here if you haven't got it) to play with the API.

Fire up Postman and paste in the "OMBb API" URL you received in your email (highlighted in yellow in the image above). Click "send" and you should get some JSON back in the "body" section like so:

Mission success! Well, part of the mission is a success – we're only getting started here after all. But this means our URL from the email is working fine and our React App will be able to retrieve movies.

How to Search for Movies by Title

So far we've used the API to retrieve one movie, but what we want to do is search for "Titles containing a search term". To do this, we change the i query parameter to s like so:

This will query the API for all movies containing "star wars" in the title. Click "send" again, and this time you'll see the response is different:

Notice how we receive an array of items. Each item in the array contains some details about a movie (title, year and so on). We're going to take the Poster image for each object and display it in our app

How to Set Up a React Project

Ok with that out of the way, we can get into the good stuff – creating a React project. We're going to use create-react-app to get us off the ground quickly.

Fire up a terminal and type:

npx create-create-app movie-app

When thats finished doing its thing, we're going to add Bootstrap to help us position things nicely without needing much of our own CSS.

Run the following commands:

cd movie-app
npm install boostrap

Thats all we need, so go ahead and fire up the app:

npm start

How to Add Movies to State

The App component will hold the state for the app. That way we can keep everything organised in one place and pass different pieces of state to different components.

Open App.js, delete everything, and replace it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

const App = () => {
    const [movies, setMovies] = useState([        {
            "Title": "Star Wars: Episode IV - A New Hope",
            "Year": "1977",
            "imdbID": "tt0076759",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode V - The Empire Strikes Back",
            "Year": "1980",
            "imdbID": "tt0080684",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode VI - Return of the Jedi",
            "Year": "1983",
            "imdbID": "tt0086190",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
        }]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row'>

            </div>
        </div>
    );
};

export default App;

• We're creating a state object to hold our list of movies. This will come from the API eventually, but for now we're just going to hard code some data – which is taken from the response in Postman.
• We're adding the CSS from Bootstrap and adding some basic markup

If you save/run the app, you'll see that even though we've set up some state, we aren't rendering anything yet – so the screen will be blank.

How to Create a MovieList Component

Ah our first component! We're going to create a MovieList component to display the list of movies that comes back in the search request.

Create a new folder call components under the src folder. Create a new file in the components folder called MovieList.js:

Open up MovieList.js and add the following:

import React from 'react';

const MovieList = (props) => {
    return (
        <>
            {props.movies.map((movie, index) => (
                <div className='image-container d-flex justify-content-start m-3'>
                    <img src={movie.Poster} alt='movie'></img>
                </div>
            ))}
        </>
    );
};

export default MovieList;

• We'll pass in a list of movies as props
• We'll use the map function to loop over these movies
• For each movie we'll display an image using the Poster URL as the image source

How to Render our MovieList

Just one more step before we see stuff working in the browser - are you excited?!

Jump back into App.js and update it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';

const App = () => {
    const [movies, setMovies] = useState([
        {
            Title: 'Star Wars: Episode IV - A New Hope',
            Year: '1977',
            imdbID: 'tt0076759',
            Type: 'movie',
            Poster:
                'https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg',
        },
        {
            Title: 'Star Wars: Episode V - The Empire Strikes Back',
            Year: '1980',
            imdbID: 'tt0080684',
            Type: 'movie',
            Poster:
                'https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg',
        },
        {
            Title: 'Star Wars: Episode VI - Return of the Jedi',
            Year: '1983',
            imdbID: 'tt0086190',
            Type: 'movie',
            Poster:
                'https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg',
        },
    ]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row'>
                <MovieList movies={movies} />
            </div>
        </div>
    );
};

export default App;

• We're importing the MovieList component (line 4 in your IDE)
• We're rendering the MovieList and passing the movies we stored in state as props (line 37 in your IDE)

Save and run the app, and then if you go to the browser you should see the following:

These movies are taking from our movies state object in App.js

We have some movie posters. Marvelous!

How to Add a Call to the API

Now that we know our app is capable of rendering the movies we receive from the API, we can add logic to make a request to get Movies and render these on the screen.

Update App.js with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';

const App = () => {
    const [movies, setMovies] = useState([]);

    const getMovieRequest = async () => {
        const url = `http://www.omdbapi.com/?s=star wars&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest();
    }, []);

    return (
        <div className='container-fluid movie-app'>
            <div className='row'>
                <MovieList movies={movies} />
            </div>
        </div>
    );
};

export default App;

• We're removing the hardcoded movies from our movie state value (line 7 in your IDE)
• We've added a function that calls the API. This uses the Fetch API (line 9 in your IDE)
• We are hardcoding a search value for now – later we'll add an input that the user can type a search value into (line 10 in your IDE)
• If we get any movies back in the search, we're going to set this to our movie state
• We're using a useEffect to make sure the API call only happens when the app loads for the first time (line 20 in your IDE)

Since we already pass the movie state value to the MovieList as props, this works automatically without us having to change our JSX. How nice!

How to Add Horizontal Scroll

While we're here we're going to add the fancy horizontal scroll effect and a dark background – Netflix style.

Go to App.css and delete everything that's there. Then add the following:

body {
    background: #141414;
    color: #ffffff;
}

.movie-app > .row {
    overflow-x: auto;
    flex-wrap: nowrap;
}

Thats it! Try scrolling horizontally through the movies in the browser.

How to Add a Heading and Search input

So far we've been using hardcoded search values, but this might not please the non Star Wars fans.

Next we'll add a heading and a search input that lets the user search for whatever they want.

How to add the Heading

Add a new component to the components folder called MovieListHeading.js. Open it up and add the following:

import React from 'react';

const MovieListHeading = (props) => {
    return (
        <div className='col'>
            <h1>{props.heading}</h1>
        </div>
    );
};

export default MovieListHeading;

• This accepts a heading prop which gets rendered within a Bootstrap column
• This allows us to reuse this later

How to add the Search Input

Add a new component to the components folder called SearchBox.js. Open it up and add the following:

import React from 'react';

const SearchBox = (props) => {
    return (
        <div className='col col-sm-4'>
            <input
                className='form-control'
                value={props.value}
                onChange={(event) => props.setSearchValue(event.target.value)}
                placeholder='Type to search...'
            ></input>
        </div>
    );
};

export default SearchBox;

• This renders an input
• Takes a value from props, and when the user types, calls a function which updates the value. This is also taken from props.

How to save the Search Input to state

Now that we have some new components, we need to know what the user has typed so that we can send it to the API. Update App.js with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    const getMovieRequest = async () => {
        const url = `http://www.omdbapi.com/?s=star wars&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest();
    }, []);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList movies={movies} />
            </div>
        </div>
    );
};

export default App;

• We're adding a new state value to store what the user types (line 10 in your IDE)
• We're importing our components (lines 5/6 in your IDE)
• We're adding a new "row" that holds our MovieListHeading and Searchbox components (line 29 in your IDE)
• And we're passing the searchValue value and the setSearchValue function to the SearchBox component (line 31)

By saving the state of the input in App.js, it makes it easy for us to pass the search value to the getMovieRequest function.

How to call the API when the Search Value changes

Now that we know what the user has typed, we need to call the API with this value. Update App.js with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList movies={movies} />
            </div>
        </div>
    );
};

export default App;

• We're updating our getMovieRequest function to accept a parameter: searchValue (line 12 in your IDE)
• We're passing this value to the request using a template string (line 13 in your IDE)
• We're updating the useEffect hook to run whenever the searchValue changes (line 25 in your IDE)
• When the useEffect hooks runs, it passes the new searchValue to our getMovieRequest function (line 24 in your IDE)
• This does a call to the API and updates the state if we get results as usual

Try this in the browser – and you'll see the results update in real time.

How to Add Favourites

Being able to search for movies is nice and all, but how are we supposed to remember to watch all these fantastic films? By adding them to favourites, of course!

We'll add a nice "zooming" effect that shows an "Add to Favourites" button when the user hovers over the poster, like you see below.

We'll also add logic to add/display any favourite movies the user selects:

How to add the Overlay

We'll start by adding the overlay and zooming effect. Go to MovieList.js and update it with the following:

import React from 'react';

const MovieList = (props) => {
    return (
        <>
            {props.movies.map((movie, index) => (
                <div className='image-container d-flex justify-content-start m-3'>
                    <img src={movie.Poster} alt='movie'></img>
                    <div className='overlay d-flex align-items-center justify-content-center'>
                        Add to Favourites
                    </div>
                </div>
            ))}
        </>
    );
};

export default MovieList;

• We're adding a new class to the parent div: image-container. This will allow us to add the zoom effect (line 7 in your IDE)
• We're adding a new div which will be the overlay. We'll hide this div initially and show it when the user hovers over (line 9 in your IDE)
• We're adding some text (line 10 in your IDE)

Now if you save and run this, nothing will happen. We need to add some CSS for the magic to happen. Go to App.css and add the following to the file:

.image-container {
    position: relative;
    transition: transform 0.2s;
}

.image-container:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.image-container:hover .overlay {
    opacity: 1;
}

.overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    transition: 0.5s ease;
    opacity: 0;
    bottom: 0;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

• We're adding a transition effect to the image container to "scale" it when the user hovers over (giving us the zoom effect)
• We're adding some styling to the overlay which is hidden initially
• We're increasing the opacity (that is, showing the overlay) when the user hovers over

If you run this in the browser, you can see the image "zooms" and the overlay appears when you hover over. Neat!

How to create the "Add to Favourites" component

Next we're going to create an "Add to Favourites" component that we pass to the MovieList which we'll then render in the overlay.

Create a new file in the components folder called AddToFavourites.js. Add the following:

import React from 'react';

const AddFavourite = () => {
    return (
        <>
            <span className='mr-2'>Add to Favourites</span>
            <svg
                width='1em'
                height='1em'
                viewBox='0 0 16 16'
                class='bi bi-heart-fill'
                fill='red'
                xmlns='http://www.w3.org/2000/svg'
            >
                <path
                    fill-rule='evenodd'
                    d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z'
                />
            </svg>
        </>
    );
};

export default AddFavourite;

This will return the text "Add to Favourites" and a "Heart" icon (taken from www.icons.getboostrap.com).

Next we're going to import this component into App.js and pass it to our MovieList component. Update App.js with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList movies={movies} favouriteComponent={AddFavourites} />
            </div>
        </div>
    );
};

export default App;

• We're importing our new AddFavourites component (line 7 in your IDE)
• We're passing this as a prop (favouriteComponent) to our MovieList component (line 35)

Now that our MovieList component accepts this component as a prop, we can render it in our overlay

Remember that React components are just functions - so we can pass them around like we do normal functions!

Open up MovieList.js and update it with the following:

import React from 'react';

const MovieList = (props) => {
    const FavouriteComponent = props.favouriteComponent;
    return (
        <>
            {props.movies.map((movie, index) => (
                <div className='image-container d-flex justify-content-start m-3'>
                    <img src={movie.Poster} alt='movie'></img>
                    <div className='overlay d-flex align-items-center justify-content-center'>
                        <FavouriteComponent />
                    </div>
                </div>
            ))}
        </>
    );
};

export default MovieList;

• We're taking our favouriteComponent from props and assigning it to a variable. This lets us use it as a react component (line 4 in your IDE)
• We're rendering our favouriteComponent in the overlay (line 15 in your IDE)

This approach lets us customize what gets rendered in the overlay. We can pass any react component and the MovieList component will render it. This makes our MovieList component reusable.

How to save favourites to state

So we have our favourites component in place, and although it looks nice, it doesn't do anything yet.

When the user clicks the "Add to Favourites" component, we want to take the movie they clicked and save it into a new state object called favourites. We'll then render this list in the UI.

Open up App.js and update it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [favourites, setFavourites] = useState([]);

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    const addFavouriteMovie = (movie) => {
        const newFavouriteList = [...favourites, movie];
        setFavourites(newFavouriteList);
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList
                    movies={movies}
                    favouriteComponent={AddFavourites}
                    handleFavouritesClick={addFavouriteMovie}
                />
            </div>
        </div>
    );
};

export default App;

• We're adding a new state object to hold our favourites. We'll add whatever movie the user clicked to this array (line 12 in your IDE)
• We're creating a function called addFavouriteMovie, which accepts a movie. This takes the current favourites array, copies it, adds the new movie to it, and saves everything back into state (line 25 in your IDE)
• We're passing this function as a prop (handleFavouritesClick) to our MovieList component (line 44 in your IDE)

Now that we have our state object, and a way to update that state object, we need to call this from our favouritesComponent in MovieList.

Open up MovieList.js and update it with the following:

import React from 'react';

const MovieList = (props) => {
    const FavouriteComponent = props.favouriteComponent;

    return (
        <>
            {props.movies.map((movie, index) => (
                <div className='image-container d-flex justify-content-start m-3'>
                    <img src={movie.Poster} alt='movie'></img>
                    <div
                        onClick={() => props.handleFavouritesClick(movie)}
                        className='overlay d-flex align-items-center justify-content-center'
                    >
                        <FavouriteComponent />
                    </div>
                </div>
            ))}
        </>
    );
};

export default MovieList;

• All we're doing here is taking the handleFavouritesClick function from props and adding it to an onClick property in the overlay
• We're passing the current movie the map function is currently on to the handleFavouritesClick function

Now if you run the app, click "Add to Favourites" for any movie, and open up the React dev tools (in Chrome) you'll see it updates in state.

Unfortunately the hooks aren't named the same as what we called them, but we can guess which one it is:

How to render Favourite movies

Things are looking good so far. we have the ability to save things to favourites, but haven't actually displayed them yet.

We're going to reuse the MovieList component to display our favourites. How fancy!

Open up App.js and update it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [favourites, setFavourites] = useState([]);

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    const addFavouriteMovie = (movie) => {
        const newFavouriteList = [...favourites, movie];
        setFavourites(newFavouriteList);
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList
                    movies={movies}
                    favouriteComponent={AddFavourites}
                    handleFavouritesClick={addFavouriteMovie}
                />
            </div>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Favourites' />
            </div>
            <div className='row'>
                <MovieList movies={favourites} favouriteComponent={AddFavourites} />
            </div>
        </div>
    );
};

export default App;

• We're adding a new row and within it, adding a new heading using the MovieListHeading component (line 47 in your IDE)
• We're adding a new row below that, and rending our favourites using the MovieList component (line 51)

This is an example of how to create a reusable component. If a component uses the similar logic but displays different data for different situations, you can probably reuse it.

Fire this up in the browser and everything should work:

How to Remove Favourites

Next we want to add the ability to remove movies from favourites. We'll take a similar approach we did to adding favourites:

• Create a remove component that we pass to our MovieList, which gets rendered in the overlay
• Create a function called clicked to remove the clicked movie from state.
• Pass a function to handle the onClick event when the user clicks the remove component

How to create the RemoveFavourites component

Create a new file in the components folder called RemoveFavourites.js and add the following:

import React from 'react';

const RemoveFavourites = () => {
    return (
        <>
            <span className='mr-2'>Remove from favourites</span>
            <svg
                width='1em'
                height='1em'
                viewBox='0 0 16 16'
                class='bi bi-x-square'
                fill='currentColor'
                xmlns='http://www.w3.org/2000/svg'
            >
                <path
                    fill-rule='evenodd'
                    d='M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'
                />
                <path
                    fill-rule='evenodd'
                    d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'
                />
            </svg>
        </>
    );
};

export default RemoveFavourites;

• We're adding the text "remove from favourites" (line 6 in your IDE)
• We're adding a "remove" icon which we get from icons.getbootrap.com (line 7 in your IDE)

How to remove favourites from state

Similar to what we did before, we need to write a function that removes a selected movie from our favourites state.

Open App.js and update it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';
import RemoveFavourites from './components/RemoveFavourites';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const [favourites, setFavourites] = useState([]);

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    const addFavouriteMovie = (movie) => {
        const newFavouriteList = [...favourites, movie];
        setFavourites(newFavouriteList);
    };

    const removeFavouriteMovie = (movie) => {
        const newFavouriteList = favourites.filter(
            (favourite) => favourite.imdbID !== movie.imdbID
        );

        setFavourites(newFavouriteList);
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList
                    movies={movies}
                    favouriteComponent={AddFavourites}
                    handleFavouritesClick={addFavouriteMovie}
                />
            </div>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Favourites' />
            </div>
            <div className='row'>
                <MovieList
                    movies={favourites}
                    handleFavouritesClick={removeFavouriteMovie}
                    favouriteComponent={RemoveFavourites}
                />
            </div>
        </div>
    );
};

export default App;

• We're importing our RemoveFavourites component (line 8 in your IDE)
• We're creating a function called removeFavouriteMovie to remove a given movie from our favourites state (line 31 in your IDE)
• To remove we're using the filter function. This returns a new version of the favourites array that does not include the movie we wish to remove
• We're passing our RemoveFavourites component and our removeFavouriteMovie function to our MovieList component (line 60 in your IDE)

Because we already coded our MovieList component to accept a component to render and a function to call, everything just works!

Now if you run this in your browser you should be able to remove favourites:

How to Save or Remove Movies from Local Storage

The last thing we're going to do is save to local storage. This lets us persist our favourite movies when the page reloads or if we open the app in a different window.

We'll save our favourites to local storage when something changes, and we'll retrieve our favourites from local storage when the app loads, saving this to or favourites state.

Open App.js for the final time and update it with the following:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import MovieList from './components/MovieList';
import MovieListHeading from './components/MovieListHeading';
import SearchBox from './components/SearchBox';
import AddFavourites from './components/AddFavourites';
import RemoveFavourites from './components/RemoveFavourites';

const App = () => {
    const [movies, setMovies] = useState([]);
    const [favourites, setFavourites] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`;

        const response = await fetch(url);
        const responseJson = await response.json();

        if (responseJson.Search) {
            setMovies(responseJson.Search);
        }
    };

    useEffect(() => {
        getMovieRequest(searchValue);
    }, [searchValue]);

    useEffect(() => {
        const movieFavourites = JSON.parse(
            localStorage.getItem('react-movie-app-favourites')
        );

        setFavourites(movieFavourites);
    }, []);

    const saveToLocalStorage = (items) => {
        localStorage.setItem('react-movie-app-favourites', JSON.stringify(items));
    };

    const addFavouriteMovie = (movie) => {
        const newFavouriteList = [...favourites, movie];
        setFavourites(newFavouriteList);
        saveToLocalStorage(newFavouriteList);
    };

    const removeFavouriteMovie = (movie) => {
        const newFavouriteList = favourites.filter(
            (favourite) => favourite.imdbID !== movie.imdbID
        );

        setFavourites(newFavouriteList);
        saveToLocalStorage(newFavouriteList);
    };

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Movies' />
                <SearchBox searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <MovieList
                    movies={movies}
                    handleFavouritesClick={addFavouriteMovie}
                    favouriteComponent={AddFavourites}
                />
            </div>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <MovieListHeading heading='Favourites' />
            </div>
            <div className='row'>
                <MovieList
                    movies={favourites}
                    handleFavouritesClick={removeFavouriteMovie}
                    favouriteComponent={RemoveFavourites}
                />
            </div>
        </div>
    );
};

export default App;

• We're adding a function called saveToLocalStorage. This function takes a list of items, and saves them to local storage against a key. In this case the key is react-movie-app-favourites. (line 38 in your IDE)
• We're saving to local storage when we add a favourite movie (line 45 in your IDE)
• We're saving to local storage when we remove a favourite movie (line 54 in your IDE)
• We're using the useEffect hook to retrieve favourites from local storage when the app loads, and we're setting this to state (line 30 in your IDE)

Fire this up in your browser and you should be able to save favourite movies - even if you close the browser!

The End - What Next?

Thanks for reading, and more importantly - congrats on making it to the end!

If you enjoyed this article, make sure to check out reactbeginnerprojects.com. You'll find a bunch of free projects you can try out to learn the key skills you'll need to land a job as a React developer and boost your portfolio.

In this beginner React tutorial, we're going to build a shopping app. We'll work with complex state objects, update parts of the state, and use existing state to calculate new state.

Check it out here:

Try it yourself

If you want to have a go yourself first, here are the scenarios (you can also grab the starter code below):

• The user should be able to add new items to the list, by typing into the input and clicking the "+" symbol
• The user should be able to increase/decrease the quantities of a particular item
• The total should show the total quantity for all the items in the list

Video walkthrough

Starter Code

Grab it over on GitHub here

How to display a list of items

The first thing we're going to do is display a list of items. If you working with the starter code, you'll see that I've added a state object:

const [items, setItems] = useState([]);

We're going to initialise this with an array of objects. We'll then use the map function to loop over this list and display the items.

Replace the above line with the following:

const [items, setItems] = useState([
    { itemName: 'item 1', quantity: 1, isSelected: false },
    { itemName: 'item 2', quantity: 3, isSelected: true },
    { itemName: 'item 3', quantity: 2, isSelected: false },
]);

You'll notice that each item in the array is an object. This object represents each item (or row) and holds the things we'll need to display:

• The item's name
• The quantity
• A flag which we'll use to display a "tick" or "empty circle"

The reason we put this list in state as an array is because the list will change. When we want to change the list, we just add things to or remove them from the array and React will automatically update the UI for us.

Ok now we just have to add a map function to our JSX and loop over this array and display the properties on the UI.

Replace the item list div with the following:

<div className='item-list'>
    {items.map((item, index) => (
        <div className='item-container'>
            <div className='item-name'>
                {item.isSelected ? (
                    <>
                        <FontAwesomeIcon icon={faCheckCircle} />
                        <span className='completed'>{item.itemName}</span>
                    </>
                ) : (
                    <>
                        <FontAwesomeIcon icon={faCircle} />
                        <span>{item.itemName}</span>
                    </>
                )}
            </div>
            <div className='quantity'>
                <button>
                    <FontAwesomeIcon icon={faChevronLeft} />
                </button>
                <span> {item.quantity} </span>
                <button>
                    <FontAwesomeIcon icon={faChevronRight} />
                </button>
            </div>
        </div>
    ))}
</div>