You are currently viewing Building a todo app using React and Next.js

Building a todo app using React and Next.js

This app is from a tutorial on freeCodeCamp by Spruce Emmanuel. I thought this might be a fun weekend project to try. I was hoping that I could recommend it to students as a way to practice their skills.

The tutorial starts by saying to set up the development environment. It also provides a helpful link. But this step wasn’t necessary. As long as you have Node installed, you can start the project. (Check by running node -v) I did both but decided to use Next.js instead since the tutorial is designed to work with it. Just in case you would like to set up an app with Vite, I’ve added the steps at the bottom of the page.

Set up the development environment for Next.js:

  1. npx create-next-app@latest
  2. Name the project
  3. Can use the defaults (I added an src/ directory but I’m not sure I needed to.)
  4. cd into the project directory
  5. Run: npm run dev
  6. Visit the local host url

Notes and tips:

  • The Form component needs “use client” added before the component is defined. In Next.js 13, components are marked as Server Components by default. So any interactive components must be specifically marked. The error message is Error: Event handlers cannot be passed to Client Component props.
  • When adding the Item component to the TODOList.jsx file, add it below the existing TODOList component.
  • After adding content to the page.js file, the instructions read that you’ll see the un-styled app skeleton in the browser. I didn’t because the TODOList component hasn’t been passed props yet. So I saw an error message instead. Later I noticed that todos was passed to the TODOList component when it’s updated to use the Item component. I just missed it the first time around.
  • The TODOList.jsx file uses useState, useRef, and useEffect. So React needs to be imported at the top of the file.
  • todos need to be passed into the Form and TODOList components. The tutorial shows it passed in the page.js file, but not when showing the Form and TODOList components. It could be that the author meant for us to do this on our own.
  • The code for the svgs isn’t in the tutorial but can be copied from the GitHub repo.
  • The tutorial shows the placeholder <> </> in the Header component. Since the CSS uses header as a selector, the element <header></header> is needed instead.
  • A difference checker is a big help when working through a tutorial where existing code is updated. It’s easy to miss all of the updates but a difference checker will flag them.
  • If you’re using an AI extension, consider pausing the autocomplete for a bit. Sometimes some code sneaks in that is different than the tutorial, increasing the need to debug.
  • There were some warnings for Next.js, “Extra attributes from the server:…” Based on this StackOverflow answer, I added suppressHydrationWarning={true} to the <html> tag. If I continue to have this issue, I might try the Chrome settings option in the same answer.

I made these corrections and moved forward. I also opened the GitHub repo for the project (linked at the bottom of the tutorial) to compare my code.

The components:

The tutorial starts by creating the .jsx component files needed for the app. This went pretty smoothly. I did turn off Codeium’s autocomplete (the AI extension I’m currently using.) The autocomplete wasn’t close, though it’s usually great. I wonder if this is because of the order the code was written. There wasn’t enough context for Codeium to understand.

The CSS:

Honestly, I wasn’t going to type all that! I copied and pasted the CSS into the styles.css file. My app wasn’t styled exactly like the images in the tutorial. I’m not worrying about it for now since it’s likely a missing/misspelled className that I’ll find eventually. And I want to use my own styling anyway. (Note: the issue was that the code for the svgs isn’t in the tutorial. It can be copied from the GitHub repo.)

Make it functional:

The app has all of the basic CRUD operations, but uses local storage instead of a database. Todos are added to local storage and read from local storage when the app is reloaded. Todos can also be edited and deleted. Much of the code to implement this functionality is added in the page.js, Form.jsx, and TODOList.jsx files.

Running the app:

I had tried running the app while building it, so it didn’t come as a surprise that it didn’t work after I finished the tutorial. Time to dive into some debugging!

BTW, this doesn’t necessarily mean that the tutorial is missing some code. Where there was missing code, it’s listed in the Notes and tips section. Also, if I had checked for and resolved issues as I worked, this wouldn’t have been an issue. When I’m completing a tutorial, I’ll usually follow their instructions and debug as needed later.

This is what the app looks like now:

The current UI of the todo app. The styling is off and it's missing icons. The counter isn't working and there are errors in the console. Local storage isn't working.
The app at this point. It’s missing styling and icons. The counter and local storage aren’t working. And there are errors in the console.
  • Seeing NaN in the Todo Hero area was my typo. I had a closing curly brace in the wrong spot. I had also misspelled “blur” as “blue”. And I missed adding the hidden Edit within a paragraph tag.
  • The error in the console was because todos wasn’t passed into the Form or TODOList components. I’ve added a note in Notes and tips.
  • When I copied and pasted the svg code from the GitHub repo, the icons appeared. It would have been great if this was noted in the tutorial.

Finished app:

Completed TODO app

I changed up the styling and I’ll probably add to it. But I think the way Spruce Emmanuel styled the app is great.

Thoughts:

I really like the tutorial! It would be good for a beginner if they’re willing to be patient with themselves. Beginners sometimes blame themselves if something goes wrong and get frustrated. Most of the issues were my mistakes. And using the GitHub repo and a difference checker caught the missing svg code, that todos wasn’t passed to the Form and TODOList components, and that the <header> element was needed in the Header component. Writing a tutorial is really difficult and these are very small differences.

Set up the development environment for Vite (here):

  1. Create a directory that can hold the project
  2. In the terminal run: npm create vite@latest fcc-todo-react-app    
  3. Need to install the following packages:
  4.  [email protected]
  5. Ok to proceed? (y) y
  6. Select a framework: › React
  7. Select a variant: › JavaScript
  8. Cd into the project directory
  9. Run: npm install
  10. Run: npm run dev
  11. Visit the local host url