50 Cool Web And Mobile Project Ideas for 2022
This is a follow up to the article I created in 2021 50 Cool Web And Mobile Project Ideas for 2021. My tech stack has changed slightly since then. I will only use it as an example so that you can figure out how you could possibly build these applications with your own technical stack. Each project has a programming level of either beginner, intermediate or advanced. These applications can be created using front-end, back-end or full-stack skills.
These are only examples and nothing is set in stone. In a real world case you would be expected to justify the best use cases for having an SQL or NoSQL back-end for example. And as for the programming levels this is just my personal opinion everyone is different so make your own judgements. I have included a basic brief for what the application can do. Of course I am sure that you can think of more ways to increase the feature list so go ahead.
Some of these applications can be monetised and used as a IaaS, PaaS or SaaS. Check out this article to learn what they are https://www.ibm.com/cloud/learn/iaas-paas-saas and how you can apply them to your projects.
My current technical stack is:
Front-End: HTML, CSS, JavaScript, TypeScript, React, React Native, Redux
Back-End: Python, C#, NodeJS, SQL, NoSQL, Docker
Beginner
1. Vector hosting platform
Developing a platform where designers/developers can upload and store custom SVG images and icons. The code can then be exported so that other people can use them.
What you will learn
You will learn how to build a CRUD application that stores SVG data in a database. The code can then be displayed on the front-end alongside the SVG icon or image that is generated. This application could be taken even further if you allow people to leave ratings and comments too. As well as having licence agreements and even user profiles.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, JavaScript, React
Back-End: NodeJS, NoSQL
2. Technical stack recommendation tool
You answer some questions in a form and then it gives you a recommendation for a technical stack that you could use for a project. If you are just learning how to code it could even give you a possible career path to follow. Linking to courses and having a description of why you should use a certain skill.
What you will learn
You will learn how to process form data on the front-end and navigate to different screens. Alternatively you might choose to hide and show components instead when getting the form to calculate the data.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
3. A platform for finding developers on Twitter/LinkedIn
A curated list of developers who specialise in technical writing, css art, twitter spaces, web3, NFT's etc... So that we don't have to randomly search through social media instead we can go to the platform and find everyone and their niche making it easy to follow them. You can also filter and sort by location and other factors.
What you will learn
You will learn how to retrieve data from an API and display it on a page. This is also a great opportunity to learn DOM traversal and using map, sort and filter for changing the data inside an array of objects.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, JavaScript, React
Back-End: NodeJS
4. Branding generator platform
The platform creates a brand color, a selection of random generated SVG logos and recommendations for typography etc... Based on questions that you answer or maybe there is some form of machine learning involved.
What you will learn
You will learn how to collect form data and then show the results on a web page. You might even think of a way to combine this with 3rd party API's to extend the features.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, JavaScript, React
Back-End: NodeJS, NoSQL
5. Developer environment generator
The user enters a technical stack into a form and it automatically tells you what software to install with code snippets, stackoverflow troubleshooting etc...
What you will learn
You will learn how to generate information on a page from data that a user enters through a form.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
6. Developer setup recommendation website
A curated list website that has computer recommendations, keyboards, standing desks, chairs etc...
What you will learn
You will learn how to take form input which outputs data based on the fields onto a web page. For this application you could create your own back-end api or find some existing ones to use instead.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, JavaScript, React
Back-End: NodeJS, NoSQL
7. Abandoned developer project finder
A platform where you can list your abandoned developer projects and have other developers pick them up and continue working on them.
What you will learn
You will learn how to build a CRUD application that has user profiles. On the platform there should be a section for people to list projects and search functionality so that other developers can find them. There is lots of scope here for developing a feature rich application.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, JavaScript, React
Back-End: NodeJS, NoSQL
8. Onboarding website
A list for different career paths and information on getting up to speed with different technical stacks.
What you will learn
You will learn how to create a website or application that shows a list of technical stacks. Each technical stack should have a detailed walkthrough with text, images or links for learning the topic.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
9. A Wordle Clone
Yes I know there are dozens of Wordle clones out there already but that does not mean you should not try to create your own. Take it even further by adding more options like choosing different languages, using names instead of words, adding a time constraint or attempts for guessing each line. The sky is the limit!
What you will learn
You will learn how to create an application that uses DOM traversal and event listeners. If you want you can create your own word list or use an API of words instead.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript
Back-End: Optional
10. A goal tracking app
To track your moods and daily, weekly and monthly goals.
What you will learn
You will learn how to persist data and state changes. The data could be stored in local storage or in a database if you choose to have a back-end.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
11. Random conversation generator
An app that randomly creates potential conversation topics so that you never need to worry about those awkward silences again. It can even be customised and filtered by topic, level, depth etc...
What you will learn
You will learn how to create an object array which has different data. And how to randomly select them.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript
Back-End: Optional
12. A salary calculator
Create an application that can calculate how much salary someone should be making depending on their skillset, experience, currency and other factors like location etc...
What you will learn
You will learn how to do calculations in JavaScript using math and other operators. Some sort of form needs to have data that can be converted. The data should be displayed on a webpage.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript
Back-End: Optional
13. A random playlist generator
An app that can randomly generate a list of songs for your playlist. It could be able to take into account various filters such as your likes, the year, genre, how long you plan on listening to a song etc... Then it creates a playlist based on those parameters.
What you will learn
You will learn how to do work with functions, loops and DOM traversal among other things.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
14. A developer profile card
You could create an application that automatically generates an image or some data that has your profile. It can have your picture, name, job title, and technical stack. It should also be possible to make some customisations like changing the font, color and design.
What you will learn
You will learn how to do DOM traversal and how to use forms in JavaScript to capture and return data which will show up on a webpage. Interactivity is a requirement because the user needs to make changes to the font, color and design style.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
15. Responsive animated slideshow
Creating a responsive animated slideshow application. It could offer a lot of customisations for the user to play with. As a bonus you could even turn it into an npm package so that other people can integrate it into their projects.
What you will learn
You will learn how to interact with the DOM and use animations combined with images to create a slideshow.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
16. A computer game walkthrough
Why not create a platform for hosting computer game walkthroughs? It could be a standalone application for one computer game. Or you could make it even more advanced so that it holds tutorials for many games. This application can be be as simple or as advanced as you want it to be. There is even a possibility to add in lots of interactivity of some sort.
What you will learn
You will learn how to build an interactive website.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
17. A card game
You could try to recreate a popular card game like Blackjack or Poker. Or you could create a custom card game of some sort.
What you will learn
You will learn how to create an interactive game that lets at least two players play together. The features can be enhanced further if you can make the game work with multiple players or figure out a way to get the computer to play against you.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
18. A currency converter
For converting different currencies
What you will learn
You will learn how to work with math and do number calculations using JavaScript.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript
Back-End: Optional
19. Website clone
Find a really cool website and make a clone of it. If you are just getting started then try recreating a simple website first like a portfolio or news website. When you start to feel more ambitious go for something complex like Twitter, YouTube or Instagram for example.
What you will learn
How to build a website using HTML, CSS and JavaScript.
Tech Stack
Project Type: Frontend
Front-End: HTML, CSS, JavaScript, React
Back-End: Optional
Intermediate
20. Product management platform
Building a platform for managing all of the products that you own. The platform could have the ability to manage bills, recurring payments, and messages from customers for example. It could even allow you to leave personal notes for yourself in addition to reminders.
What you will learn
You will learn how to build an application that handles state and data which changes over time. Calendar integration and sending out emails and notifications would be a good addition too.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Flask
21. Mock interview platform
A platform that matches you with professionals so you can have mock video/voice interviews.
What you will learn
How to build a website that can handle live chats and video between multiple people. Creating search functionality and profiles for all users. Having a system the enables users to leave and read reviews would be quite useful too.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Flask
22. Developer collaboration platform
A platform for developers to create projects and find other developers who are interested in collaborating or contributing on the project. It would be a great way to put some live work on your resume and make new friends at the same time.
What you will learn
Building a CRUD application for a platform where users have individually profiles. A way to search for people and projects in addition to many other features that would be expected for a platform of this type.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
23. Social anxiety platform
A platform that randomly matches you with other people and gives you a random topic that both of you should talk about. Maybe there is a timer which ends and then you can match with someone else. A way to verify profiles while remaining safe and anonymous to cut down on fake/spam/bots.
What you will learn
You will learn how to build an application that uses authentication so that there is good security and privacy. The platform will require chat functionality using websockets and even video integration.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Flask
24. Pair programming platform
You get matched with another developer who has a similar tech stack. Good for practice or solving code problems. Video, audio or just text chat.
What you will learn
You will learn how to build an application that has chat functionality using websockets and possibly video integration too. There needs to be some way to share a live coding session as an alternative to having a developer look at a screen. Video calling apps like Microsoft teams let other people take control so that is one possible option if you can find a way to do it.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Flask
25. A global leaderboard for developers
A cross platform application for developers that lets everyone see how many projects a developer has worked on during the day, week and month. So you can track your progress and see how you compare with other developers.
You can switch between the leaderboards and see who the hard workers are and how you compare to them. Great for motivation and seeing who are the best people to follow. It could even have some sort of social media elements to it. Or ways to view profiles and follow people.
What you will learn
You will learn how to build a platform where people can sign up and join. There should be leaderboards that automatically get updated throughout the day.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: NodeJS, NoSQL
26. Random API Generator
A website that randomly generates an API depending on the questions that you ask or data that you input. Maybe it can export the data in different file types like CSV, JSON, GraphQL etc... Or you get an online link that you can use as an endpoint. Great for testing out fake data.
What you will learn
You will learn how to build a platform that can randomly generate a list of API's. You can either create your own API's on the backend or use 3rd party API's.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
27. A Timelapse portrait app
For keeping a daily picture diary of yourself as you change and progress every single day. Good for people who are working out and want to track their progress. Or people who just want to have a memory of how their appearance changed over a set amount of days.
What you will learn
You will learn how to set and send notifications that can be customised. The user needs a way to take a picture which is then automatically saved on a server or database. Bonus points for finding a way to put them in a gallery or have them automatically exported as a video or something similar.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: NodeJS, NoSQL
28. A computer game
It could be 2D or 3D the possibilities are endless.
What you will learn
How to do game development.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native, Unity
Back-End: C#, ASP .Net Core, SQL
29. A learning platform
You could create a learning platform of some sort it does not need to be programming related it can be on any subject.
What you will learn
How to build a full-stack CRUD application that gives users access to all kinds of courses. Users need to be able to create profiles and enrol on various courses which individually track their progress. Having a rating system is essential as is the ability to leave valuable comments.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
30. A website builder for beginners
It could be a website that shows beginner developers how to build applications. So you can choose your technical stack and then it will generate some walkthrough documentation that gives you a step by step guide on how to build something.
What you will learn
A website that takes in form data which potentially pulls in more data from a back-end api that you create.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
31. An online quiz game
Similar to Wordle but taken to a completely different level. Instead of solving words on your own you are instead randomly matched with other players. Your team has to work together to solve puzzles, word games or questions of some sort. And this can in some way be linked to a leaderboard so everyone gets to see the stats for other players.
What you will learn
How to create a word game or multiple different mini games that are team based and store teams and players scores in a global leaderboard.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
32. Excel Spreadsheet Exporter
Create an application that can take in some sort of data and then export it as a spreadsheet. So for example you could have another application that tracks your monthly spending habits. Then you can export that data as a CSV and then import it into another app and have that export as a nice readable excel spreadsheet.
What you will learn
It would be a good challenge because you would learn how to compile and transpile different data types.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Flask
33. A chat application
Creating a chat application similar to WhatsApp, iMessage, Telegram, Signal, Facebook Messenger etc...
What you will learn
How to get people to communicate with each other using a technology like the WebSocket API. The most basic requirement would be to get the chat working. These features could be extended by adding a way to send media files, do voice calls and other cool stuff that you see in chat applications like having an emoji keyboard and sharing stories.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
34. Technical assessment platform
It could be a platform for taking technical assessments of some sort. This can be anything from programming to driving tests or whatever you can imagine. There is no limit here this platform could cater to a wide array for people.
What you will learn
How to build a CRUD application that has a sign up page and a way for people to create profiles. Users would need a way to keep track of the courses that they are taking and there needs to be a secure way for people to do the tests without cheating.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
35. A rating platform
You could build a platform that lets people leave reviews for some type of product or service.
What you will learn
There needs to be a way for people to rate the items only once so they can't do it multiple times which would ruin the credibility of the reviews.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
36. A relationship tracker
For keeping track of your social life. You could use it to keep track of conversation topics, events, moods etc... It could even have calendar integration and other features.
What you will learn
How to build an application that holds various state data. Because the data is going to be changing it will need to have CRUD functionality.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
37. Banner creator
Banners are used everywhere from websites to social media, and also in apps and blogs. How about creating an application that can automatically generate banners with the correct size and dimensions for each platform.
What you will learn
How to build an application that that can make calculations based on a users input and generate the required data which the user requested.
Tech Stack
Project Type: Front-end
Front-End: HTML, CSS, TypeScript, React
Back-End: Optional
38. Interactive story app
An application that generates unique interactive stories. Taking inspiration from Wordle maybe a few chapters or episodes are released each day and they run for a whole week. So at the end of the week you would get a conclusion to the story you were following.
If you have a design background then it gives you the perfect opportunity to work on illustrations which you can then combine into a cool flowing story.
What you will learn
How to build an interactive story application that gives the user the ability to choose different paths. This is the perfect format for a web or mobile application.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: NodeJS, NoSQL
Advanced
39. Personal coaching platform
A platform for managing potential clients who want to get coaching from you. Imagine having a dedicated platform where people can ask for mentoring and coaching. There could be a way to schedule meetings and send automated responses to potential clients. You could even build in some chat or video functionality so you can have sessions right there on the platform.
What you will learn
You will learn how to build a full-stack application that has full CRUD functionality. There is also an opportunity for you to learn how to integrate the ability to have real time chat using the WebSocket API or something similar.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: NodeJS, NoSQL
40. A.I. powered Social Media Content Generator
Never run out of content ever again when you have machine learning and A.I. doing all of the work for you.
What you will learn
You will learn how to do machine learning using Python and one of the many libraries out there like TensorFlow for example.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python
41. Cloud hosting platform
Creating a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
What you will learn
You will learn how to setup a cloud account on a platform like AWS, Azure and Google Cloud. And you will need to learn how to register a domain and setup the configuration for the PaaS.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Django, Docker
42. Social media campaign dashboard
A platform that lets you track your overall follower count across all platforms. A cross platform app on the web, desktop and mobile. You can manage the content that you plan on creating and maybe give them tags and other cool information so you know what content you are going to create. And you can track the metrics because it shows analytics and data.
What you will learn
You will learn how to build a cross platform application that potentially pulls in data from external API's. For displaying the analytics and data you could use a library like D3, Highcharts or Chart.js
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React
Back-End: Python, Django
43. A Metaverse platform
A 2D/3D network for crypto, blockchain, NFT and Web3 focused social connections. A way to interact, trade and live in an expansive sandbox world where you can live a second life.
What you will learn
This would be a pretty complex application because a lot of technologies are involved and its probably better for a whole team to work on it. Developing the 2D/3D world, creating the designs, writing the back-end and front-end logic. Deploying it onto multiple platforms. The list of features and functionality will keep you busy for a very long time but you would learn a lot in the process.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native, Unity
Back-End: C#, ASP .Net Core, Python, SQL
44. An Among us clone
Try to build an Among us clone that uses web sockets for chat and has a multiplayer aspect built it.
What you will learn
There are multiple ways this application could be built. You could create a mobile version using React Native or Unity. And there is lots of flexibility for the back-end as well. If the application is going to be cross platform then there are plenty of opportunities for building it.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native, Unity
Back-End: C#, Python, Flask, SQL
45. An A.I. powered To Do List App
An app that can make recommendations based on your habits or some data you entered. So it can create tasks for you to complete or recommends the most ideal strategy for doing something.
What you will learn
Because this app will be A.I. powered it makes sense to use machine learning. Everybody makes to do list apps so think outside of the box and try to make it unique while still powerful.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: Python, Flask, SQL
46. An advanced expense tracker
Instead of building a simple expense tracker you could develop a really complex one that not only shows your expenses but other peoples expenses too. I think it would be a great way to see how everyone is managing their lives. In terms of privacy it does not need to show incomes and how much you are spending. An alternative would be to just show what you usually spend money on.
So for example, clothes, tech, food, gym, pets, bills etc... It could potentially help people who are bad with their finances so trends so that they spend more wisely. And if you see how much better other people are doing you are likely to be more motivated to follow.
What you will learn
How to build a secure platform where users can create profiles and share some of their purchase history which can be compared with other users. This will teach you how to generate data coming from multiple sources and display that data in chart and graph form alongside other metrics and data.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: Python, Flask, SQL
47. A Battle Royale game
Creating a Battle Royale online multiplayer game of some sort. You can literally create any type of game. The game could be something simple that can be played in the browser or on a mobile device. Battle Royale can mean anything from an intense 3D FPS to a simple party style board game.
What you will learn
How to build a game that has a multiplayer aspect so that multiple other users can play together online.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native, Unity
Back-End: C#, ASP .Net Core, SQL
48. Squid Game Clone
An online multiplayer type game which is very similar to the series squid game
What you will learn
How to build a game that has a multiplayer aspect so that multiple other users can play together online.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native, Unity
Back-End: C#, ASP .Net Core, SQL
49. Make a clone of one of your existing apps
We all have a ton of apps on our phones already but not all of them have the features which we desire. In fact in some cases you need multiple apps to serve one purpose. A better alternative would be to take the best aspects from all of those apps and put them into one app. Or even add some missing features which you wish one of those apps had.
What you will learn
How to recreate an existing application and possibly make a superior version of it. At the very least you will learn how to build popular applications giving you the know how to eventually develop your own unique products.
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: NodeJS, NoSQL
50. Advanced A.I./Chatbot
This is an Iron Man (Tony Stark) boss level project! Push yourself to the limit and see if you can build a really advanced A.I. Considering how complex it is most people will opt for a simple chatbot first.
If you can somehow figure out to make an A.I. that can pass the Turing Test. Then congratulations you will probably win a Nobel Prize.
FYI: The Turing test, originally called the imitation game by Alan Turing in 1950, is a test of a machine's ability to exhibit intelligent behaviour equivalent to, or indistinguishable from, that of a human.
What you will learn
How to be Iron Man 😎
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: Python, Django
51. ⭐️ BONUS: Raspberry Pi ⭐️
Buy yourself a Raspberry Pi and create your own projects. For those of you who don't know, a Raspberry Pi is essentially a range of compact and powerful single-board computers. They were designed by the Raspberry Pi Foundation to be an affordable way to teach people regardless of age and skillset how to do programming.
Check out these websites for inspiration:
https://projects.raspberrypi.org/en
https://www.tomshardware.com/uk/features/best-raspberry-pi-projects
https://pimylifeup.com/category/projects/
What you will learn
How to build cool things using a Raspberry Pi 🚀
Tech Stack
Project Type: Full-Stack
Front-End: HTML, CSS, TypeScript, React, React Native
Back-End: Python, Django