MENU

Fun & Interesting

Build a custom API + app in 4 hours · Web Dev Challenge S2.E1

CodeTV (formerly Learn With Jason) 103,704 lượt xem 2 weeks ago
Video Not Working? Fix It Now

Sponsored by Postman — What could you create if you had 30 minutes to plan and 4 hours to build? Michael Liendo, Will Johnson, Abbey Perini, Alex Riviere, Brittany Ellich, and Dave Schwantes took on the Web Dev Challenge to find out.

*THE CHALLENGE*
_Build a custom API — and an app that consumes it — that makes something in your life a little more convenient._

Not every app needs to be the Next Big Thing. Sometimes you have a specific problem, challenge, or even just a pet peeve that can be solved with software. And these days, building an app that’s just for personal use is faster than ever.

For this challenge, your team needs to create a custom API that uses at least one third-party source and extends it in some way. You’ll also need to build a web app that interacts with your API. The end result should be a system that adds convenience to your life.

This could be something larger and practical, like automating something tedious you have to do over and over again (e.g. turn important incoming emails into calendar invites and/or Discord notifications), or it could be something fun and silly (e.g. use data from your wearable fitness device to calculate how many mini Snickers bars you’ve earned today).

*THE TOOLS*
Your app must use Postman as part of the build.

Postman (https://codetv.link/postman) is the most popular tool out there for working with APIs. This challenge is all about collaboration, so you’re going to be using the *mock server feature* primarily, which will allow you to design your API surface together, then divide the work of building the API itself and building the app that consumes that API with confidence that they’ll fit together perfectly once they’re both ready.

- Mock server feature: https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/

While not required, Postman _also_ has additional features and tools that might prove useful in the challenge:

- The Public API Network (https://www.postman.com/explore) — this is a *huge* collection of public APIs that you can use as part of your build
- AI Protocol (https://www.postman.com/product/ai-agent-builder/) — if you’re thinking of adding an LLM into your build, this handy tool will let you test your user input and system prompts on different models without having to wire up all the code for it first — you only need your API key

*THE DEVS*
Michael Liendo (@focusotter) https://focusotter.com/
Will Johnson https://x.com/willjohnsonio
Abbey Perini (@abbeyperini) https://abbeyperini.dev/contact
Alex Riviere (@fimion) https://alex.party
Brittany Ellich https://brittanyellich.com
Dave Schwantes (@DorkRawk) https://dinosaurseateverybody.com

*THE ADVISORS*
Sterling Chin (@TheSterlingChin) https://x.com/SilverJaw82
Jason Lengstorf (@codetv-dev) https://jason.energy/links

*THE APPS*
- Brittany and Dave's CoParent app: https://github.com/dorkrawk/coparent
- Abbey and Alex's Dinner's Ready app: https://github.com/abbeyperini/dinners-ready
- Michael and Will's HusbandGram app:

Tech used in this episode includes Nuxt, Vuetify, Vite, React, Ruby, Sinatra, react-dnd, SQLite, AWS, S3, AppSync, Claude, Eleven Labs, Twilio, and more.

*THE GEAR*
The workstations in this series are made possible through sponsorships from these wonderful companies:

- BenQ RD280U monitors: https://codetv.link/benq
- Uplift Desks: https://codetv.link/uplift
- Keychron K8 Pro keyboards: https://codetv.link/keychron
- Anglepoise desk lamps: https://codetv.link/anglepoise
- Ugmonk desk accessories: https://codetv.link/ugmonk

See the full desk setup here: https://codetv.link/uses

*THE STUDIO*
CodeTV Studio was built with generous support from Algolia. Add search to any app fast: https://codetv.link/algolia

----------------------------------------------------------------------
Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community!
https://codetv.dev/support
----------------------------------------------------------------------

Chapters:
0:00 In this episode...
0:36 Welcome + the challenge
0:59 Required tool + meet your advisor + what is Postman?
2:15 Planning phase starts
3:32 Meet Brittany and Dave + their app idea
4:53 Meet Abbey and Alex + their app idea
6:11 Meet Michael and Will + their app idea
8:56 Advisor Jason Lengstorf weighs in on the teams' plans
9:19 Advisor Sterling Chin weighs in on the teams' plans
9:43 Build phase starts
13:35 Progress check ins
19:18 Late stage check ins
21:00 App demos, powered by BenQ
21:04 Team Fueled By Coffee (Brittany and Dave) app demo
23:30 Team Everything Is Awesome (Abbey and Alex) app demo
26:43 Team Ominous Malaysian Tiger (Michael and Will) app demo
30:04 Closing thoughts

Comment