Build a productivity web app that's NOT a todo list

Sponsored by Clerk. Click this link so they know you heard about them from me: dub.sh/Bt5tIES
Build a productivity app that is NOT a todo list! 4 web devs built their own app based on this prompt. See what they built and watch their reactions to each other's work in the first episode of this new series!
WEB DEVS
Salma Alam-Naylor (‪@whitep4nth3r‬)
- whitep4nth3r.com/
- Live app: findsomethingtodo.netlify.app/
- Source code: github.com/whitep4nth3r/finds...
Scott Tolinski (‪@syntaxfm‬)
- tolin.ski/
- Live app: breathe.tolin.ski/
- Source code: github.com/stolinski/breathe
Eve Porcello
- www.moonhighway.com/
- Live app: balanced-citizen.vercel.app/
- Source code: github.com/moonhighway/balanc...
Jason Lengstorf
- jason.energy/links
- Live app: [jfdi.netlify.app/](jfdi.netlify.app/track)
- Source code: github.com/learnwithjason/4d1...
---------------------------------------------------------------------------------------------------------------
Learn web dev and build a great career: lwj.dev/newsletter
---------------------------------------------------------------------------------------------------------------
Chapters:
00:00 Today's prompt and meet the devs
00:31 Salma Alam-Naylor's app
02:59 Reveal and reactions to Salma's app
04:43 Scott Tolinski's app
06:40 Reveal and reactions to Scott's app
08:43 Eve Porcello's app
11:36 Reveal and reactions to Eve's app
13:21 Jason Lengstorf's app
16:45 Reveal and reactions to Jason's app
18:37 What should we build next?

[@learnwithjason]

What do you want the next prompt to be? Which devs do you want to see in future episodes? Put your ideas here!

[@soulwish]

Rich Harris, ThePrimeagen, Wes Bos 🔥

[@christopherpohlman2530]

Stock market tracker app but for things other than the stock market

[@sethdavis512]

Build a chat application or a customer relation manager. Heck - a burrito builder app would be fun :D

[@sethdavis512]

Get Ryan Florence on the show!

[@HPerrin]

How about, "build an app that lets two users collaborate in real time"? Just open ended, so the task can be whatever the dev can think of.

[@syntaxfm]

Really pumped to be apart of this with such talented people. Great work everyone! - Scott

[@KBloom18]

Scott be slangn' code

[@whitep4nth3r]

So proud to be involved in the first episode of this fun series! Now, go delegate your ToDos to other people and bask in the glow of productivity! 😎

[@nikolovlazar]

Hands down the best series I've seen 😁

[@learnwithjason]

thank you!

[@nikolovlazar]

wait, this is going to be a series, right? I hope we'll see more of this!

[@learnwithjason]

yep! I have another 7 episodes already in production 👀

[@nikolovlazar]

@@learnwithjason YES!!

[@Xe054]

I like how you all learned something new from each other even though you were all using similar tools (auth, db, a framework) in the same programming language. It kind of highlights the fact that we're always learning in this field - no need for feeling like an imposter.

[@rajeshbudhathoki7888]

Please invite Vue people as well. Kudos to you for this amazing series.

[@learnwithjason]

absolutely! I love Vue. thank you!

[@tossichugs]

Great start to a creative series I look forward to the next video ! I also appreciate that each dev did a presentation to show their process.

[@christopherpohlman2530]

This is the coolest new tech video format I’ve seen anywhere since I started learning to code. I love how much potential this idea has and how it feels like something you could even do as a group of students, new devs, or senior devs and have a great time and get something out of it.

[@chizidotdev]

This is an awesome series, different people, approaches, frameworks, etc… Really amazing ideas as well!

[@benjaminkindle1841]

This was high quality. I like how it jumped between different people explaining things, which kept things more interesting compared to a single "host" talking through code

[@LiranTal]

This was a really fun episode. Well done Jason and team!

[@20hrslater]

Omg this is so great!! Such great content for the front-end community

[@JohnDoe_69_420]

Shout out to @andrewhuang 👏 Such a great work you guys, i especially loved that you actually went into each other's code and reviewed it! Hoping to see more cool web devs to be featured in the series and build something awesome ❤

[@learnwithjason]

YES I love Andrew's series and this was heavily influenced by that (I put a whole reference/credit/history thing in the playlist description for these episodes to make sure credit is given!)

[@goingmadhere]

As an inspiring web dev this was the best video to stumble upon! So much insight and inspiration, all of this looks very fun! Best series ever.

[@ThePaulMcBride]

This is an excellent video. Well done to all involved!

[@learnwithjason]

thank you!

[@drastik67]

You should clap your hands in the intro. If you know, you know.

[@learnwithjason]

I definitely considered doing an Andrew Huang high five as a nod 😆

[@drastik67]

@@learnwithjason yeah that's what I meant! Great vid!😁

[@tharunblueflash5015]

Loved the vid, Exited for more episodes!

[@learnwithjason]

thank you! we’re already editing more - stay tuned!

[@juanmacias5922]

prompt: "web sockets, that isn't just a chat app" :D

[@learnwithjason]

I might just have something like this in the works 👀

[@juanmacias5922]

@@learnwithjasonexciting! :D

[@juanmacias5922]

@@learnwithjason btw, I'm not sure if I missed it, what was the allotted time for these projects?

[@learnwithjason]

the target was about 4 hours, but it wasn’t a hard limit. I spent about a day on mine

[@domitriusclark]

What a stellar line up!!!!!

[@codingcocoon]

It's like the Great British Bakeoff for coding! I love it.

[@codingcocoon]

Bit less judgmental maybe, that's a compliment.

[@learnwithjason]

thank you so much! I’m actually working on a different project that’s even more similar to the Bakeoff 👀 - hopefully next year

[@codingcocoon]

@@learnwithjason I would love to see something like that!

[@user-sk6ge6sh7j]

I'm a student software developer and I really enjoyed seeing how each of you worked through the process of idea creation, planning, and building, and then to watch the others test and critique each app. A wonderful idea and I hope to see more! 💯

[@galaxies_dev]

Really cool idea, heard you talk about it on a podcast and was already excited 😍

[@learnwithjason]

thanks so much!

[@casacanne5085]

Fantastic! Love the subject the rythme. I love the state of mind you need to exchange like this. ❤❤❤

[@hundop4826]

This is so great. Please keep doing it.

[@learnwithjason]

thank you so much!

[@devagr]

Fantastic video! I absolutely love this idea for a series

[@learnwithjason]

thanks so much Dev!

[@snailyluke]

I LOVE this idea!! And I learned some useful techniques - I particularly liked Salma loading data in Astro files by importing the API’s GET function! I’d never thought of that, and I’ll definitely be using it in the future

[@learnwithjason]

yeah, that was a super clever idea!

[@kieranklaassen]

Ohhh this is going to be the next big series!!!

[@zhanezar]

Wow really love this ! please do more Jason , thank you

[@cassidoo]

I love this! Prompt idea: a blog where you post from somewhere unusual

[@learnwithjason]

👀 as in the blog post comes from a weird source or the person blogging is, like, in a hot air balloon?

[@cassidoo]

@@learnwithjason wow I was thinking more like "if you click on this button on my fridge it writes a blog" but that sounds more fun

[@ArchaicCreationsbp]

This is awesome, more please!

[@learnwithjason]

coming right up! (we're editing additional episodes right now - dropping soon)

[@HPerrin]

Yo, this was great. I love this.

[@karnellschultz6446]

Great stuff

[@hovhadovah]

Would be fun to also see something similar to Blackthornprod's "n game devs take turns building a game" series, but with web dev.

[@learnwithjason]

that sounds like a great kind of chaos 😆

[@Varkoff]

Brilliant video idea, good find Jason !

[@learnwithjason]

thank you!

[@taofeeqomotolani2311]

I'm more convinced to be a software developer now😂😂

[@learnwithjason]

YES please build some fun stuff and share it with us!

[@BalaevArif]

Super idea! Impressive

[@david_chuka]

this was so much fun!

[@abigah]

This is great. That first app is brilliant. Just today I was told I need to delegate more.

[@learnwithjason]

looool it's perfect 😆

[@whitep4nth3r]

lol you’re welcome 😂

[@MaximSchoemaker]

That was fun ^^ 🎉 Salma is great :)

[@fpigeonjr]

what a cool series

[@juanmacias5922]

This is such a fun idea!

[@IainSimmons]

Great start to an awesome series! Here's another prompt idea: something real-time multiplayer, that isn't a drawing app.

[@learnwithjason]

I love this and I have good news about a future episode 👀

[@ulrich-tonmoy]

clerk is really a great auth library

[@tatsuuuuuu]

This is fantastic. I like to see the different strategies and how they could potentially complement each other. Jason are you sure you couldn't have listened to some event rather then an 800 millisecond timeout. I think it only takes a computer being much faster or slower than yours to not have the login work.

[@learnwithjason]

yeah, the approach I took ended up being too janky. in the source now is been updated to a much better approach thanks to the Clerk team

[@maysunktong7612]

OMG THIS IS GEM 💎

[@aidenberzins]

Love the ability to do auth without an entire framework!

[@hundop4826]

HA! I knew Scott would go for Svelte

[@johnchristian9901]

Would love to know how long it took each of you to build your apps broken down by time in hours to brainstorm features, building (design vs dev), and deploying (and where). Any hiccups that lengthened your times to completion? But awesome series and excited to watch more!

[@learnwithjason]

the target was to do everything in roughly 4 hours to avoid this turning into a huge time suck for everyone. I know mine took me a little longer (probably a full day, all-in)

[@whitep4nth3r]

Mine probably took a day all-in as well. I used some technology I wasn’t familiar with (in order to learn, because why not) so all the Googling and figuring things out added a bit more time to the project. Also I built a lot of this live on stream which always adds extra build time given I need to interact with the viewers! 😅

[@MrDemonshalo]

Love the idea of the series. This is like Andrew Huang´s 4 musicians 1 sample. However 1 point of feedback I have is that the prompt needs to be more specific and targetted toward one problem so that there is room for reasonable comparison between the final products. This helps the audience learn from the various approaches to _the same problem_ that is being solved. A suggestion for an episode prompt would be: "build a youtube front end client" or "build a link aggregator site like reddit" etc.

[@learnwithjason]

these are good prompt ideas, thank you!

[@joelkuijper]

Awesome!

[@friendly__drone9352]

What a cool concepts and some reall cool apps! It would be cool to see this with more people from the community. People like Lee Robinson, Rich Harris, Emma Bostian, Cassidooooooo, Theo, ThePrimeAgen. another idea is to let your audience submit/vote on idea prompts?

[@learnwithjason]

I’d love to get prompts from the community! hit me with ideas!

[@iaremarkus]

Really nice spin on the "4 DJ's, 1 Sample" idea... Idea: Remember those Masterchef challenges where 1 person would start, and the next person would have to pick up where they left off without much information about the ultimate goal? How about 1 dev STARTS a project, and then the next has to pick up from them, without any handover, but they should have to tell from whats been done so far, what the original dev's goal was with the app... Kinda like broken telephone, but with an app :)

[@learnwithjason]

this sounds FUN

[@AliAlmahdi]

I loved it. Just a suggestion, if you are trying to minimize the JS on the client side, why not use the meta tag for refresh to redirect the page instead of JS?

[@learnwithjason]

...that would have been a great idea 🙃

[@AtRiskMedia]

BRILLIANT! I so want in =D

[@learnwithjason]

let's chat about it!

[@KarimGutermann]

Great Video!

[@GratuityMedia]

Thanks for watching!

[@TheAliceQuo]

> NOT A TODO LIST *3 devs (including the original creator) make some variation of todo list.*

[@hoff_mann]

Could you tell me what Eve Porcello's folder theme is?

[@eveporcello4850]

Hi! I'm using Night Owl and Zen Mode in VSCode. I think I'm answering the question you're asking but let me know if I'm way off :)

[@rotimiadebiyi4095]

How did @salma use react and astro together

[@learnwithjason]

Astro has support for many of the popular Ui frameworks built in: docs.astro.build/en/guides/integrations-guide/react/

[@david_chuka]

build a FLAMES game app next

[@learnwithjason]

okay I might be outing myself as out of touch right now but is "FLAMES" a specific thing or does it mean, like, "very cool"? 😅

[@david_chuka]

@@learnwithjason Oh no 😄 FLAMES is a game we used to play in elementary/middle school when we were much younger. How it works is you'd fill in your name and the name of your crush and then let the system determine your relationship type. It's a simple game and I've always thought creating one with whimsical animations and nice twists to it would be fun. Here's a wikihow video explaining how the game is played: kzbin.info/www/bejne/gYbTfp2dpJmUi68

[@learnwithjason]

@@david_chuka haha nice - we just played a round of this in the studio 😆

[@david_chuka]

@@learnwithjason 😂 LOVE IT!

[@jerebenitez8542]

The 4 web devs of the Apocalypse: 🤔😁😁😠

[@learnwithjason]

loooool

[@lukor-tech]

I guess great series to come but please for the love of god.. "Not another TODO list" "It's a TODO list app". Come on.