Vibecoding 101 @ Esade

Vibecoding masterclass given at Esade on Jan 21 2026 with Esade Entrepreneurship club

1. Vibecoding
 101
 
 ESADE 
 Jan. 2026 Nicolas Grenié
 Developer Advocate
 @picsoung

2. Nicolas Grenié
 Developer Advocate
 SLNG.ai
 @picsoung

4. 40k+ icons 
 15k users
 #2 ProductHunt
 Top 5 Lovable Shipped
 2000$ of revenue

5. Other projects Contractiontrack.com
 imsometal.com
 my-bingo-card.com

6. Goal: Jump in the world of building
 
 Remove jargon

7. How does an app work?
8. It’s has to be written in code
 Different programming languages for different things

12. Client Server Applications

13. Client Server Applications

14. Client Server Applications

15. You first develop locally
 Then you deploy for the world to see

16. Application Programming Interface @picsoung @picsoung
17. @picsoung @picsoung UI
18. UI @picsoung @picsoung
19. What is going to happen? @picsoung @picsoung
20. @picsoung @picsoung
21. 👋 You have GIF? @picsoung @picsoung
22. 👍 Sure, here @picsoung @picsoung
23. That was an API 🎉 @picsoung @picsoung
24. @picsoung @picsoung APIs Are servers Talking to other servers
25. @picsoung
26. Examples @picsoung
27. @picsoung
28. @picsoung
29. @picsoung
30. Programming is like ordering at Chipotle @picsoung
31. There is an API for that! @picsoung
32. Let’s Call Some APIs @picsoung
33. https://api.imgflip.com Memes API! @picsoung
34. Memes API! @picsoung
35. Step 1: Read documentation @picsoung
36. Step 2: Call the API In the browser In the terminal Using an App
37. 🎁 Debug APIs outside of your code
38. JSON data format @picsoung { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } }
39. @picsoung response = { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
40. @picsoung response.success { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
41. @picsoung response.data { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
42. @picsoung response.data.memes { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
43. @picsoung response.data.memes[0] { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
44. @picsoung response.data.memes[0].url { "success": true, "data": { "memes": [ { "id": "61579", "name": "One Does Not Simply", "url": "https://i.imgflip.com/1bij.jpg", "width": 568, "height": 335, "box_count": 2 }, { "id": "101470", "name": "Ancient Aliens", "url": "https://i.imgflip.com/26am.jpg", "width": 500, "height": 437, "box_count": 2 } ] } } JSON data format
45. Security? @picsoung
46. @picsoung API Key oAuth
47. Advantage for API provider @picsoung Who is calling the API Charging for API usage Turn off bad users Restrict access to your own data
48. Let’s try @picsoung Boilerplate Solution
49. oAuth @picsoung
50. Oauth Scopes @picsoung
51. Webhook @picsoung
52. Webhook @picsoung Ping me when something happens
53. Vibecoding
 vs. 
 AI assisted coding?
 @picsoung

54. @picsoung
 vibecode
55. @picsoung

56. @picsoung

57. @picsoung
 Describe the app and its features

58. @picsoung
 One stop prompt
 Iterative process

59. @picsoung
 Use ChatGPT to write the PRD (Product Requirements Document)

60. @picsoung
 Or images

61. @picsoung

62. @picsoung

63. @picsoung

64. @picsoung

65. @picsoung

66. @picsoung
 look at the current UI for the prompt enhancer, It feels cramped. Help me simplify it, remove clutter.

67. @picsoung
 

68. Share documentation and code snippets
 @picsoung

69. AI is an intern
 Treat it as such
 @picsoung

70. Challenges
 @picsoung

71. SEO
 @picsoung

72. SEO
 @picsoung
 Ask to create sitemap.xml
 robots.txt
 Llms.txt
 Opengraph tags

73. Backend
 @picsoung

74. @picsoung
 100 credits 
 
 ($25 worth)
 
 Code: ESADE