DEV Community

Cover image for 5 Refreshing Project Ideas for Web Devs
Wade Zimmerman
Wade Zimmerman

Posted on • Updated on • Originally published at devmap.org

5 Refreshing Project Ideas for Web Devs

It seems like many project ideas online are stale or for beginners only. This can be problematic for developers who are looking for a quick project to put in their resume or test their skills.

The goal of this list is to provide project ideas that are half way unique, challenging, and fresh.

1. Responsive Tournament Bracket

This web app would provide a modern and user friendly experience for visualizing tournaments. Ideally, an app like this should handle high scoring matches, long team names, and team branding. Users should be able to quickly glance at the UI to see how a team navigated the tournament. Who did they beat, when was the match, and what was their original placement?

Skills

  • Sorting lists
  • Data structures
  • Dynamic Content

Courtesy of Dribble - Tournament Bracket


2. Timeline Infographic

Develop a web app which documents a series of historic events. Ideally dates are separated evenly and make use of infinite scrolling. For example, scrolling back to 1980's is quick but scrolling back to the age of the dinosaurs is tedious. Meanwhile, the interface should be engaging. The app should provide filters and make use of different gestures.

Skills

  • Gestures
  • Infinite scrolling
  • Animations
  • Interactivity

Courtesy of Dribble - Timeline


3. Virtual Business Card

Rather than handing out business cards or putting a bunch of links in your resume, develop a single page app which is the equivalent of a business card. Provide your contact information, social media links, and short description of what you do. Bonus points if you can print physical business cards which have a QR code linking to your virtual business card.

Skills

  • CSS
  • Marketing
  • Design

Courtesy of Moiz Imran


4. Hashtag Pursuit

Develop a website/bot which finds the shortest path between hashtags. For example, if you have #javascript, how many posts/profiles do you have to go through to reach #dannydevito. Bonus points if you can turn this into a game like https://www.thewikigame.com/ or make use of it some other way.

Skills

  • Algorithms
  • Big Data
  • APIs

Hashtag


5. Article Navigator

Provide a browser extension which outlines articles and shows a minimap of the page with scroll features. The idea is to always have an accessible table of contents and quickly view the page structure without scrolling. This would be useful for avoiding pages with heavy ads or little content.

Skills

  • Web Scraping
  • Browser Extensions

Article Navigator Minimap

Conclusion

Hopefully these projects seem interesting to you are help you think of fresh ideas. Please comment additional project ideas or share your creations.

Top comments (13)

Collapse
 
joshistoast profile image
Josh Corbett

Finally, an original list of ideas. Thanks!

Collapse
 
sapeol profile image
Sudeep kuchara

Looks like I'm gonna be busy this weekend

Collapse
 
swastikyadav profile image
Swastik Yadav

Finally a list of project ideas beyond the todo list app 😎

Thanks for sharing this Wade.

Collapse
 
tandiwep profile image
TandiweP

Definitely going to do the responsive tournament bracket. Thanks!

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Heey! Would love to know how to create the lines linking the blocks ><

Collapse
 
thejayhaykid profile image
Jake Hayes

That's an awesome list. I gotta try a couple of those

Collapse
 
allisongarner profile image
AllisonGarner

These ideas are actually very unique and actually worth looking into. Thanks.

Collapse
 
codermehemmed profile image
Mehemmed

MAN THIS IS A VIOLATION.ORIGINAL.IDEAS.I definetly want to do the second one.that would blast my CSS,Js skills.

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Niiice!

Would love to know how to concat elements with a line like the example for Responsive Tournament Bracket.

Collapse
 
luisferfranco profile image
Luis F. Franco

Very nice!

Collapse
 
faithhvacsteve profile image
Stephen H Veach

Does anyone here have a neat business card one page app example to show? I’m going to do this option but would like some samples from the community if possible :)

Collapse
 
moizi profile image
Moiz-I

I made my home page of my personal website to sort of be like a business card: moiz.one