DEV Community

Cover image for 5 full-stack projects to add to your portfolio before 2020 ends 🤯
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

5 full-stack projects to add to your portfolio before 2020 ends 🤯

Procrastination, we've all dealt with it.
But today because of this blog post you will find five full-stack projects you can add to your portfolio before the end of 2020!

Coming up with ideas on how to test your skills can be a pain in the ass. Trust me, I've been there and so has everyone in the tech business.

Let's dive right into it!

1. React movie search app 🎬

Are you building the next Netflix?

Who doesn't love movies? And React! This project is perfect for getting started with React and showing you how to work with API's and Styled components.

What you will learn

  • React + Hooks
  • Styled components
  • API Usage
  • States using hooks

All and all, a very great tutorial to get started with React!

You can find the tutorial on freecodecamp, which is an amazing resource for projects: Movie search app

2. Instagram clone in Ionic 📸

Instagram clone in Ionic

Ionic, is a hybrid mobile platform, which I adore 💙. So let's make a graphical Instagram clone. It's always good to re-create something just to understand the work that goes in certain websites and applications.

What you will learn:

  • Ionic structure and setup
  • Creating new pages and routing
  • Styling an ionic app
  • Styling based on an example application

This tutorial can be found on pusher Instagram Clone and does not include the back-end side, BUT with some googling, you'll make that work (Firebase 🔥).

3. Building a blog with Gatsby 🎩

Build your own blog with Gatsby

Gatsby is a fantastic React-based framework, and a lot of people are building blogs based on it.

Scott Spence wrote a fantastic full-blown tutorial on how to get started building your own blog on Gatsby.

What you will learn:

  • Custom layouts
  • Styled components
  • Syntax highlighting blocks
  • SEO! Very important
  • Deploying to Netlify 👀

So, no stopping you now, go ahead show us your blog!

You can find this tutorial on freecodecamp Building a Gatsby blog

If building your own blog is not your vibe, give hashnode a try!

4. Food ordering app with Strapi and Next.js 🍔

Deliveroo clone in Next.js

Confession: I ❤️ food!

If you do too, this project is your thing to tackle. We are building a food ordering app using Next.js, a fantastic and powerful upcoming framework. And Strapi, which makes it easy to build API's without all the booh-hah.

What we will learn:

  • React hooks
  • GraphQL
  • Stripe payments!
  • Strapi
  • Styling

This really is a full-on project, and you will learn so much from doing a project like this. You can find this on the Strapi blog and it's very extensive! Next.js Strapi food app.

5. Build a JavaScript powered Candy Crush 💎

JavaScript Candy Crush clone

I'm going to be honest, not my favorite mobile game. But Ania does a fantastic job at creating this game in JavaScript

What you will learn

  • JavaScript Listeners
  • JavaScript Creating and removing elements
  • Styling the game
  • Clean code

You can find this one, and many more on her YouTube channel Build your own Candy Crush.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (44)

Collapse
 
suprnova32 profile image
Patricio Cano

Most of the examples you mention here a very frontend heavy so I wouldn't really call them "full-stack". The closest they get to something related to the backend is using GraphQL.

The projects themselves are great, but they focus on frontend. For a "full-stack" developer to really showcase their abilities, you would need to add at the very least one project that is either backend heavy, or just a full backend project. You need to showcase you can design a good API, that you can handle data being stored, retrieved, etc. That usually includes creating an efficient data model, the relationships between the different models, efficient storage mechanisms, and proper SQL usage.

A quick example could be to create a URL shortener. It can offer a WebUI and an API endpoint to shorten a URL. Make sure that the addresses are stored properly, making sure uniqueness is respected, and that it can handle collisions. Try to use both PostgreSQL and MongoDB as storage backends.

Projects like that should definitely be part of a full-stack developer's portfolio.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • Edited
Collapse
 
jstewart8053 profile image
jstewart8053

This is the best best idea list I have seen yet! tysm!

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

I'm glad you found it helpful. Thank you 🙂

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Thank you! That's a cool comment to receive.

Thread Thread
 
jstewart8053 profile image
jstewart8053

I love all your articles Chris... keep up the great work!

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Wow, thank you so much!

Glad you're loving my articles, will definitely keep it up, closing down on 300 already 👀

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice ones

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Thank you!

Collapse
 
lexiebkm profile image
Alexander B.K.

Nice, I will take a look at those projects.
Thank you

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Glad you found them useful

Collapse
 
tanmayc07 profile image
Tanmay Chaudhari

Great! Thanks for sharing.. Going to start building this to add to my resume🙌😀

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Nice. Thank you 👍

Collapse
 
yugeroh profile image
Oliver James Aco

Thank you! This is what i'm looking for.

Thread Thread
 
myogeshchavan97 profile image
Yogesh Chavan

Glad you found it helpful :)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hey patricio,
Thanks for your comment and valid point
I guess there is a big vague area about full-stack.

On papper some of these would qualify, seeing a frontender could connect his frontend too a serverless solution and call it full stack.

I totally get your point,
Would be a great topic too investegate when we can call it full-stack.

I had an interesting talk this afternoon.

The statement was it’s more

  • product developer
  • platform engineer

Where a full stack would be a product dev, doesnt really matter what solutions as long as it serves the product

A platform engineer would be someone actually using propper databases and design a solid system.

I found this statement very powerful and maybe more true than using the term full stack.

What would you say?

Nevertheless yes these are easier beginner front end with simple database solution projects.
Still good for people who want to start their journeys as full stack devs

Collapse
 
crongm profile image
Carlos Garcia ★

I found this post very helpful. Though I have some side projects of my own it's always good to find new challenges to improve skills. It would be nice to have a follow-up post that focuses more on the back-end part of projects to have a well-rounded full-stack skill set. Thanks!

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Can do, but might be a big mix of back-end systems.
So 1 php, 1 node, 1 react, 1 python etc to keep it fair, but really good idea!

Collapse
 
santhoshraju91 profile image
Santhosh Raju • Edited

Also lets not throw away your skills to deploy your application, it can be either a VM or a bare metal server or a docker image.

Yeah it depends on how it is viewed by each individual, for me Full-stack is Full stack does not matter which tech stack you use, as far as you know how to build and deploy your application.

Collapse
 
dailydevtips1 profile image
Chris Bongers

That's my take as well, yes if you work for a google or AWS this is hardly a full-stack but for some companies this is way over a full-stack, al depends and let's give people a starting point.

Collapse
 
debggr profile image
Amiit

Great list.

Another option I really like is to build the useful ideas/designs posted on Behance/Dribbble by designers.

This way once can add cool project to their portfolio, and most importantly a useful idea comes to life.

Such designs can be found as follows:
behance.net/search/projects/?searc...

dribbble.com/search/concept%20app

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hey Amiit,

For sure! That's another great way of becoming better at design, it just has less helping handles which can be a good thing if you know what you are doing.

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan
Collapse
 
pozda profile image
Ivan Pozderac

where's backend here? xD

This is list of projects that are based on frontend skills.

Frontend is not just UI/UX aka HTML+CSS+JS but also fetching, transforming and handling data along with the requests or if you want 'consuming the API'. GraphQL exists on both sides so yeah, that could be it but here on the list we have just queries which also falls under frontend skill. You can do a lot with firebase, i like it and use it here and there, but that ain't no backend.

So if there is no authentication, authorization, database communication, creation of API, implementing GraphQL resolvers (which are optional) then we can't call this list of full-stack projects.

I just came here to check this list out as a frontend developer who is just starting with backend and saw nothing that I already didn't use as a frontend developer.

Nevertheless cool list and you can learn a lot about frontend from the list.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hey Ivan,

I totally get your point, but it depends where you come from.
If you have no experience this is a good step up to full-stack
If you already have experience/job in the field, it's more front-end.

I do not agree a front-end dev should know anything about connecting to backends, being a serverless thing or a actual database.
This is something "society" forced on everyone, same as expecting back-end devs to know design all of a sudden.

The article which includes Strapi, can be considered "full-stack" depending on the company, the people who benefit from this article are mainly junior/starting people, keep in mind they need to start somewhere and will most likely not get recruited by a Google on the first try.

So yes, i agree but we as a tech industry must also see we need to shape people and we can't throw them in the deep and expect a front-ender to fully build a database structure.
Using a serverless database is then a great first step.

Hope you're seeing my point here.

~ Chris

Collapse
 
pozda profile image
Ivan Pozderac

I see your point and I agree for the Strapi (great tool btw) article. I also agree that this is great article for juniors and beginners.

Frontend is fragmented today so I assumed that frontend is sum of it all (styling, JS and API consuming), but doesn't have to be - that's probably where my comment came from.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Yeah I 100% got you,

Planning to write about the different job roles soon and what they actually entail too.

So keep an eye out for that one.

Collapse
 
piperymary profile image
Mary • Edited

Grocery and food delivery app are on demand nowadays so it's a really great experience to build such an app. You can also read the article to learn more about technology stack for this.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Indeed it's always good to build projects for yourself that is a hype at the moment.
Many companies will think oh wow they person already build what we are looking for.

Collapse
 
ucefidel profile image
Youssef Idelhadj

Thanks a lot to sharing this gold informations, it's very interesting for back-end developers also to improve our skills in front-end tools and be full-stack in the future. I was looking for projects to clone it, and i found my happiness in this huge article. Thank you again :)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Wow, thank you so much, it makes a huge difference depending on where your coming from, if your really good at front-end these might be too simple, but still full-stack considering you'll be able to create a fully working product.

I'm glad you enjoyed it. 🔥

Collapse
 
dustinbrett profile image
Dustin Brett

Personally I would rather hire developers that can make something original. When they follow these tutorials and make clones with nothing unique, I wonder how much they did and how much was just following the tutorial. Good practice though.

Collapse
 
dailydevtips1 profile image
Chris Bongers

It's all about practice, and a developer doesn't have to come up with a unique idea, as long as they program neat, efficient, and well documented I would say.

Being unique seems very overrated for a developer to me personally?

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Thanks for the ideas. I'm here looking for ways on how to become a full stack frontend developer without the backend for now.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Full-stack generally means back and frontend you will be a frontend developer then ;)

This one is then really good to do:
dailyui.co/

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

I'm aware of that, that's why I put the "frontend" in cursives lol.
My "full stack" would be the UX design first and then the UI development and maybe any other logic that is required for the UI.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

Awesome, UX is a amazing field, I wish I was more skilled in.

Collapse
 
scrabill profile image
Shannon Crabill

Ania's projects are so much fun! I may do the candy crush on this week.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Fun and really great to follow 👌🔥

Collapse
 
theanamhossain profile image
Md. Anam Hossain

Awesome. Thanks

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks for your comment 🤟

Collapse
 
dustinxavier profile image
Dustin Dinh

2020 ended but I just started those project from 2021.

Collapse
 
dailydevtips1 profile image
Chris Bongers

They're still good projects in 2021 🤩