A few days back one of my connections on Twitter has asked me for 5 unique frontend projects ideas which would help him to outstand and get him noticed in a Job hunting event.
I already had a few in my mind, but rather than sharing those immediately, I asked him for some time and created a list of 30 such front-end projects to excel.
These projects cover an array of topics and if done properly will help you grow your frontend skills tremendously, you can do it in any framework of your choice.
But if you are moving to SDE2 or higher role, I would recommend doing this in Vanilla JavaScript as well as its frameworks as it will help you create a bigger picture during system design interviews and discuss the tradeoffs better when asked “why are you using this particular framework?”.
30 frontend projects to excel.
Note:- They are in random orders and you can pick them accordingly.
1. Dynamic form rendering.
Difficulty:- Medium.
As companies are getting more user-centric and providing the best user experience, they are dynamically generating tailored forms to gather user data. These forms are generated on various factors such as Country, target audience, preference, etc.
Task
Generate a dynamic form from a JSON scheme, with validations.
You should be focusing on
- Creating a good schema which can be modified and scaled without much problems.
- Should support native as well as third party UI libraries form elements like Bootstrap, Chakra UI, etc.
- Different inputs types should be generated an handled.
- All the fields should be validated.
2. Online code execution site
Difficulty:- Hard.
Task
Create an online judge to practice javascript similar to practice.learnersbucket.com as a SPA, As javascript is executed in the browser you don’t have to use any external library.
It doesn’t require any authentication as there is no server involved, the user can directly start practicing on the platform.
Core-Features
- Option to add Problems and its test cases.
- Handle code execution along with error.
- Handle console outputs and show them in HTML.
- SEO, Option to share the problems.
Nice to have
- Track user data on the browser itself.
- Provide analytics.
3. Blogging platform
Difficulty:- Medium.
Task
Create a blogging platform like dev.to using markdown editor, push the articles on the Github as an MD file and then use it to generate the them on your platform.
OR
You can create a clone of the Medium, you just have to focus on the frontend part, you can create mock data and pretend to be server response.
Core-Features
- Handle authentication and authorization.
- Show articles and paginate them.
- Performance, SEO (server side rendering).
Nice to have
- Recommendations and role based rights to perform actions.
4. Online resume builder
Difficulty:- Medium
Task
A simple resume builder with different templates options.
Core-features
- Different templates to choose from.
- Option to rearrange the sections.
- Edit each sections.
- Export as PDF, wordfile, etc.
5. Algorithm visualizer
Difficulty:- Hard.
Task
A platform to showcase the working of different algorithms.
Core-features
- Visualize, linked-lists, trees, graph data structures.
- Show the working of different search, sort, graph algorithms.
6. Mini Search Engine
Difficulty:- Easy.
Task
Create a mini-search engine using elastic search or azure search or any cloud-based service.
Core-features
- Layouting matters most.
- Pagination.
7. Media streaming webapp.
Difficulty:- Hard.
Task
Create a media streaming web app like Netflix or Youtube using their developers API.
Core-features
- Searching, streaming and creating playlist.
- Layouting and styling.
- Cross device support, playback handling, etc.
8. Infinite news feed.
Difficulty:- Medium.
Task
Create an infinite news feed like Facebook’s or Twitter’s using mock data which showcases different types of posts, images, video, links, textual, etc.
Core-features
- Layouting and styling.
- Lazy loading, caching, performance.
- How will you handle infinite DOM rendering and updates.
9. Crowd Sourcing Platform.
Difficulty:- Medium.
Task
Create a crowdsourcing platform to gather funds for various causes. There will be two portals,
1. To submit crowdsourcing requests.
2. User view.
Core-features
- A dashboard to raise crowdsourcing request and upload all the necessary documents and provide inputs.
- A unique link to share your request on different channels.
10. Quiz app (real time).
Difficulty:- Medium.
Task
A simple quiz app where users can create a quiz and share the link with their connections on different platforms.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- A dashboard to create different types of quizzes.
- Create a sharable link.
11. Online Market Place like Facebook marketplace.
Difficulty:- Medium.
Task
Create an online marketplace like Olx or Facebook marketplace. It will be a C2C platform where one user will create a request which will be available to other users.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- A marketplace where users can authenticate and buy and sell goods.
- A dynamic filter Option to filter products like within 5km radius, price, date added, etc.
12. An e-commerce site.
Difficulty:- Medium.
Task
An e-commerce site like Amazon or Flipkart. Your focus should be on building only the frontend part.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- List products categorically, lazy loading.
- A dynamic filter Option to filter products like within 5km radius, price, date added, etc.
13. Pinterest clone.
Difficulty:- Medium.
Task
A media sharing platform, where you can list your media, save or pin the liked media in your bucket.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- Masonary layout, how you are showing the media.
- Option to store the pins in your bucket (in-memory).
14. Design Poll Widget.
Difficulty:- Medium.
Task
A platform where you can create a poll and share the unique link on different channels.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- Unique, sharable link for each poll.
- Show the real time results when any option is selected by the user just like twitter polls.
15. Gitbook clone.
Difficulty:- Medium.
Task
Create an online textbook-like gitbooks to show documents. You can use the MD files to create it.
Core-features
- Use a markdown editor to create the different pages of the book.
- Generate a text book from by clubbing different pages.
16. Job Search website.
Difficulty:- Medium.
Task
An online platform where you can refer your friends for a job to different companies and you will be rewarded for each qualified lead (INR 100), the interview happened (INR 1k), and job selection (INR 100k).
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- A web app where users can login and create there profile, if shortlisted, they can refer their friends to different companies available.
- An admin dashboard to onbard companies.
- A dashboard for users to track their referrals.
17. Comparison platform .
Difficulty:- Medium.
Task
An online platform to perform comparison between two or more products or basically anything like workat.tech
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- Create the clone of workat.tech.
18. Anlaytics dashboard.
Difficulty:- Medium.
Task
A dynamic dashboard that shows analytics through different graphs on different sections and each section can have its own data source.
As it requires you to store data you can use any online mock API or create one on the postman.
Core-features
- Create a configurable dashboard to show analytics using any graph library like chartjs.
- Sections can be re-arranged and layout should dynamically adjusts same as Google dashboards.
19. Language translator app.
Difficulty:- Easy.
Task
A web app that translates text from one language to another using google translate API.
20. Speech to text.
Difficulty:- Easy.
Task
A web app that translates speech to text.
21. Team collaboration / messaging app like slack, teams.
Difficulty:- Medium.
Task
A clone of Teams or Slack using firebase (only messaging).
Core-features
- Authentication, personal channels.
- Messaging options between two or more people, able to create a group.
22. Calendar, meeting scheduler.
Difficulty:- Medium.
Task
Create a calendly clone, where you can schedule a meeting.
Core-features
- Users can configure their availability and share their link with others to schedule an appointment for a certain amount of time.
23. Full fledge Todo App.
Difficulty:- Medium.
Task
An advanced todo-app.
Core-features
- Users should be able to create task for different dates and times, mark them complete, delete them, create different boards.
24. Trello Board.
Difficulty:- Medium.
Task
A configurable trello board (Todo-App ++).
Core-features
- Draggable and re-arrangable.
- Different configurable boards and option to customize tasks, add color sachets and highlighting options.
25. Q&A site like StackOverflow, Quora.
Difficulty:- Medium.
Task
A simple version of StackOverflow or Quora, where users can ask questions and answer asked questions.
Core-features
- Authentication.
- News feed.
- Dashboard to create questions, tag them and publish (can be in draft state).
- Answer questions, up and downvote options, teir-1 replies.
26. Tic-Tac-Toe game with a bot.
Difficulty:- Medium.
Task
A dual-player tic-tac-toe game with an option to play with a bot.
Reference.
Tic tac toe game in javascript with bot.
27. 2048 game.
Difficulty:- Medium.
Task
A single player 2048 game.
Reference.
2048 game.
28. Chrome’s dino game.
Difficulty:- Medium.
Task
Chrome’s dino game.
Reference.
Chrome’s Dino game.
29. Collaborative text editor.
Difficulty:- Hard.
Task
A collaborative text editor like Google docs.
Core-features
- A WYSWIG editor to type.
- Shareable link to the doc with different rights.
- Two or more users can collaborate.
- How would you handle latency?.
Reference.
Conclave Case Study. -> It got them job offer from Google.
30. GitHub Issues Page.
Difficulty:- Medium.
Task
Create a clone of github issues page
Core-features
- User can raise a ticket.
- 1 level answer, option to upvote and downvote.
- Close the ticket
