├── .github └── FUNDING.yml ├── ProjectIdeasForWebDevelopers.jpg ├── README.md ├── image-search-on-local-file-system └── projects ├── Anagram-Finder.md ├── Audio-Player.md ├── Casino.md ├── Cat-Bird-App-Automated-Cat-Concierge.md ├── Digitized-Trail-Map-with-GPS.md ├── Food-Find.md ├── Grocery-Bingo-Blackout.md ├── In-Browser-Video-Clipper.md ├── Landing-Page-for-Neighbor-in-Need.md ├── Last-Thing-You-Did-Today.md ├── Live-Polling-App.md ├── Micky-Ds-Map-Navigation-Generator.md ├── Personalized-Walking-Map.md ├── Photograph-Item-Get-Dimensions.md ├── Recreating-Fairytales.md ├── Self-Portrait.md ├── Shoe-Customizer.md ├── Sushi-Tracker.md ├── animal-to-human.md ├── dating-app.md ├── image-search-on-local-file-system.md ├── market-highlights.md ├── slot-machine.md └── time-management.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: RealToughCandy 4 | patreon: realtoughcandy 5 | -------------------------------------------------------------------------------- /ProjectIdeasForWebDevelopers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RealToughCandy/project-ideas-for-web-developers/7d9454ddb09305fac83235850b67eefe24816835/ProjectIdeasForWebDevelopers.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # project-ideas-for-web-developers 2 | 3 | _The_ go-to repo for fun, cool and unique web developer projects. 4 | 5 | This project was made possible by our Github sponsors [Eddie Jaoude](https://github.com/eddiejaoude) and [Keith Ballinger](https://github.com/keithballinger). Thank you for your support! 6 | 7 | 🚀 Did you make something cool with the help of this list? We'd love to see! Hit us up on [Discord](https://discord.gg/68yMWzV). 8 | 9 | ![phone app project with countdown timer](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/ProjectIdeasForWebDevelopers.jpg) 10 | 11 | 12 | # Frontend Ideas 13 | ## [Slot Machine](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/slot-machine.md) 14 | ## [Recreating Fairytales](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Recreating-Fairytales.md) 15 | ## [Last Thing You Did Today](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Last-Thing-You-Did-Today.md) 16 | ## [Food Find](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Food-Find.md) 17 | ## [Self-Portrait](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Self-Portrait.md) 18 | ## [Shoe Customizer](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Shoe-Customizer.md) 19 | ## [Time Management App](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/time-management.md) 20 | ## [Animal to Human Years Calculator](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/animal-to-human.md) 21 | 22 | 23 | # Backend Ideas 24 | ## [Anagram Finder](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Anagram-Finder.md) 25 | ## [Image Search on a Local File System](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/image-search-on-local-file-system.md) 26 | 27 | # Full-Stack Ideas 28 | ## [A Dating Site Exclusively for Developers](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/dating-app.md) 29 | ## [Audio Player](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Audio-Player.md) 30 | ## [Casino](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Casino.md) 31 | ## [Landing Page for Neighbor in Need](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Landing-Page-for-Neighbor-in-Need.md) 32 | ## [Cat Bird App - Automated Cat Concierge](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Cat-Bird-App-Automated-Cat-Concierge.md) 33 | ## [In-Browser Video Clipper](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/In-Browser-Video-Clipper.md) 34 | ## [Live Polling App](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Live-Polling-App.md) 35 | ## [Market Highlights](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/market-highlights.md) 36 | ## [Micky D's Map Navigation Generator](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Micky-Ds-Map-Navigation-Generator.md) 37 | ## [Personalized Walking Map](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Personalized-Walking-Map.md) 38 | ## [Digitized Trail Map with GPS](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Digitized-Trail-Map-with-GPS.md) 39 | ## [Sushi Tracker](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Sushi-Tracker.md) 40 | ## [Grocery Bingo Blackout](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Grocery-Bingo-Blackout.md) 41 | ## [Photograph Item/Get Dimensions](https://github.com/RealToughCandy/project-ideas-for-web-developers/blob/master/projects/Photograph-Item-Get-Dimensions.md) 42 | 43 | 44 | -------------------------------------------------------------------------------- /image-search-on-local-file-system: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/Anagram-Finder.md: -------------------------------------------------------------------------------- 1 | Anagrams are words/phrases that are formed by rearranging the letters of other words/phrases. 2 | 3 | Here are some examples of anagrams: 4 | * dormitory = dirty room 5 | * listen = silent 6 | * anagram = nag a ram 7 | * night = thing 8 | 9 | Fun little things. 10 | 11 | Create an anagram finder. 12 | 13 | Use an endpoint that takes a string and returns an anagram. 14 | 15 | From there you can create a database that stores the results. 16 | 17 | 18 | The longer the strings, the more wildly entertaining anagrams you'll get back. 19 | -------------------------------------------------------------------------------- /projects/Audio-Player.md: -------------------------------------------------------------------------------- 1 | ## Audio Player 2 | 3 | Do you hear what I hear? Is that a themed radio with all the '80s metal you can handle? 4 | 5 | Or maybe it's your favorite local band's album, classical study mix, standup comedy, whale songs, or podcast compilation. 6 | 7 | Whatever you choose, you can customize this audio player with your pick of: 8 | * artwork - album cover, bespoke pics, genre-style images (punks, neon designs, cowboy boots & horses, etc.) 9 | * layout - location of artwork, player buttons, main page navigation 10 | * button stylings - size of buttons, images on buttons, color, etc. 11 | 12 | You can get styling inspiration from Spotify, Bandcamp, ReverbNation and others. 13 | -------------------------------------------------------------------------------- /projects/Casino.md: -------------------------------------------------------------------------------- 1 | ## Casino 2 | 3 | Roll out the big app -- an entire casino. 4 | 5 | We're talking all the floor games: 6 | * Blackjack 7 | * Craps 8 | * Baccarat 9 | * Poker 10 | * Roulette 11 | * Backgammon 12 | 13 | *The list goes on.* 14 | 15 | This app has the potential to be as massive as you want it to be, especially if you decide to create multiplayer or computer-generated opponent options. 16 | 17 | There are other visual variables like point-of-view, overhead, player by player, etc. 18 | 19 | If you want to go all out, create scene breaks. For example, if the user is on a winning streak, stop the game and pan to the suits in the security room watching the table, raising their eyebrows and talking about keeping an eye on that player. 20 | 21 | Or if they're losing miserably and choose to play a different game, cut to a scene of their avatar slamming down their cards and storming off. 22 | 23 | 24 | **Bonus:** Add the *Slot Machine* app from our frontend project ideas. 25 | -------------------------------------------------------------------------------- /projects/Cat-Bird-App-Automated-Cat-Concierge.md: -------------------------------------------------------------------------------- 1 | ## Cat Bird App - Automated Cat Concierge 2 | 3 | The Automated Cat Concierge is a take on the classic move of turning on the nature channel so your cat can watch the birds... And attack the TV screen if they're so inclined. 4 | 5 | The difference with this app is that it can be *interactive.* So if you have a spare phone or tablet laying around, set that up and let your cat go crazy with the on-screen wildlife. Touch-responsive fowl can be swiped off the screen to make way for new fluttering critters. 6 | 7 | The fun never stops! 8 | 9 | Why limit it to birds? The Automated Cat Concierge can also feature squirrels, fish, and other fidgety consumables. 10 | -------------------------------------------------------------------------------- /projects/Digitized-Trail-Map-with-GPS.md: -------------------------------------------------------------------------------- 1 | ## Digitized Trail Map with GPS 2 | 3 | For those of us that like hiking, it's nice having that little paper copy of a trail map you get at the visitor's center... if they're open... and if they have any left. 4 | 5 | And the occasional maps along the trail are helpful to get you to the next point... but that's still pretty limiting. 6 | 7 | A digitized trail map with GPS could solve these problems. You'd be able to interact with a live map pinpointing your exact location. This would minimize getting lost, wondering how far the next stopping point is, and trying to figure out how much further your final destination is. 8 | 9 | You could even get more creative and build in personal rest areas, times, or eating breaks. 10 | 11 | And if you want to get really serious, you can include things like: 12 | 13 | * altitude 14 | * difficulty level 15 | * animals indigenous to the area 16 | * current/future weather predictions in the area 17 | * historical facts 18 | 19 | And any other relevant points of interest. 20 | 21 | -------------------------------------------------------------------------------- /projects/Food-Find.md: -------------------------------------------------------------------------------- 1 | ## Food Find in CSS 2 | 3 | Here's a fun app challenge: 4 | 5 | Take a photo of some food you spot: a juicy steak with asparagus and potatoes, tofu dog on a gluten-free bun, Cinnabon classic cinnamon roll, or Wendy's $5 Biggie Bag and recreate it in CSS. 6 | 7 | If you want to get more in depth, have fun with different themes like 7-course dinners, desserts or appetizers. 8 | -------------------------------------------------------------------------------- /projects/Grocery-Bingo-Blackout.md: -------------------------------------------------------------------------------- 1 | ## Grocery Bingo Blackout 2 | 3 | Who knew shopping could be so fun? 4 | 5 | Grocery Bingo Blackout is perfect for sending your boo out on a grocery run. Let's say they need to make a midnight Wal Mart run and you need them to get: 6 | 1. toilet paper 7 | 2. sponges 8 | 3. chips 9 | 4. frozen empanadas 10 | 5. chocloate 11 | 12 | Instead of spelling it all out, make a brand-specific Bingo Blackout board! That way they can have fun while checking off each item on the list. 13 | 14 | And once they've made BINGO, they can head up to the check out and back on home. 15 | 16 | Leave nothing to the imagination as they seek out that Charmin ultra-soft 48 mega roll pack, Scotch Brite non-scratch scrub sponge, Doritos Flamin' Hot Limon family size bag, Brazi Bites chicken & cheese empanadas, and king size Reese's peanut butter cups. 17 | 18 | Fun to play with kids too. 19 | Make shopping fun for the whole family! 20 | 21 | Explore your options when looking for photos: 22 | 23 | * APIs 24 | * royalty-free photos 25 | * illustrations 26 | * personal photos 27 | 28 | And even large text instead of photos. 29 | 30 | 31 | -------------------------------------------------------------------------------- /projects/In-Browser-Video-Clipper.md: -------------------------------------------------------------------------------- 1 | ## In-Browser Video Clipper 2 | 3 | Taking a screenshot is easy with just a few button clicks. 4 | 5 | But what about grabbing just a small section of a video, a few seconds or moments? As of now, you can't cut and paste that awesomely rad or educational video clip. 6 | 7 | Imagine if you could have that 30-second clip at the ready for how to make perfect sous vide eggs, or how to properly put an anchor in drywall, or just want to show your buddy the Star Wars filibuster by Patton Oswalt. And all without having to scroll through all the other stuff? 8 | 9 | An in-browser video clipper would save space on your computer. Plus you could do other things with your time instead of aimlessly scrolling for that one piece of video you need. 10 | -------------------------------------------------------------------------------- /projects/Landing-Page-for-Neighbor-in-Need.md: -------------------------------------------------------------------------------- 1 | ## Landing Page for Neighbor in Need 2 | 3 | Charitable donations are a great way to beef up your project repertoire. And there's always someone in need: 4 | - a down-on-their-luck neighbor with a new business 5 | - your aging aunt with a monthly social bulletin 6 | - the local non-profit struggling to get going 7 | 8 | Lending a helping hand can help you improve your developer skills while bettering the lives of those who are gifted your services (who would otherwise be unable to obtain them). 9 | 10 | Plus, it always feels good to be a positive part of a solution. 11 | -------------------------------------------------------------------------------- /projects/Last-Thing-You-Did-Today.md: -------------------------------------------------------------------------------- 1 | ## Last Thing You Did Today 2 | 3 | Here's a good exercise to brush up on your frontend skills. 4 | 5 | Think of the last thing you did or saw today: 6 | * a snaking line of cars at the Taco Bell drive-thru 7 | * the cover of the 2001 box office smash hit *Swordfish* 8 | * your neighbor's sweet cherry red 1957 Chevrolet Bel Air 9 | * the dogs laying on the couch watching TV 10 | 11 | Now recreate it using only HTML and CSS. 12 | 13 | For a bigger challenge: use vanilla JavaScript and/or a JS framework. 14 | -------------------------------------------------------------------------------- /projects/Live-Polling-App.md: -------------------------------------------------------------------------------- 1 | ## A Website Where One Can Check The Polling Results Dynamically 2 | 3 | Nowadays, There is a problem of checking live opinions of people. This app/webiste can help solve that problem. There are Apps available which perform the same but, for them we actually have to pay after some sort of time. 4 | 5 | Consider a situation where you are live streaming and want an opinion on some sort of topic. This App/ WebApp can provide a good solution for that. 6 | 7 | 8 | I actually started this project and implemented the app using Flutter. If you want you can have a look here! 9 | 10 | (Project Details [Link](https://github.com/flutterninja9/Projects/tree/master/Dynamic%20Graphical%20Polling%20App)) 11 | 12 | (submitted by [The Flutter Ninja](http://instagram.com/the_flutter_ninja) 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/Micky-Ds-Map-Navigation-Generator.md: -------------------------------------------------------------------------------- 1 | ## Micky D's Map Navigation Generator 2 | 3 | Many of us are visual learners. So when it comes to directions, "take a right on Main then go 2.5 miles and take a right on Route 6 for 17 miles until you hit Charles Road and turn off onto Charles Street. Take that until you end up..." means a whole lot of nothing. 4 | 5 | But what if there was an app that gave directions based on one of the most popular landmarks today: McDonald's? 6 | As of 2019, there were over 13,000 McDonald's restaurants in the US. 7 | 8 | You could literally travel across the country using nothing but directions to the next McDonald's. 9 | And instead of long-winded directions using unfamiliar street names, the voice navigation can direct you to "turn right at the next McDonald's. In 30 miles, you'll see a McDonald's on your left. Then, turn left." 10 | 11 | We just need an app for it... 12 | 13 | 14 | You don't have use McDonald's. Use any major chain: Hy-Vee, Home Depot, Hobby Lobby, Wal-Mart, Target, or another of your choosing. 15 | -------------------------------------------------------------------------------- /projects/Personalized-Walking-Map.md: -------------------------------------------------------------------------------- 1 | ## Personalized Walking Map 2 | 3 | Whether you live in a city, suburb, or rural area, a Personalized Walking Map can come in handy. 4 | 5 | And it could be put together in many different ways: 6 | 1. Common walking routines 7 | 2. Places you haven't walked yet but want to 8 | 3. Planned by desired distance 9 | 4. Planned by accessiblity (you don't want to be walking on a highway) 10 | 5. Mapped to avoid high-crime areas or major events 11 | 6. Charted by difficulty (flat land, steep inclines, steps, etc...) 12 | 13 | And more. 14 | 15 | 16 | Personalized walking maps will encourage fitness, accessibility and safety with pedestrian routes. 17 | -------------------------------------------------------------------------------- /projects/Photograph-Item-Get-Dimensions.md: -------------------------------------------------------------------------------- 1 | ## Photograph Item/Get Dimensions 2 | 3 | Ever wonder how big something is when you're at the store, on a hike, dumpster diving, etc.? Most of us don't always carry a measuring tape, but we've usually got a smartphone handy. 4 | 5 | So what if you created an app that can get those dimensions for you! 6 | All the user would have to do is take a photograph of the item. From there, your app would take care of the rest. 7 | 8 | By assessing the item's size in relation to distance from the phone and other surroundings, it could deliver an accurate size estimate to the user. 9 | -------------------------------------------------------------------------------- /projects/Recreating-Fairytales.md: -------------------------------------------------------------------------------- 1 | ## Recreating Fairytales 2 | 3 | Fairytales can be lightly whimsical (Disney) or deeply dark and terrifying (Brothers Grimm). 4 | 5 | 6 | Using CSS and perhaps JavaScript, recreate a scene, illustration, or animation from your favorite fairytale, the way *you* envision it. 7 | 8 | If fairytales aren't your thing, recreate a scene from Fallout Boy, action movie or music video. Or anything else that you'd like to recreate better than the original. 9 | -------------------------------------------------------------------------------- /projects/Self-Portrait.md: -------------------------------------------------------------------------------- 1 | ## Self-Portrait 2 | 3 | Allow users to create a drag-and-drop self-portrait using CSS. 4 | 5 | The user can compile these images to create a realistic or distorted self-portrait. Heck, it could even be animated! 6 | 7 | And don't forget these features: 8 | * face shape 9 | * skin tone 10 | * eye color and shape 11 | * hair color and style 12 | * nose style 13 | * mouth style (serious, smiliing, frowning) 14 | * ear style 15 | * moles, tags, birthmarks, etc. 16 | 17 | And any other unique characteristics you can think of. 18 | 19 | 20 | Images can be actual photographs, cartoon, or even caricature-like in nature. 21 | 22 | Recreate them accurately, or go full-on Picasso. 23 | -------------------------------------------------------------------------------- /projects/Shoe-Customizer.md: -------------------------------------------------------------------------------- 1 | ## Shoe Customizer 2 | 3 | Maybe you like the style of Lil' Wayne Chimeras, but the flashy colors of Jeremy Scott Adidas. And you can't stay away from hi-top Converse All Stars but need something a little more sturdy like the sole of Air Jordans. 4 | 5 | Create an app that lets users combine their favorite features to customize the coolest virtual shoe that ever existed. 6 | 7 | Get detailed with colors for different shoe panels, tongue, sole, etc. 8 | 9 | And don't forget to style the laces or Velcro straps (or both). 10 | -------------------------------------------------------------------------------- /projects/Sushi-Tracker.md: -------------------------------------------------------------------------------- 1 | ## Sushi Tracker 2 | 3 | ~~Some~~ Most of us are familiar with the Domino's Pizza Tracker app. Instead of staring at the clock wondering if they're going to be ringing your door bell in 5 minutes or an hour, you have the soft, pulsating glow of assurance showing you the status of your pizza. 4 | 5 | But this would also be great for sushi! 6 | 7 | You could see: 8 | 1. what time the sushi rolls are started 9 | 2. who is making the sushi rolls 10 | 3. the quality check 11 | 4. when they're boxed up 12 | 5. when they're out for delivery 13 | 14 | For each stage you could have different music that plays to set the mood, or different pop-up facts about sushi. 15 | 16 | And if you don't like sushi, create a food tracker app for something else: Chinese food, sandwiches, Italian, or any other delicious delivery (or pick-up) option. 17 | -------------------------------------------------------------------------------- /projects/animal-to-human.md: -------------------------------------------------------------------------------- 1 | ## Animal to Human Years Calculator 2 | 3 | Most of us have heard that 1 human year = 7 dog years. 4 | 5 | But what we *haven't* heard is our age in relation to animals like: 6 | * wombats 7 | * squirrels 8 | * ostriches 9 | * pigs 10 | * kangaroos 11 | * zebras 12 | * impalas 13 | * wildabeests 14 | * polar bears 15 | 16 | Well, you get the point. 17 | 18 | Create an app where users can: 19 | 1. Select the animal they want to compare ages with 20 | 2. Input their age which then converts to the animal's age 21 | 22 | Set it up to apply to one animal, or create a list that converts the user's age to the ages of all listed animals. 23 | 24 | This app will take quite a bit of research but will provide awesome results with hours of entertainment. 25 | -------------------------------------------------------------------------------- /projects/dating-app.md: -------------------------------------------------------------------------------- 1 | ## A Dating Site Exclusively for Developers 2 | 3 | It's hard getting into the dating scene when we sit in front of computers all day. And let's be honest: a lot of people don't get what we do. Some of us either don't want to explain what we do (for the 100th time), or would rather date someone that complements our working lifestyle. 4 | 5 | So what if there was a dating site exclusively for developers? 6 | 7 | It could share similarities with OkCupid, PlentyOfFish, eHarmony, or Match. 8 | 9 | Users can input a series of developer-related romance questions: 10 | * A/S/L 11 | * stack 12 | * tech interests 13 | * interests outside of tech 14 | 15 | From there they can indicate they "like" each other with a button, connect using a messaging app, or block users they're not interested in. 16 | 17 | Or make it a bit more user-friendly with a Tinder-style layout where: 18 | * swipe one direction = Let's meet 19 | * swipe another direction = Take your database and ergonomic wireless mouse and buzz off 20 | 21 | If you want to get super extra, create a "Reason" box for rejecting a person's attempt to contact you (i. e. "The MERN stack is a big turn off for me."). 22 | 23 | 24 | (submitted by [Black Engineer via YouTube](https://www.youtube.com/post/UgyJnwws8W-ONaB7ifF4AaABCQ)) 25 | -------------------------------------------------------------------------------- /projects/image-search-on-local-file-system.md: -------------------------------------------------------------------------------- 1 | Finding images using a third party is pretty non-cerebral. A few buzz words and a couple clicks later, you've access to pretty much any picture you want. 2 | 3 | But heck, I can't even find pictures I saved to my machine two days ago. 4 | 5 | Build an app to search your local file system to pull up the client projection infographic you made for your upcoming meeting. 6 | Or the shot of the fender bender for your insurance agent. 7 | 8 | Use sample images as test subjects as you trial and error your way through this project. 9 | -------------------------------------------------------------------------------- /projects/market-highlights.md: -------------------------------------------------------------------------------- 1 | ## Market Highlights 2 | 3 | Create a customized user interface (UI) chart for stock investors. 4 | 5 | This UI should give investors the ability to see market/stock highlights based on their time specifications. 6 | 7 | For example, one click to see minute-to-minute highlights of a specific stock; one click to see daily highlights; one click to see weekly highlights, etc. 8 | 9 | Bonus: multiple UIs that simultaneously show highlights for minute-to-minute, daily, weekly, etc. 10 | 11 | submitted by [Chowdhuryabu](https://github.com/Chowdhuryabu) 12 | -------------------------------------------------------------------------------- /projects/slot-machine.md: -------------------------------------------------------------------------------- 1 | ## Slot Machine 2 | 3 | Come on, big money! 4 | 5 | Create a slot machine with movable parts, including the slot machine arm. You can start simple with 3 rows, or get more complex with multiple rows and lines. 6 | 7 | Bonus points for creating coins that fly out when the user wins. 8 | -------------------------------------------------------------------------------- /projects/time-management.md: -------------------------------------------------------------------------------- 1 | ## Time Management App 2 | 3 | Imagine an app with a built-in stopwatch where users can focus on work until the alert sounds. They can devote their complete attention to the task at hand instead of constantly checking their clock, phone, or watch. 4 | 5 | A lot of developers use the Pomodoro Technique, so there could even be a special 25-minute Pomodoro work/study session followed by a 5-minute break. Bonus for tomato timer visuals or other CSS animations throughout your app. 6 | 7 | 8 | This can even be expanded to a full-stack app where users can keep track of how many hours they have studied in the last week, month, etc. 9 | 10 | (Submitted by [Lucidreline](https://github.com/Lucidreline)) 11 | --------------------------------------------------------------------------------