Web Development Project Ideas: how to build your portfolio (+ 35 ideas)

WEB DEVELOPER PORTFOLIOREACTANGULARMERN STACKMEAN STACKPORTFOLIOFRONTEND DEVELOPMENTFULLSTACK DEVELOPMENT

(if you speak Italian and you would like the first part of this article in a video format, check out this link, disclaimer: the video does NOT contain the 35 projects!)

Developers are the most curious people on earth. They are always striving to learn something new and find something new to build.

A very common problem among students and junior developers is that most of them do not know what to build. A lot of the time they get stuck in the same four to five projects that everybody and their mother has built, and can’t get a new idea.

So, how do you pick a portfolio project?

Very first tip: you’re not supposed to build a startup. It doesn’t matter if this is a webapp only you would use. It doesn’t matter if there’s already something like that out there. What matters, is that it’s an app that works and that proves that you are a badass developer! The best way to find something to build is to base it on something you love. Are you a nerd? Build a nerdy app. There’s nothing wrong with that! ✨You like music? Build something in that realm! In my job as a teacher I’ve seen way too many students build a generic e-commerce just because they “heard/read somewhere that it’s the best way to showcase your skills” (pls stop, i am beggin u). It’s not. It’s really, really not, unless you build a working e-commerce, with payments and a dashboard, refunds, admin functionalities, inventory, customer service chat etc… Just a CRUD and a Stripe integration are not an e-commerce. Rather than going with what you are supposed to build, build something you enjoy!

Second point: what do you want to do moving forward? Are you looking to specialize in frontend? Backend? Are you especially strong in design? All of these matter. When picking a project, try to think around your strengths and your aspirations. Recently, I have been trying to learn more backend, so I have built a very back-end focused project where I explored Mongo Aggregations (and i almost died in the process 🥴).

Make it complete. There’s a lot of devs out there. Especially a lot of juniors. Make sure not to be just another one of them. Make your project shiny. Make it professional. Make it a real, usable, functioning app that looks nothing short of any app you’d pay for. I’m talking loading screens and splashes, stacking alerts, quick loading times (check out my article on lazy loading with React 😉), responsive design… You name it, you build it. Speaking of design… are you using colors correctly? Or are you slapping bootstrap components left and right and hope it looks good? Spoiler: it doesn’t! Every app must have a unique palette and design that is tailored to the app it self. You wouldn’t steal a car, you wouldn’t steal a movie, and you wouldn’t theme a coffee marketplace in purple and green, would you? If you are short of tools and inspo, read my favourite UI tools.

You got that project idea? Nice, good job! 💘

You don’t? That’s fine too😉 I have prepared 35 (+ a couple) project ideas you can use for free! But before we get to the list, a couple of disclaimers:

As we discussed before, the goal is to create a project that makes sense for your interests and your goals, so don’t just take the idea and bring it to your VSC, try to think of how you can customize it. Can it be made into a PWA? Can you add a feature that you’d find useful? Is there something you can add that will boost your skills into a specific area? Really think about the project and customize it to you and you only. Remember, you don’t want to be just applicant #45638, you want to be YOU! Leave the mark! ✨

But I know you want to read the list, so here it is, use it wisely:

  1. Student Information System 📚Admins can create teacher, student and parent accounts to add, modify and see information about the school schedule, homework, grades and important communications. — Teacher account: create and modify classes, take attendance, add and modify grades, add and modify homework, add communication to one or more classes — Student: can only see grades, homework and overall attendace — Parent: can only login after verifying with an ID (which needs to be approved by an admin or teacher) and have a mandatory password change after the first login. Can see kid’s grades, attendance and communicate with teachers.
  2. LMS with Integrated Video Calls 🎓 Expand the student information system by adding features for online schooling, including homework submissions, online testing, video calls, and integrated chat functionalities. A calendar for classes and events makes this a comprehensive tool for remote education. Other extra features: — homework turn-in and grading — online testing — videocalls, both group and 1on1 — calendar with events such as classes, tests, etc. — class chat and 1on1 chat with teacher
  3. Note-Taking System 📝This can be added to number 2 or be developed by itself. Develop an app that allows users to take notes in various formats — typed, handwritten, or audio. Include features to embed images and videos, and organize notes by classes or subjects to make it extra ✨shiny✨
  4. Flashcard App🎴Build a simple application to create and manage flashcards. Add the option to share these flashcards with friends to make studying more collaborative and interactive.
  5. School Dashboard 📅 Enhance your note-taking system by incorporating a Pomodoro timer, to-do lists, and a customizable dashboard. This project focuses on creating a central hub for managing study schedules and academic tasks, independently from teachers.
  6. Game Collection Manager 🎮Design a clean UI for managing and sharing the user’s game collection. In this scenario, importing from Excel or similar thematic website is a must-have. If you want to work with AI, include dynamic suggestions based on the user’s current collection, along with a wishlist feature.
  7. App to Compare Builds from Your Favorite Game 🎲Create an application where users can compare different builds of their favorite game. Tailor the app to your favorite game (not the most popular, not the most played, your favorite game) and let users see the differences between their chosen setups.
  8. L4P, WoW Raid and Guild finder🎯Find players and groups for raids and guilds in World of Warcraft. Make sure to add a filtering system, so that players can sign up and specify their preferences, and be found by only pertinent guilds and parties. If you want, add social features to help gamers connect and coordinate.
  9. TCG Wishlist and Deck Builder 🃏Build an application to manage TCG wishlists and design decks. Allow users to track their collections and share them with their friends. Extra bonus points if you let users export their wishlists and decks in various formats, like images or csv files.
  10. Custom TCG Card Generator ✨Create a tool for generating custom trading card game cards. Users can design their own cards and print or share them with others. Veeeery cool if you’re looking to learn more about drag and drop and the canvas HTML tag!
  11. Trading Card Price Comparator 💵 Into web scraping or looking to learn? Create an app to compare the prices of trading cards across different platforms. Extras might include features for tracking price changes and setting alerts.
  12. Video Game Price Comparator 🎮💸Similar to the project above, but with videogames. This can actually be modified and used for basically any interest you might have!
  13. Pokedex (but for real…)🐾The Pokedex is a very common project. It usually uses one or two API calls and that’s it. But we want something more. We want all the info in pokemons organized in a nice, retro-vibe UI. Allow the user to save which Pokemon they have found in which game, so that they can keep track of their collections. Maybe give them prizes and badges if they find a pokemon in all generations its available in. Go all out with the social and gamification features.
  14. TV and Movie Watchlist 📺🎬Develop an app to track TV shows and movies watched or to be watched. Include features for rating, reviews, and recommendations based on viewing history. Since there’s a lot of apps that do this, why not give it a personal spin? Add AI-generated quizzes on the tv-shows to check the user’s knowledge, let the user import lists from other websites (this includes some web scraping 😉) and give it some saucy social features.
  15. Niche Social Media Platform 🌐Build a social media site tailored to specific interests or fandoms. Include features for user profiles, posts, and community interactions. Don’t just make it a generic social with a different logo. Tailor it to the specific niche. Is it game related? Maybe instead of likes, make it GGs.
  16. DVD and VHS Collection Manager 📼Create an app to manage a personal collection of DVDs and VHS tapes, complete with a wishlist and categorization features. Allow for import and maybe add some photo-to-entry functionalities so you can take a pic of your DVD and the app will read the title by itself.
  17. Online Board Game / Party Game 🎲 Develop an online version of a board game or party game you like. Make it interactive, make it mltiplayer, make it real-time! Don’t be afraid of sockets, they are your friends! ✨
  18. Moodboard Creation App 🎨Build an app for creating and sharing moodboards. Include features for adding images, text, and layout customization to help users visualize ideas and inspirations. Of course, add export and social share functionalities!
  19. Restaurant Menu 🍽️Don’t limit it to showign the user the menu: allow for real-time ordering and create a backoffice packed with functionalities for cooks and waiters! If you want, give it a payment gateway to skip the line at the end of the night!
  20. Time Management Tools Dashboard ⏰Develop a dashboard integrating various time management tools like Asana, Trello, Google Calendar, and Notion. Make it a nice, unified view so that the user can see all their tasks from all the systems.
  21. Split Bill Calculator 🍴Should we split it? Oh, you’ve only had an appetizer and Max’s had the steak? Wait, let me… Uh… Yeah, I guess we could take off… Let’s just pay separate. Or… I could build an app for calculating and splitting restaurant bills among multiple people. Include features for customizing the split and if you want, make it so people can add their Venmo/Paypal account, just in case.
  22. Budget Management App 💰Speaking of money… why not create a simple app for managing personal budgets? Include features for tracking expenses, setting budgets, and generating financial reports.
  23. Planning / Agenda App 📅Develop an application for planning and managing daily activities. Include features for scheduling, kanban boards, reminder notifications, and task prioritization. This would looks very good as PWA.
  24. Gym Management System🏋️Build a management system for gyms, including features for member registration, medical records, scheduling classes, and tracking instructor hours. Make it extra sparkly my adding sport-specific features!
  25. Habit Tracker 📈Create an app to track and analyze habits. Include visualizations for progress and customizable reminders to help users stay on track.
  26. Diet Tracker with Reminders 🍎Similar to #25, develop an application for logging food and receiving reminders for meals. Give it a different spin by letting the user pre-plan their meals through the week and give them an exportable and sharable grocery list.
  27. Multi-Site Wishlist Creator 🛍️This heavily relies on web scraping, so if you’re into that build an app for creating and managing wishlists across multiple websites. Include features for importing items and setting alerts for price changes.
  28. PWA for Household Chores Assignment 🏠Whose turn it was to was the dishes? Create a Progressive Web App (PWA) for assigning and tracking household chores. Include a calendar, reminders, and task management features. I imagine this being open on a tablet or phone, so make sure it’s super responsive and optimized for smaller views!
  29. Recipe Planner Based on Fridge Contents 🥕Develop an app that helps users find recipes based on the ingredients available in their fridge. Bonus points if you can figure out the content of the fridge from pictures, or if you also add expiration dates and send the user reminders.
  30. Blog Post and Social Media Snippet Saver 📝Build an app to save and organize snippets from blog posts and social media. Include filtering, sorting and exporting.
  31. Shift Management for Restaurants / Hospitals ⏳Create an application for managing employee shifts in restaurants or hospitals. Make sure it includes scheduling, alerts, shift swaps requests, and notifications if someone can’t come in. Everything that is currently done in group chats… in an app.
  32. Cosplanning App 🌟 Develop an app for creating and sharing cosplay plans. Make sure the user can plan by different events and export nice, aesthetic images to share on social media.
  33. Running Session Helper🏃How long? How hard? Is this app a glorified timer? Yes. But make it tailored to running. For example, I usually warm up for 5 minutes in HRZ 2, run two intervals of 2 minutes at HRZ 3 (with 1 min breaks) and then run two 1 minute intervals at HRZ 4 (with breaks). This gets stressing to track on my smartwatch, so… why not build the glorified timer? Bonus points if you can add notes at the end of the session.
  34. Home Garden Management PWA 🌱Develop a Progressive Web App (PWA) for managing home gardens. Include reminders for watering, planting schedules, and growth tracking with pictures.
  35. D&D Party Finder Social 🎲Create a social platform for finding and joining D&D parties. Make sure the campaigns and parties can be filtered and that those who create them can add all the limits: how many players? is it online? what themes will it be covering? how often are we playing? are we allowed to drink and eat during D&D? All of these are important questions. Especially the last one. Please let me eat during D&D.