What should I build as a front end developer?
As a front-end developer, you have the freedom to choose anything to develop as per your interests. Front-end development is a wide field based on a variety of project options.
Everything related to end-user experience lies in the front end. From a simple landing page to a complex website or application you can select anything and start developing.
Most common front-end projects include landing pages, a Portfolio/Resume Website, an E-commerce store, or a complete business website or web application.
How many projects do you need for a front-end portfolio?
There is no limit to the number of projects for a front-end portfolio. You can add any number of projects as much as you want. A good number of projects shows your diversity and exposure of skills.
But try to avoid so many same types of projects because this can lead to a lack of interest of anyone who is reviewing your portfolio.
Try to add different projects to maintain the interest level you can even add small projects to your portfolio.
Generally, a good number range for projects lies between 10-20 projects in one portfolio. Last but not least try to be creative, and concise and use an attractive UX/UI that itself will showcase your designing skills.
Advanced front end projects ideas with source code
1. Job listings with filtering
This front end project is the best example to understand the DOM concept, which is quite important to develop client-side applications. This project also requires the same basic front-end skills i.e. HTML, CSS, and JavaScript.
You can add multiple features to your project, including Different types of job filtering and an option to save the list, etc.
Please refer to the following link for Job listings with filtering source code:
https://github.com/rammyblog/static-job-filter
2. Music Player using JavaScript
Music player is another good project to add to your portfolio. The basic skills required for this project are HTML, CSS, and JavaScript.
JavaScript plays a vital role in this project. HTML requires to create portions of the front display and CSS to give it a proper style and JavaScript to make it interactive and to add features to it.
Features like Track loading, Track Art, Track details, shuffle play, repeat play, Playlists, and random background color change.
Source code:
https://www.geeksforgeeks.org/create-a-music-player-using-javascript/
3. URL shortening API landing page
As its name shows, this project will help you to understand how an API works and how to retrieve data using an API. Required skills for this project are:
- HTML
- CSS
- JS
- API
This project is a good source to learn the API integration and the JavaScript libraries like VUE and React. The resulted landing page will facilitate the user with the following features:
- URL Shortening
- View the list of all shortened URLs after refreshing the browser.
- Error message on an invalid/empty input field on form submission.
- Copy the shortened link to the clipboard with a single click.
Source Code for URL Shortening API:
https://github.com/alyssie/shortly-url-shortening-api
4. REST Countries API with color theme switcher
This project is also based on API integration. This project will enhance your skills in JavaScript libraries mainly VUE and React.
the basic purpose of using REST API is to fetch the countries and display them all on the home screen.
You can use HTML and CSS to give it a user-friendly and easy-to-navigate look and feel. This project will provide the following features:
- Users will be able to view all countries from the API on the home page.
- Can Apply search filters and also can directly search by name by entering the name in the input field.
- Users can also filter the countries by region.
- By clicking on desired countries users will be able to see the details and all related information on a new page.
- Users can also get information about the border countries on the detail page of the selected country.
- The color switcher is an additional and optional feature that you can also add.
Source code:
https://github.com/benmez1n/rest-countries-api-with-color-theme-switcher
5. Portfolio website
A Portfolio website holds a special place in the career of any developer either a front-end developer, back-end developer or full-stack developer.
Therefore, you can use this as your portfolio project as well. Your design should be minimal, concise, easy to understand, and most importantly should be responsive.
Source Code for Portfolio Website:
Conclusion
There are plenty of choices related to Advanced front end projects which you can add to your portfolio just one thing that is important to keep in mind is a good and clean design, which is a vital part to maintain the interest level and as a front end developer, UX/UI is the most important part to test your level of expertise.
Related Posts:
BEST MONITOR FOR FRONT END DEVELOPER
