5 Projects to take your Web Developer Portfolio to next level

5 Projects to take your Web Developer Portfolio to next level

Before working on a project have you ever asked this question, will this project help me in getting a job or a client?

There are many projects that you can make, but I don't want you to end up making projects that don't challenge you enough or that doesn't shed light on all of your skills. Instead, it would be better to focus on two or three projects that would require diverse skills so that it caters to large number of clients and recruiters. These project ideas will help you in enhancing your skills and landing your dream job.

URL to Document Converter

url-to-pdf.gif

Technologies used - JavaScript, Puppeteer, Tailwind CSS

Skills mastered - File Conversion, API calls

URL shorteners have become a standard project that is included in every portfolio. But the skills required to make this app is not widely used in any other fields. Instead, a URL to Document converter can help you understand how to work with APIs and various file types.

All you have to do is create a form that takes in a URL for a web page and convert it into PDF, JPG, PNG, etc. and download it to user's local machine.

Crypto dashboard

dribbble.com/shots/16469084-Crypto-Dashboard

crypto-dashboard.png

Technologies used - ReactJS, Recharts

Skills mastered - Realtime, Dashboards, Single Page Application (SPA)

If you are learning a javascript library like ReactJS or VueJS then dashboards are a must have in your personal portfolio. Dashboards are very helpful in giving insights to the user in a visually pleasing manner and therefore is widely used among many web applications.

Create a dashboard that gives information about various cryptocurrencies in real-time. You can use Recharts to create stunning graphs in ReactJS.

Invoice Generator

invoice-generator.jpg

Technologies used - ReactJS, jsPDF, Recharts, Express, MongoDB

Skills mastered - JSX to PDF conversion, Transaction Management, Dashboards

If you are a freelancer or you want to work for a freelancing agency, an invoice generator would help you immensely in keeping track of your services and generating invoices. You can also allow user to download invoices in PDF format.

Optionally, you can use the skills that you learnt from the above project and create a dashboard that gives insights about the customers and user's monthly income.

NFT Marketplace

nft-marketplace.png

Technologies used - NextJS, GraphQL

Skills mastered - E-Commerce, Managing payments, Basics of Blockchain and Web 3.0

One of the most demanded skills for a web developer is making an e-commerce platform. Combine it with blockchain and you have an NFT Marketplace. This project would definitely make you stand apart from the crowd since it gives you great understanding about managing payments and storing digital assets which are both essential for a developer who is ready for the upcoming Web 3.0 wave.

Don't worry, you don't need to be an expert in blockchain in order to create this project. You can connect your application with APIs from the graph in order to achieve this without hassle. You can use this playlist to build it using NextJS and GraphQL.

Task Manager / Bug Tracker

task-manager.mp4

Technologies used - NextJS, React Beautiful DnD

Skills mastered - Productivity😉, time tracking, performance

This is one of those projects that will help you further in making other projects or managing your day to day tasks. It is extremely unlikely that a business doesn't use this type of application for their productivity.

Create a Task Manager/Bug Tracker with features like tags and due dates and maybe implement a Kanban board with drag and drop functionality.

Additionally, you can work on the performance of the application and try to get a perfect score in lighthouse. You can learn to do that from this video.

Conclusion

It is better to make small projects to learn new concepts but I would recommend you to make large projects because it would not only boost your understanding but it would also give you an insight on how real world technologies and applications are built.

This was my first article, so any suggestions are welcome😜

Did you find this article valuable?

Support Vignesh Raj by becoming a sponsor. Any amount is appreciated!