Having fun is the best way to learn and improve your craft. Building engaging projects with the stack you choose is an exercise that builds your real-world development skills while enjoying what you’re creating. In talk at KCDC in Kansas City, I walk through how I built a simple game (a single-page app) in a day with Next.js, Prisma, and Chakra-UI, and how the techniques used in rapidly developing the game with this stack translate into real-world full-stack development techniques.

1. Mike Cavaliere
mikecavaliere.com / @mcavaliere
Fun and
games
with the full-stack
Jamstack

2. 👏🏻 thank you, !!!

3. 👋🏼 Hi, I'm Mike.
Full-Stack web/mobile
❤️
JS, React
Writes words
Gives talks
@mcavaliere
mcavaliere
mikecavaliere.com
🧑🏼‍💻

4. what is this talk
about?

5. ➡ Engineering requires lots of learning.
➡ Fun helps us learn.
💡 Therefore: have fun while learning and practicing.
work on fun things.
TL;DR:

6. 🎉 Fun 🎉 🔺 Mood
🔺 Attention
🔺 Memory
FUN helps you learn
Source: science
Learn better,
faster,
& longer

7. this talk
Source: science
How I built a simple game in a day
Real-world skills practiced in v1
How this led to v2
Real-world learnings from v2

8. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
In case you haven't heard of it...
what is was the ?
JavaScript APIs Markup
+ + = "JAM"
Term coined by

9. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
In case you haven't heard of it...
what is was the ?
Build things in JS
Compile to HTML
Fetch data w/APIs

10. In case you haven't heard of it...
what is the ?
🚀 FAST
🔎 SEO
🔐 Secure
📈 Scalable
💰 Saves $$$
💻 **Developer Experience (DX)**
Benefits:
🔗 Jamstack.org

11. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
what is the Jamstack now?
Build things in anything
Compile to HTML
Fetch data w/APIs
Spoiler: it's the same thing.
🔗 Netlify blog: The Jamstack definition evolved

12. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
Jamstack frameworks
https://jamstack.org/generators
& many more

13. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
Enter the
Full-Stack Jamstack
Frameworks that give you full control over the server-side.
Coined by fsjam.org

14. Part #1: Backstory
How this project got started.

15. Backstory
Have 8 hours investment time weekly
Demo on Friday
Wanted fun and interactive
Me: 💡 "I'm gonna build a game!"
(🙌🏼 TY, Echobind)

16. What's the simplest "game" I can build in < 1 day?

17. What's the simplest "game" I can build in < 1 day?
Everybody
logs in
Click things
Update list of things
on screen.
Highest #clicks on
top.

18. v1 Goals
Ship in <8 hours
(use investment time)
Fun & interactive
Don't spend money
Use websockets (maybe)

19. Building the MVP
"Minimum Viable Product."
aka, the simplest version I can ship.

20. The tools I started the stack
with, which are (mostly) part of
my own standard boilerplate.
🧰 Toolbox 🛠
JS Framework
Database
Data fetching
UI/layout/design
Authentication

21. v1.0! 🎉

22. Fun and Games with the Full-Stack Jamstack
Mike Cavaliere 🔗 mikecavaliere.com 🔗 @mcavaliere
building v1
Planning
Gen. scaffold / add
dependencies
GitHub Auth +
DB schema
Feature: emoji
picker
Feature: emoji
list
Tweak details Deploy

23. v1 "Architecture"
Boilerplate NextAuth
GitHub login/signup
Single-page app

24. building v1
Building the database

25. building v1
GitHub auth
Create GitHub OAuth app / API keys
Add next-auth + prisma adapter
Done - boilerplate screens

26. <EmojiPicker /> <Leaderboard /> <UserList />
building v1

27. <EmojiPicker /> <Leaderboard /> <UserList />
missive/emoji-mart
click
POST /api/emoji/create
INSERT emoji into DB
Record a single vote

28. <EmojiPicker /> <Leaderboard /> <UserList />
GET /api/emoji/list
every 200ms
query emoji, JOIN on votes
aggregate & sort by vote count
<span style={{ fontSize: 15 + e._count.votes * 5 }}>
{e.native}
</span>

29. <EmojiPicker /> <Leaderboard /> <UserList />
GET /api/users/list
every 200ms

30. V1 (MVP) Takeaways
Lessons & practiced skills.

31. UI
Page layout / styling
Data fetching
tech skills practiced
Frontend Backend
Data modeling
Database CRUD
API development
General
Type modeling (TypeScript)
Authentication
Product development (!)

32. Library proficiency
Shipping fast
"Good enough" iteration
other SkillS Improved

33. How to ship fast
Learning time accumulates
Being selective increases focus
Limit new learning
Start with tools you already know.
Don't reinvent the ☸️
Search before building.
Aim for "good enough."
Add TODOs for later.

34. making it better
Upgrades.

35. v1 areas for
improvement
UX: Emoji get tooooo big
UX: Updates slowly
UX: No animation
UX: How do we "win"?
Tech: Code is a mess; can't add
features easily

36. v2.0! 🎉

37. Let's 🤪 play!
https://emoji-battle.vercel.app
(and maybe break the app)

38. Websockets / optimistic rendering
15-second rounds w/countdown
End-of-round stats
building v2
Rearchitected
Design additions, animations

39. building v2
Animation

40. building v2
🙏Shout out to
Adding Websockets
🚀 Real-time!

41. 🙏 Shout out to

42. Note: there are different
ways to achieve this.
building v2
Rounds architecture

43. building v2
How countdown works
currentStep == 13

44. building v2
React rearchitecting
Take state out of components
Move into React contexts
<RoundProvider>
<EmojisProvider>
Drop SWR, add react-query
Add useEffectReducer()
Move websockets, effects to custom hooks
Separate side effects
👍🏼Decouple all the things.👍🏼
Unnecessary details:

45. V2 Takeaways
Lessons & practiced skills.

46. Code reuse patterns
State management
Refactoring patterns
learnings
Optimistic rendering
Layout animations
Declarative/imperative
animations
React architectural patterns
Nested contexts
Side effect management
React
UI Dev
Software architecture
Also
Microservices
Websockets / realtime
events

47. What's next?
Battling on

48. 💥 Sound effects
💻 Game mechanics
🗡 Weapons (take away votes)
📱 Mobile friendliness
⏱ Longer rounds
🤪 Random animations
? Who knows.
Suggestions welcome!
What's next?
Open for contributions
mcavaliere/emoji-battle
mcavaliere/emoji-battle-api

49. ➡ Engineering requires lots of learning.
➡ Fun helps us learn.
💡 Therefore: have fun while learning and practicing.
work on fun things.
Recap:

50. mcavaliere/emoji-battle
thank you for watching!
mikecavaliere.com
@mcavaliere
🧑🏼‍💻
Feedback
appreciated
🙏