Full-Stack Jamstack Fun

A walk through building the makings of Emoji Battle, a simple Jamstack game using Next.js, Prisma, NextAuth.js, Chakra-UI and other fun things.

Transcript

1. Full-Stack Jamstack Fun M I K E C A V A L I E R E Cheap Thrills w/Next.js, Prisma, SWR
2. Full-stack polyglot (Rails, PHP, JS) ❤️ React & React Native ❤️ Jamstack (Especially Next.js) About me Mike Cavaliere @mcavaliere mcavaliere
3. JavaScript + APIs + Markup 💡 Great , !
4. 🚀 FAST 🔎 SEO 🔐 Secure 📈 Scalable 💰 Saves $$$ 💻 **Developer Experience (DX)**
5. 🧰 Toolbox 🛠 JS Framework Database Data fetching UI/layout/design Authentication
6. Making Something Fun ~7 hours/wk investment time (🎉Echobind🎉) Fast; build in one day Use Jamstack Don't invent the wheel; use libs Don't spend money (free tools / hosting) Have fun doing it M Y C R I T E R I A :
7. The makings of a game
8. Let's Play! https://emoji-battle.vercel.app
9. Breakdown Login/Signup (NextAuth) Main Page (SPA)
10. schema.prisma
11. <EmojiPicker /> <Leaderboard /> <UserList />
12. <EmojiPicker /> click POST /api/emoji/create missive/emoji-mart (/pages/api/emoji/create.ts) Get user from session
13. <EmojiPicker /> click POST /api/emoji/create missive/emoji-mart INSERT emoji and vote into DB
14. <Leaderboard /> fetch every 200ms & render /pages/api/emoji/list.ts one Prisma call does everything 🎉 Get all the emoji Get vote count for each emoji Ignore votes before 15 min ago Emoji w/most votes first
15. <UserList /> Same deal for users. /pages/api/users/list.ts
16. // TODO: ... Animation (framer-motion is included in Chakra!!) Websockets - for REAL real-time Make game dynamics more fun - lots of possibilities here github.com/mcavaliere/emoji-battle I have two kids and a book to write, you might beat me to it
17. The Jamstack is great The Jamstack isn't just for websites; it's for apps This toolkit has unmatched DX === enjoyable to use Building fun things is a great way to level up your skillset Takeaways
18. Go make something fun. 💰 we're hiring 💰 echobind.workable.com CutIntoTheJamstack.com echobind.com Mike Cavaliere @mcavaliere mcavaliere 📕 My book source: https://github.com/mcavaliere/emoji-battle