In here we want to practice actual code writing skills, This is a Nextjs 13 Tutorial, do so with the very versatile popular tech stack of nextjs (v13, app folder approach) and Mongodb with mongoose in the back and React to handle the view and rendering of our basic To Do App. We will not do much of design or SASS or CSS. We will not build a backend API server but we’ll use the Nextjs routes handling In this nextjs tutorial to create a basic CRUD API for create, read, update and delete an item from our to do list. We will not do authentication right now but it’s on the table and we might do it in our next post!

Before you continue, consider reading “First Day Engineer, Install everything you need” – to get a fully work station of a profesional software engineer with all the tools you’ll need.

Tech Stack

Technology	Level	Note
nodejs – better to install with NVM(!)	Beginner	To write the basic API, routes, connection to database, handle data
HTML, Reactjs, JSX	Very Beginner	HTML, JSX, Reactjs will help us to show the user the information from the database and design it how we want to structure the information. ReactJs will help us to design the code, structure components, and give our project a scalable approach so we can add more features and increase the complexity of our UI.
CSS,SASS	–	We Will not do much CSS or SASS or any design here, in some cases in some tutorials we will be using existing UI library but here we will not do any design (so the project will look ugly, prefer yourself).
MongoDB, Mongoose	Beginner	MongoDB is our NOSQL, large scale database to manage easily our todo data structure, it also useful because it’s JSON structure of data which makes it easier for us to write and read data. we’ll be using Mongoose as well to strictly structure our database object and define the data, because we don’t want anyone(other engineers, or ourself) to inject inappropriate or corrupted data.
NextJS	Beginner	Nextjs is soft-framework, it will provide us with structure for our files, our folders and an opinionated approach to backend(API) structure to implement. it is good because we don’t want to dive into complex software engineering concepts like MVC or micro services and starts diving into Devops work by managing more than one server. our project is small hence we’ll be using Nextjs – but thanks to Nextjs it can scalable and we’ll take from Nextjs what we want – which makes Nextjs a Wonderful soft-framework and easy to understand in this nextJS tutorial.
Github, VScode, Browser, ChatGPT, Terminal, MongoDB Compass, curl(terminal)	Beginner	Those tools are behind the scenes, we might not write or read about them in this article but they are here, in used. However you can pick whatever you want here and it’s up to you.

Above will give you idea behind our decision making and what each of our tech stack responsibilities are meant to handle.

Nextjs 13 Tutorial, Todo App (2024)

Tech Stack

Start Here – Nextjs Tutorial

Subscribe to my newsletter

Lior Amsalem

Lior Amsalem