DEV Community

WebDevZTH
WebDevZTH

Posted on

Epic Todo ✅

Implement a full-stack todo application in different tech stacks using different tools and techniques

Aim ✨

To make a fullstack todo application with different variations of backend api's (REST, Graph, RPC) and frontend libraries/frameworks (React, react-native, Nextjs, graphql-client) using different tools and techniques.

Overview 📚

  • Build different versions of client using react, react-native, nextjs
  • Use different client-side tools react-query, axios, redux, redux-saga, mobx, custom hooks, graphql-client, react-bootstrap, tailwind-css, chakra-ui
  • Use different rendering strategies CSR, SSR, ISR (all using nextjs)
  • Build different versions of server api using REST (MVC architecture), Graph (graphql), RPC (tRPC/gRPC)
  • Use different server-side tools joi, yup, zod, jwt, express-jwt, bcrypt, argon2d, morgan, express, busboy, formidable, multer, helmet, winston
  • Use different databases postgres (SQL), mongodb (noSQL)
  • Use different ORMs prisma, mongoose, typegoose
  • Use firebase tools firebase-auth, firestore
  • Implement basic CI/CD using github-actions
  • **Setup horizontal scaling with pm2, nodejs-built-ins (fork, process, worker)
  • **Use message-queues rabbit-mq, bullmq
  • **Use server-side caching redis
  • **Use websockets with socket.io

PS: All items marked with (**) will be low priority

Procedure 👨‍🔬

  • Different versions of frontend todo-client using different libraries mentioned above.
  • Fetch data using different tools mentioned above.
  • Experiment with different client-side techniques like lazy-loading, Suspense, code-splitting and component-injection.
  • Experiment different techniques in server-side like refresh-token/access-token, email verification, logging, clusters, thread-workers, caching, sticky-sessions.
  • Enable basic CI/CD for projects.
  • All different variations of stack will be in different branches of this repository.

Outcome 🎯

  • Learn these different tools and tech stacks.
  • Experiment with a variety of 3rd party services like firebase-auth and firestore, other ecosystem tools.
  • To Become a better full-stack engineer.

Why a todo-app ⚛️

  • Its a dynamic application which requires GET, POST, PUT/PATCH, DELETE operations in terms of database operations.
  • We can build this app with many variations and the codebase size will be manageable by a single or small group of devs who want to learn and explore hands on.
  • We can experiment and prototype rapidly since the application logic is simple.
  • We can then increase the engineering complexity and not feel lost due to simple nature of application.

**Attention ( for developers ) 🛑

This repository code is based in the nodejs and javascript ecosystem, we will mainly work with javascript and add typescript functionality in a different branch.

Visit the repository on Github Epic-Todo

PART I 👉 Full-stack todo app built using react, express and mongodb (coming soon!)

Let me know if you'll be following along with the progress down in the comments 🥳

Top comments (0)