The Greatest Web Development Project Ideas to Build a Kickass Portfolio

You’re probably a web developer looking to gain experience or looking to build your portfolio by creating projects that actually help you gain that exposure so that you can get a highly-paid job as a web developer. If that’s your situation, this post is exactly what you need.

You’ll find 3 strong web development project ideas that will actually result in a significant improvement of your skills and resume. With steps-by-step instructions to get you started the right way. Today. Let’s get right to it.

Build a social media web application

My first suggestion as a developer with 5 years of experience building all kinds of application is to start with the traditional social media web app. Why? because it’s a great project that tests all your skills when it comes to frontend development, backend server creation and the usage of APIs and libraries.

Social media sites are not easy to build because they have lots of moving parts which means your codebase will reach the 1000 lines of code easily. Continue reading to see how to proceed so that you don’t get lost in the process:

1. First, stop coding and plan your idea

I get it. You want to dive right into the code and get this project done as quickly as possible. I thought like that for many years until I decided to plan ahead before even writing a single line of code. The difference was night and day. You end up creating code 50 times faster and a more solid product because you knew what had to be done during each development second.

Do you have an idea of many hours you waste on creativity blocks, not knowing how to continue with the next step? It’s crazy but it happens all the time. Those moments when you finish a feature and you stop coding because you don’t have a clear idea of what comes next. A simple to-do list will help you tons.

So before writing your project, create a file called TODO.txt or SETUP.txt and write your idea in-depth. Make sure you’re creating something useful. A niche social media for a particular group of people, think linkedin but for other topics. For instance:

SETUP.txt
1
This is a social media application for book writers that want to connect and communicate with like-minded individuals by setting up a profile and sharing small snippets of their books.

Then you can begin creating a list of features that you want to implement for this first version. A list of features is great because you know when your application is completed. When you have them all done, you can feel free to deploy it to the world. Here’s my own:

SETUP.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Desired features:
- A login and register system with email / password
- An email server that sends recovery messages for those that forget their email
- Login with google, facebook, twitter and linkedin so that we can collect user data and improve the user experience with a 1-click login
- A profile page with the user name, age, a books written portfolio, hobbies and interests
- The ability to share book snippets from your book instead of writing content. There will be messages similar to twitter tweets but only from your book. You can't post "tweets" that are not part of your book.
- A comment function for every snippet of your book shared. People can respond to comment and start conversations one level deep-only, not like reddit where you have many nested comments. More like youtube comments.
- A function to follow other users and see their content on your feed.
- If you don't follow anyone, see random content from your interests.
- OPTIONAL: create a machine learning model that delivers the best content based on other people's publications, your engagement, your interests, etc.

Technologies to use:
- React.js for the frontend
- Webpack with babel
- Stylus as the CSS-preprocessor
- Node.js in the backend with Koa.js
- MongoDB as the database
- Nginx as the frontend server on a linux instance
- AWS as the hosting
- Godaddy for the domain
- Github with CircleCI for continuous integration and delivery

From there you can build a to-do list of steps to follow for each feature to really nail down each step in the process. I sometimes do it for complex features that I need to clarify.

2. Create a mockup in photoshop or sketch

A mockup, if you’re new to design, is a visual representation of your website. A picture or a pdf file. They are usually done with photoshop, sketch, indesign or many others. Personally I’ve mainly used photoshop but I’m getting into sketch. You can do it with any image editing software anyways but it’s much better that you design your mockups with one of those applications since they simplify your life and allow you to be more productive.

Often, you’ll create a mockup for every page of your website to have a visual clue of your end design.

How do I create a mockup?

Well, you do it by starting with a title or a navigation bar, then you create the first section which can be a hero image (an single image that takes almost the entire page to capture your attention) or text. Take ideas from similar projects. What do you see when you open twitter for the first time?

As you can see, twitter doesn’t even have a scrolling page if you’re a new user. It simply gives you a few benefits of the application with a call to action to join now because most people that come to twitter heard it somewhere else and want to create an account already. They can afford to be simple and to the point.

Take ideas from them and start building your mockups. You may not need more than one since you can base your future designs from your initial mockup.

3. Code the essentials

There a few essential parts that you can’t live without when it comes to a social media site. I’m talking about:

  • Login / register functions to create users
  • A profile page to modify some essential information about yourself
  • A content generation system such as tweets or videos that provide content to your app

That’s why you start with them. Once you have them all covered you can get into the details of how they work and look to improve the styling with your own branding.

Styling your web apps is quite a tricky process because you can spend hours making minimal adjustments that won’t impact your final application. Leave it for the end when the core features are working.

4. Build the rest of the code

In my case, I’d create the follow-users functions, the 1-click signin with other social media accounts as an alternative to email and improve the book-snippet sharing function to make sure people are not sharing snippets from books they haven’t written or parts that don’t exist in their books.

That’s just some advanced implementation for my particular case. For your project it may be different.

At this stage is when you can focus on designing your mockup web page by working on the css. By leaving the CSSing for the end, you save yourself hours of tinkering with cool designs that will be changed sooner than later. I’ve been there many times.

That’s all when it comes to creating a kickass social media site, continue reading to see what’s the project idea number two…

Build an extension to an existing product

Most great ideas come from taking an existing product and expanding from there because you can access a user base interested in those ideas.

For instance, if you’re an avid user of the email marketing platform Mailchimp, you’ll know some features that can be done better, maybe things that are lacking. Pay close attention, be observant. Personally, I find Mailchimp lacking integrations with other sites.

What if I want to see the dashboard on my own website without having to login and adapt to Mailchimp’s dashboard? Wouldn’t it be great to take what interests me the most things like the audience change, the active campaigns and my active subscription forms and get show them on my own web app’s dashboard?

That’s something that I came up with in a few minutes of thinking actively and exploring the Mailchimp application. It’s probably not that great of an idea because I don’t have any market validation, ideally I’d research and talk to people familiar with Mailchimp to ask them for feedback on what I plan to create.

That way I can make sure they are willing to use my product and even pay for is. This is not only a good portfolio building method, but a great business creation method. You can actually create profitable businesses if you tap on an existing user base such as Mailchimp’s an provide an improvement that people want.

These are the steps to make such project a reality:

1. Do some market research

Spend a few hours sending emails to people that are using the product that you want to improve. Remember, you’re building an extension, a product that improves an existing web app. That’s why you can easily find people using it and reach out to them.

Use google and social media. I find twitter and facebook as the best sources to contact new people besides direct email. It’s even better if you can talk face-to-face with them in an interview-style type of conversation so that you can see his true feelings about a particular part of the application.

Ask them about common problems they are facing with that product. Then show them your idea in as few word as possible. Always make sure to provide as much value as possible by helping them right away with some tips that they may need. Even just a thank you note can get them talking.

You can continue until you have talked to 5 - 10 people. In a real-world situation you want to reach out to at least 50 people before committing some serious time on building your idea.

Create a google form even although I prefer the direct chat-type of conversation. Have a list of questions you want to ask but feel free to expand on other topics. You never know when a great idea can show up.

2. Research the API

Usually you’ll interact with a web app that has an API to help you access their functions. It helps to know if your idea can be done in the first place.

Something funny happened when I was creating an extension for youtube: It was an application that allowed advertisers to see their in-video performance statistics. Something not possible with the current system because they are fixed in the video and there’s no way of knowing people’s interactions from there.

I was all hyped-up with the idea because it made perfect sense and it had a great potential. However when I decided to se if was doable by taking a look at youtube’s API, I realized that they didn’t offer individual user video statistics, meaning you can’t see what each user did during the video. You just have some generic statistics about the video.

On top of that, only content creator could access those statistics meaning that advertisers would have to ask to each youtuber independently for permissions to get statistics about their in-video ads.

That shouldn’t be a major inconvenience since they already have some kind of close communication with that youtuber but the first project is a deal breaker. You can’t create such application because the API doesn’t allow you to create the core feature.

That’s when I stopped right there and decided to move on to another projects. It may be the case for you. You could have the best idea in the world but if you don’t have an API that allows you to access some private information, you won’t be able to do much.

Of course, it the idea is something you truly believe in and see the potential of it, you can always create your own way by using scrapers or tracking information with a bot, for my particular case.

But this is not a serious business, at least not yet. We are building this project to grow our resume and get that valuable experience. That’s why you want to make your life as easy as possible.

3. Build the extension

Just like in the first web development project idea, start with a mockup, then a setup file explaining everything in detail and work on the core features. Once those are done, expand and create the juicy details.

I highly recommend you to add animations, graphs and fancy 3D graphics if possible. You want your project to look as good as possible. Those details will pop clearly creating immediately a strong sense of a quality product, building trust on your capabilities.

Alright, let’s take a look at the last project idea which will probably surprise you…

Build an ecommerce store from scratch

Ecommerce websites are all over the place. You have tons of tools to help you create great and fast looking shops, so why bother creating an ecommerce web app from scratch? Well, because it’s one of those hard projects that will push your boundaries to create a solid product.

Something you probably never done before. We’re talking about delivering a production, commercial-grade type of application that actually works.

When it comes to ecommerce sites, they are getting more complex each day. You have artificial intelligence-based suggestions from terabytes of micro interactions from billions of users, complex dashboards displaying general information about your website and backends that look like entirely new operative systems.

Don’t be scared though. You don’t have to create the next amazon. Just a great product that’s efficient, looks great and uses the right technologies for the job. You’re the one in charge of implementing your most desired features.

What’s great about building an ecommerce web app from scratch is that you’ll be able to use it yourself to sell your own products down the line. Who knows. You may even sell consulting packages to companies that wanna hire you for smaller projects.

Those are all great opportunities that come from creating a big application such as an ecommerce store. Here are all the steps to get you started:

1. Research your niche

You want to build something useful. A niche website is the right option when you’re in the saturated market of online shops. Find something you like. A particular product you enjoy more than others. Build from there an ecommerce store.

It will help you setup the general vibe of the your site, define the branding and determine the features that you want to include. For instance, it doesn’t make sense to design a super detailed product page if you’re selling to kids directly.

Researching your niche will also help you build a useful product that may end up becoming a real business. You’re doing this anyway, why not go all in and create useful products along the way?

How do you research your idea? Use google to search for what you want to build. For instance, if I want to create an ecommerce web application that sells exotic bugs to bug lovers, I’d search for “buy beetles online”.

Specific terms to get an idea of what’s out there. Do the sites look outdated? Do they seem to be making millions of dollars daily, thus complicating your existence as a newcomer? Is there an opportunity for a missing feature?

All those questions are great and will point you in the right direction when choosing a niche. You can also use twitter to ask people and start conversations around the topic. Use the twitter search and comment on related tweets.

2. Design the mockup

As you’ve seen already, a mockup is essential to determine the branding and future design of your website. It will give you ideas and clarify concepts by forcing you to visually create your customers lifecycle. The process they go through when opening your web app.

Some applications such as indesign even provide you with interactive prototypes that can be used like real apps but without the working code. You can create those to build your product visually. Then create the real thing based on that.

3. Write the code

Remember to create a setup file explaining your idea, the features and the target personas. Start by coding the core features. Those that are essential to an ecommerce. Things like:

  • Payment processors to be able to pay with your credit card, bank or paypal
  • Login / register systems
  • A carting feature to add products to your cart
  • A customer support system via email, chat or via tickets to help them buy

From there, you can create the visual candy using CSS and implement the working mockup. I recommend you to focus on creating the features with an ugly website and add the styling once everything is finished, tested and working as expected.

You shouldn’t take more than a week to complete the code. If you find yourself coding non-stop on this project, stop for a second and reconsider what you’re trying to build. You’re probably too focused on the details when the core features have to be done first.

When do you determine that the application is complete?

When you’ve added the core features and you’ve implemented the mockup. The details and everything that comes after that is up to you. The animations, the smaller features. They are great but they can take you way more time than you initially expect.

Once you have the core functionality and design, you can deliver your ecommerce application.

Conclusion

In this article you’ve seen 3 great ideas with step-by-step instructions to get you started the right way with some essential tips from someone that’s been doing it for five years. If you liked it, be sure to share it with your peers and social media to help me create more great content.

Join hundreds of developers like you

Receive monthly quality content that makes you a better Blockchain and Fullstack Web Developer straight to your email. No spam, all pure value. Because a community is the best way to learn.