10 Web App Project Ideas for kick starting Full Stack Web Development
You’ve already set the ball rolling when it comes to learning the full stack for building a web application. You’ve been diligent with learning the basics and are making people around you drop their jaws when you talk about those callbacks and closures. Whether your goal is to make your peers even more jealous of you, or simply to have way more fun and get into the practicals of learning full stack web development, we have a few project ideas for you to build on:
If you are new to the full stack arena, and are testing the waters with front end development, try these out:
1. To-Do List
A great project to check off from your to do list. When you’re a beginner, start from here. Create a simple Javascript application, which lets you enter all the tasks that you have planned for the day. The tasks show up as a list. You can delete a task that you don’t want anymore. Whenever you finish a task, add a functionality to strike it off.
2. The 2048 game
Yep, the game that didn’t let your roommate sleep peacefully. If you are at a stage where you have a good hold of Javascript, give it a shot to challenge yourself. No frameworks necessary. 2048 is a game which consists of a 4*4 grid, which has two tiles with numbers on it in the beginning. You slide a tile into another one into the same number and it adds up. Your goal is to create the number 2048. If you try building the game, it will sharpen your JS game for sure. More info on the game here.
If you are fairly comfortable with Javascript and want to dip your toe into working with its frameworks, try creating the UI around some free apis:
3. Covid tracker
Who doesn’t want to be more vigilant with Covid? Build an app to help your friends and family with the latest Coronavirus data. You can get all the information using this API. Once you get the information, you could use it along with your Frontend skills to build graphs/charts or any other kind of UI that you would like best to show the information in a readable format.
4. Compare flight prices
Are you tired of all the hacks to get the cheapest flights? Build an app to compare all the flight prices! Create a UI around this API. You can build a screen which asks the user to enter the to & from city, the date, number of flyers etc. Pick up the data from the UI, process it with the api, paint the result on the screen and board the cheapest flight.
5. Cryptocurrency tracker
Build a dashboard where you can render all the data for cryptocurrencies – the coins, the prices, the exchanges etc. Use this API. Use the information to paint a graph for the price history/search for a coin – a UI that would suit your needs.
If you’re at a level where you know how to build both the APIs and the UI, and are well versed with the database and hosting of your application, you’re on the full stack highway sister. These project ideas will help you move into the next gear:
6. Habit tracker
Always wanted to make working out a habit, but didn’t even realize when you started to slip off? Create a habit tracker to track your own progress. Enable logging in for users, and save them in the database. Save the habits they are trying to build. Enable the users to log their progress every day. Using that log, tell the users they’ve been on a streak for x days, give them appreciation badges on accomplishments.
7.A Dating App
“I don’t get people my type on Tinder or Bumble” – is that your story too? Well, it’s time to dump Tinder and Bumble and take matters in your own hands then. Build an app where users can login, upload their details and pictures. Create a landing page to see profiles, swipe left and right. If it’s a match, enable the users to chat. This is a pretty exciting and challenging project to work on, who knows, you might even meet a fellow full stack developer who has a crush on you 😉
8. Pizza ordering app
Imagine you are a competitor of Dominos. Build an app to crush their business 🙂 Your application can have two kinds of users – one is the restaurant admin, who knows the inventory. He loads what all, and how many pizzas are available, into the DB. The second kind of user is the customer. Create a page for him to look through what he wants, enable him to add his guilty pleasures to his cart and checkout.
9. Location tracker
10. Splitwise clone
Calculating shared expenses is a chore, and that’s where your full stack skills could come handy! Create a landing page for the users to add expenses. Save their expenses, along with the share of each and everyone. Paint on the dashboard of all the users how much they are owed, and how much they owe. And finally, settle up once the payment is made.
All these projects would help if you already know the basics and are now looking to get a feel of how web development happens in real life. But, if you are at a stage where you are not fully confident with basics yet, try checking out the Real world Enterprise Application Developer program from Vivanet.
READ covers all the technologies that are required to build, deploy and test an application from end to end, packaged under one roof. It focuses on experiential learning by providing its students live projects to work on. All of this is taken care of in a simulated corporate environment that uses Agile practices. The mentors aim at shaping you into a full fledged professional, equipped to impress your boss with your skills from Day 1.
Good luck on your full stack journey!
Author: Simmipreet Kaur