Home » Blog » Build a Full Stack Todo Web App using MERN (Part 1)

Build a Full Stack Todo Web App using MERN (Part 1)

  1. Build a Full Stack Todo Web App using MERN (Part 1)
  2. Build a Full Stack Todo Web App using MERN (Part 2)

In this series, I am going to show you how to create a full-stack Todo app from scratch and deploy it for others to checkout.

For the tech-stack we will be use the following stack, also we will later-on learn how to deploy our app to a hosting service and use a domain to make it available to world to view and use (you can use alternatives too.. the process will be similar) :

For UI/UX (Design)
  • Figma
  • Dribbble (for Inspiration)
For Frontend (Client) :
  • React
  • React Hooks
  • Typescript
  • Tailwind
  • Styled Components
  • Storybook
  • Jest
For Backend (Server) :
  • Node
  • Express
  • Typescript
  • Mongodb
  • Caddy
Others
  • Lerna
  • Yarn workspaces
  • Docker, Docker-compose (Containerization)
  • Git, Github (For Code Repositories)
  • AWS ECS (For hosting)
  • Godaddy ( For domain)
  • VSCode (Code editor)
  • Ubuntu OS

Getting Started

We will be using Monolithic Design Pattern (both client, server, db logic will be in the same repo) We will be using Yarn Workspaces and Lerna for managing our monolithic project and Docker to containerize our app.

What are we building ?

We are building a Todo App, where user can signup/login and manage his daily tasks, we will be adding more features as progress, for now lets assume the app will be having the following features:

App features:

  • Authentication (Login/Register) using Email, Google
  • User and Admin Dashboard (Authorization and Roles)
  • Manage Collections and Todos (Create, Edit, List , Delete Todo based on roles)
  • Dashboard widgets for Users , Todos

Process:

We will follow the following process, in order to be productive and tinker with our ideas and design thinking to convert that in to code!

  1. Design the UI Mocks using Figma
  2. Setup workspace and app base
  3. Setup Github Repo and Push the code
  4. Iterate changes for all the required changes
  5. Write Unit Test Cases and Test the app
  6. Deploy the app to AWS EC2
  7. Connect the domain to AWS EC2
  8. Test the Live App !

Great ! So let’s get started and start building our beautiful Todo App !