loading...
Cover image for 5 full-stack projects to add to your portfolio before 2020 ends 🀯

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

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

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

Posted on by:

dailydevtips1 profile

Chris Bongers

@dailydevtips1

I write daily web development tips that help you become a more efficient developer. πŸ‘¨β€πŸ’»βš‘οΈ

Discussion

markdown guide
 

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.

 
 

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

 

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!

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!

 

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.

 

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.

 

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

 

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.

 

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.

 

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

 

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.

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.

 
 

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.

 

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?

 

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 :)

 

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. πŸ”₯

 

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

 

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

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

 

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.

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

 

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

 

Fun and really great to follow πŸ‘ŒπŸ”₯