javascript
webdev
beginners
programming
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
- 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
- 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
- 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
- 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
- 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
- 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
Top comments (0)