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