DEV Community

Cover image for 7 Fullstack Projects You Need to Make in 2021
Henry Boisdequin
Henry Boisdequin

Posted on

7 Fullstack Projects You Need to Make in 2021

What fullstack project should I make? If you keep asking yourself these questions, you're in the right place. I've curated a list of 7 fullstack project that you need to make in 2021. Let's dive right in!

E-commerce Site

An e-commerce site is a site where users can buy goods (e.g. Amazon, eBay, and more). By creating an e-commerce site, you will learn about all the parts of creating an API and a website: security, CRUD, databases, frontend frameworks, state management, and more. This is the perfect project to build for someone looking to master fullstack web development.

For me, my tech stack would be the following:

  • Svelte
  • Node.js + Express
  • Typescript
  • PostgreSQL

Tutorial (if you get stuck)

Social Media App

Alt Text

A social media app is an app where users can engage with one and another online (e.g. Instagram, Twitter, Facebook, and more). Building a social media app is a perfect way to master how to make an engaging platform for users by prioritizing performance, security, and the app's look.

For me, my tech stack would be the following:

  • Flutter
  • Node.js + Express
  • MongoDB

Tutorial (if you get stuck)

Blog Site

Alt Text

Build a blog site like dev.to! Create a site where users can share their knowledge with others. By doing this you will learn about content management, building APIs, CRUD, and more.

For me, my tech stack would be the following:

  • Next.js
  • Chakra UI + Tailwind CSS
  • Node.js + Express
  • PostgreSQL
  • Redis

Tutorial (if you get stuck)

Todo List

Alt Text

The Todo List is a classic fullstack project to make. This project is the most beginner-friendly on this list. Create a site where users can log in and add and remove todo items in a list format. This project will teach you about authentication, CRUD, databases, and more.

For me, my tech stack would be the following:

  • Svelte
  • Flask
  • PostgreSQL

Tutorial (if you get stuck)

Workout Tracker

Alt Text

This project is one of my favourites on this list. Create an app where users can store the workouts they have completed. This will teach you about fullstack development in general: authentication, security, CRUD, frontend frameworks, and more.

For me, my tech stack would be the following:

  • Vue.js
  • Django
  • Mongo DB

Tutorial (if you get stuck)

Chat App

Alt Text

This is a fullstack project everyone is talking about nowadays. For this project, create a website which allows users to privately chat and chat in groups. This project will teach you the following: real-time data transfer, frontend frameworks, authentication, security, and more.

For me, my tech stack would be the following:

  • React.js
  • Firebase + Firestore

Tutorial (if you get stuck)

Zoom Clone

Alt Text

Zoom has taken everyone by storm in 2020. Everyone I know is using Zoom for everything in their life: work, school, socializing, exercise, and more! Here's a challenge: create a "Zoom Clone" which allows users to chat using their webcam. I would definitely recommend this project for beginners.

For me, my tech stack would be the following:

  • WebRTC
  • socket.io

Tutorial (if you get stuck)


I wish you the best of luck tackling any of these projects. Please share a fullstack project that you've been recently working on, I would love to see them! Thanks for reading.

Henry

Top comments (68)

Collapse
 
aslasn profile image
Ande

I think the best one on this list is probably a zoom clone or a video chatting app, if you have the time of course. You learn a lot trying to make it better. It includes text chat too.

And suggestion would be to not worrying too much about the how the UI looks but focus on the functionalities and making the navigations smoother and more interactive.

Collapse
 
hb profile image
Henry Boisdequin

I totally agree with you! Creating an app which allows users to interact with each other via their webcam is no easy feat. This project focuses on the backend as much as the frontend and UI which makes it a true fullstack project. Thanks for reading.

Collapse
 
tamusjroyce profile image
tamusjroyce

NVidia Jetson Nano has a optimized version of WebRTC and supports AI if you want to go a step further. It also makes a great security camera system.

Collapse
 
param302 profile image
Parampreet Singh

you are right

Collapse
 
murkrage profile image
Mike Ekkel

Great list 😄. I think the best projects to learn new things with are building clones of existing products and figuring out how you would make it better. What kind of features do you think it's lacking or should be done in a different way.

I particularly like the workout tracker because I think it's fitting for the current times where gyms tend to be closed. How would we actively track and motivate home workouts, that kind of stuff.

Collapse
 
hb profile image
Henry Boisdequin

Thanks for reading! I definitely think that building clones of an existing project are a great way to get better too (especially on your CSS skills).

Collapse
 
levivm profile image
Levi Velázquez

Very nice list of projects. Just complementary content. I created a post here in dev.to about how to choose the right backend framework. This can help out if someone wonders what kind of framework should use based on the domain problem.

Collapse
 
hb profile image
Henry Boisdequin

That's an awesome post! Thanks for reading!

Collapse
 
codecustard profile image
Emmanuel Barroga

WebRTC and socket.io is definitely a great tech stack choice! They are great for other use cases as well, for instance socket.io can also be used for an auto match making video game: codecustard.io/portfolio/toonkins-...

Collapse
 
hb profile image
Henry Boisdequin

Yes, socket.io can be used for many things! I love socket.io because of that!

Collapse
 
xemicolon profile image
Light

I’ll try out the zoom clone and social media app. I’ve done an e-commerce with MEVN stack (Mongo, ExpressJS, Vue, NodeJS) and I’m currently reproducing it with MENN stack (Mongo, ExpressJS, NodeJS, NuxtJs).

Collapse
 
hb profile image
Henry Boisdequin

Good luck! Thanks for reading!

Collapse
 
dhatguy profile image
Joseph Odunsi

I just finished a small e-commerce project using the PERN stack.

pern-store.netlify.app

Collapse
 
hb profile image
Henry Boisdequin

Cool app! Thanks for reading!

Collapse
 
alohe profile image
Alohe

I'm making a React web app with React, Nodejs + Express, Mysql do you think that's a good stack? like should I use another database or MySQL is fine?

Collapse
 
alohe profile image
Alohe

Also awesome post 👏👏👏 I'll definitely be making some of your suggestions

Collapse
 
hb profile image
Henry Boisdequin

Thanks, that means a lot!

Regarding MySQL, if you are good at MySQL then it's fine for you to use it. If you have the time to learn PostgreSQL I would highly recommend using it over MySQL because PostgreSQL has better concurrency, more features, and is closer to and adheres to the SQL standards better. This is a great tutorial for getting started with PostgreSQL: youtu.be/tp_5c6jaNQE.

Thread Thread
 
alohe profile image
Alohe

Alright thanks, I'll check it out.

Collapse
 
meryemrai profile image
Meryemrai

Thanks for sharing the article. Helpful information in fullstack industry online with more details. Stunned by the level of content. Also take a look in stunning Landing page simular to article is online fitness platform.

Collapse
 
paras594 profile image
Paras 🧙‍♂️

Great List !! :)

Collapse
 
hb profile image
Henry Boisdequin

Thanks!

Collapse
 
dastasoft profile image
dastasoft

For the video chatting app/Zoom clone I think is worth mentioning to try an implementation with Jitsi Web API. Working with an external product have value too.

Collapse
 
hb profile image
Henry Boisdequin

I've never tried the Jitsi Web API! I'll try it out, thanks for mentioning it!

Collapse
 
dastasoft profile image
dastasoft

I have a simple implementation on github.com/dastasoft/project-holo with ReactJS, check it out maybe some initial issues are resolved there.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.