- 44
- 167 791
Learn from Open Source with Elie
Приєднався 1 жов 2006
Learn about how open source apps were built.
There are a tonne of great projects out there to learn from. Each week I pick a new one and dive deep into how it works.
The videos are mostly full-stack TypeScript web apps and AI projects.
There are a tonne of great projects out there to learn from. Each week I pick a new one and dive deep into how it works.
The videos are mostly full-stack TypeScript web apps and AI projects.
The secrets behind Bolt.new - the AI powered full-stack web app builder
The code behind Bolt.new, an open-source AI powered full-stack web app builder.
We cover WebContainer, xterm, and deep dive into the prompt behind Bolt.new.
Star Inbox Zero on GitHub: github.com/elie222/inbox-zero
Join the Learn from Open Source Discord: discord.gg/RWwKa2Sn7h
Bolt: bolt.new/
GitHub: github.com/stackblitz/bolt.new
0:00 - Intro
7:00 - LLM prompt
16:00 - Parse response
20:20 - WebContainer
26:00 - xterm
Previous related videos:
Srcbook - ua-cam.com/video/c3hy1OG77ec/v-deo.htmlsi=kHdAnjPNHKg9uDhX
Trigger.dev - ua-cam.com/video/Ta8OI1q8Jvw/v-deo.htmlsi=bmcZBhElmLLCAHIg
Napkins - ua-cam.com/video/Tme7bFV_0co/v-deo.htmlsi=fnixLfjAXCz4a904
More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html
Follow me on Twitter: elie2222
Join the Newsletter: opensource.beehiiv.com/
Hire a top freelance developer, fast: skilled.co.il
Screen Studio was used to create the video (affiliate link): screenstudio.lemonsqueezy.com?aff=1r16r
Whispr Flow is the free voice note transcription app I use (affiliate link): www.flowvoice.ai/?referral=ELIE1
#bolt #ai #appbuilder #llm #coding
We cover WebContainer, xterm, and deep dive into the prompt behind Bolt.new.
Star Inbox Zero on GitHub: github.com/elie222/inbox-zero
Join the Learn from Open Source Discord: discord.gg/RWwKa2Sn7h
Bolt: bolt.new/
GitHub: github.com/stackblitz/bolt.new
0:00 - Intro
7:00 - LLM prompt
16:00 - Parse response
20:20 - WebContainer
26:00 - xterm
Previous related videos:
Srcbook - ua-cam.com/video/c3hy1OG77ec/v-deo.htmlsi=kHdAnjPNHKg9uDhX
Trigger.dev - ua-cam.com/video/Ta8OI1q8Jvw/v-deo.htmlsi=bmcZBhElmLLCAHIg
Napkins - ua-cam.com/video/Tme7bFV_0co/v-deo.htmlsi=fnixLfjAXCz4a904
More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html
Follow me on Twitter: elie2222
Join the Newsletter: opensource.beehiiv.com/
Hire a top freelance developer, fast: skilled.co.il
Screen Studio was used to create the video (affiliate link): screenstudio.lemonsqueezy.com?aff=1r16r
Whispr Flow is the free voice note transcription app I use (affiliate link): www.flowvoice.ai/?referral=ELIE1
#bolt #ai #appbuilder #llm #coding
Переглядів: 4 555
Відео
How this open source AI builds full-stack apps in minutes
Переглядів 7 тис.Місяць тому
The code behind the Srcbook, an open-source AI powered app builder and Jupyter notebook for JavaScript/TypeScript. Star Inbox Zero on GitHub: github.com/elie222/inbox-zero The free transcription app I use: Whispr Flow: www.flowvoice.ai/?referral=ELIE1 (affiliate link) Srcbook: srcbook.com/ Srcbook GitHub: github.com/srcbookdev/srcbook 0:00 - Intro 0:33 - Notebook demo (Jupiter for TypeScript) 2...
How this INSANELY FAST Next.js app was built
Переглядів 6 тис.Місяць тому
The code behind the Next Faster project and how it achieves fast loading speeds and a 100 lighthouse score. Includes great tips to make images load super fast in your own project. Star Inbox Zero on GitHub: github.com/elie222/inbox-zero Next Faster: next-faster.vercel.app/ Next Faster GitHub: github.com/ethanniser/NextFaster 0:00 - Intro 3:25 - Packages it uses 4:23 - Project structure 7:03 - V...
Getting an open source app to #1 on Product Hunt! Can we do it?
Переглядів 6092 місяці тому
Support the Inbox Zero Product Hunt launch: www.producthunt.com/posts/inbox-zero-5 Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Twitter: elie2222 Newsletter: opensource.beehiiv.com/ Discord: discord.gg/RWwKa2Sn7h Join Trends.vc: access.trends.vc/?via=elie Try out Whisper Flow voice transcription: ref.flowvoice.ai/elie Screen Studio was used to create the video (af...
Deep dive into the code behind Napkins - Wireframe to Code app
Переглядів 2,4 тис.3 місяці тому
Napkins.dev is an open source project that turns wireframes into React/Tailwind code using AI (Llama 3.2 Vision). Try it out here: www.napkins.dev/ Napkins on GitHub: github.com/Nutlope/napkins/ More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: skilled.co.il...
Deep dive into the code behind Trigger.dev
Переглядів 3,7 тис.3 місяці тому
Watch part 1 on how to use Trigger here: ua-cam.com/video/vZRiSPNAAM0/v-deo.html Trigger.dev is an open source background jobs platform. Try it out here: tgr.dev/PF8BKgj In this video I take a deep dive into the code behind Trigger.dev. More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a to...
Background jobs with Trigger.dev - the missing piece for your Next.js project
Переглядів 6 тис.3 місяці тому
Trigger.dev is an open source background jobs platform. Try it out here: tgr.dev/PF8BKgj In this video I take you through how to use it. In the next video I'll take a deep dive into the code behind Trigger. More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: s...
How I built a blog with Next.js and Sanity headless CMS
Переглядів 10 тис.3 місяці тому
This is how I converted my Next.js MDX blog to use Sanity headless CMS. The video covers how to load data from Sanity, create a Next.js sitemap programmatically, and how to set up and use a self-hosted Sanity studio to create and edit blog posts. Video links: Inbox Zero GitHub Blog: github.com/elie222/inbox-zero/tree/main/apps/web/app/blog Inbox Zero Blog: getinboxzero.com/blog Video that helpe...
Cursor and 20 other amazing tools every developer should know
Переглядів 1 тис.5 місяців тому
Discover the 20 unbelievable tools every developer should know about! From coding to hosting, these tools will make your life as a developer so much easier. The first section is about some AI tools I use. The second section is tools to deploy projects. The third part is about database hosting platforms. The final section is an assortment of other platforms I use. 00:00 Intro 00:45 Cursor 04:27 ...
How to create a landing page that converts
Переглядів 9065 місяців тому
In this video I cover how to create a landing page. The video starts by looking at a real landing page and how to potentially improve it. And later in the video goes through other resources, different landing pages, and templates you can use to build your landing page. 0:00 Landing page roast 5:48 Julian landing page guide 9:09 Marketing examples tips 10:35 Maker Ads Guide page review 13:50 Tal...
Why build an Open Source SaaS
Переглядів 2,2 тис.6 місяців тому
Why you should consider building an open source SaaS as your next startup. I cover the pros and the cons of open source and what to look out for. For the text version of this video: www.getinboxzero.com/blog/post/why-build-an-open-source-saas More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hir...
How to handle Server Action errors properly in Next.js
Переглядів 1,6 тис.6 місяців тому
I've run into this error multiple times when using apps built with Next.js Server Actions. Server Actions are great and easy to use, but avoid this common error when using them. A discussion I opened on the Next.js repo about this issue: github.com/vercel/next.js/discussions/66999 The demo code in the video is showing Inbox Zero. Give it a star on GitHub: github.com/elie222/inbox-zero More vide...
Why I love using Loops for drip email campaigns and how to use it.
Переглядів 1,7 тис.7 місяців тому
How I use Loops.so to trigger emails for my open source Inbox Zero app. It's an incredibly simple, yet powerful platform that makes my life much easier. Loops: loops.so More videos about Open Source: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: skilled.co.il Twitter: elie...
How the open source mafia got over 100,000 GitHub stars
Переглядів 8038 місяців тому
In this video we cover 14 amazing open source projects and what I learnt from each one. The Learn from Open Source playlist where I cover many of the projects mentioned in this video in depth: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html Projects mentioned in the video: 0:00 Intro 0:23 Badget 2:23 Midday 3:05 Dub 7:03 Uninbox 8:08 Papermark 8:50 Cal 9:49 Formbriks 11:08 OpenStatus 12...
The incredible open source pitch deck by Midday
Переглядів 6 тис.8 місяців тому
In this video we cover the gorgeous pitch deck created by the Midday team. The deck is built with code and open source. It uses Next.js, Tailwind UI, and shadcn/ui to work its magic. It uses React HLS player for fast video streaming from Cloudflare, and finishes off with a Cal embed at the end. It's a beautifully crafted deck that will give you ideas on how to create your own version of it for ...
Inside the Open-Source Novu Notification Engine - Learn from Open Source
Переглядів 4,7 тис.9 місяців тому
Inside the Open-Source Novu Notification Engine - Learn from Open Source
Everything you need to know about Farcaster Frames
Переглядів 2,9 тис.10 місяців тому
Everything you need to know about Farcaster Frames
How to reduce LLM costs. And a usage tracker I built!
Переглядів 1,1 тис.10 місяців тому
How to reduce LLM costs. And a usage tracker I built!
How this Open Source #1 Product Hunt app was built
Переглядів 1,3 тис.11 місяців тому
How this Open Source #1 Product Hunt app was built
How my Open Source project hit #1 on Product Hunt!
Переглядів 3 тис.Рік тому
How my Open Source project hit #1 on Product Hunt!
Write Playwright tests with AI prompts ✨
Переглядів 5 тис.Рік тому
Write Playwright tests with AI prompts ✨
The AI calendar assistant behind Cal.ai
Переглядів 2,3 тис.Рік тому
The AI calendar assistant behind Cal.ai
The AI magic behind Open v0 ✨ - the AI that writes React Tailwind components
Переглядів 6 тис.Рік тому
The AI magic behind Open v0 ✨ - the AI that writes React Tailwind components
How to query 50 million rows in 0.5s with Tinybird and Next.js! 🤯🐥
Переглядів 8 тис.Рік тому
How to query 50 million rows in 0.5s with Tinybird and Next.js! 🤯🐥
Learn Turborepo from a real open source project
Переглядів 10 тис.Рік тому
Learn Turborepo from a real open source project
Learn OpenAI Embeddings in Next.js from YC Idea Matcher
Переглядів 885Рік тому
Learn OpenAI Embeddings in Next.js from YC Idea Matcher
Create your own AI text editor with Tiptap and Novel.sh
Переглядів 16 тис.Рік тому
Create your own AI text editor with Tiptap and Novel.sh
Can you please also so same video for nexjs itself?
Ya. That would be awesome. Would need to find the time to dig into it
In real world, who build nextjs or any project twice man?
I don’t understand the question
I do all to install srcbook and I get error package not installed at all
Hey. It’s possible srcbook works differently now. They’ve changed quite a lot since the video came out and now offer a hosted solution.
i have one question does it can do backend and database as well
Yes
loved it!
Thanks!
11:28, you can't bore us man, you're a GEM !!!
Thanks!
This is gold! Subscribed
Glad you enjoyed it!
btw i try to install this i put api dont work
Not sure :( what’s the error?
@@elie2222 I dm you on discord
This is awesome! Always wondered how bolt is doing this in the browser. Now it’s all clear! 🎉
Glad it was helpful!
This was amazing! Learnt a lot - Quick question - So if I want to customize the output I get from Bolt, all I need to do is to customize the prompt file or will I need to do something else as well?
Well it depends how much you want to customize. The easiest is to just edit the prompt you’re sending to Bolt. But if you want full control you can edit the prompt file they use. Or you can go a step further and start editing the codebase. Eg. You might decide to add another type of bolt action to the prompt. But then the parser/ui/actions would also need to be able to handle that new action type.
Another great video!
Thanks!
This was a great video! Looking forward to more deep dives like this!
Glad you enjoyed!
subscribed brada
Thanks!
well this AI can be scary in the future lol, it will evolve, hop it will not know how to back-end
This one can do backend if that wasn’t clear! I demoed frontend only but it can write NodeJS code just as well.
Sound of the baby in the background make this tutorial more legendary :D I wasted a lot of time learning this. Thanks for the great tutorial.
😂 Next error actions gave me some more issues since this tutorial btw. One annoyance is that if you time out a function it doesn't give you an error, but just returns undefined. The other one is that libraries like next-safe-action can be very helpful. I haven't used it yet, but basically use the same ideas. And maybe I mentioned that in this video (forgetting now 😂)
Hope you enjoyed today's video! What repo should I cover in next week's video?
n8n !
awesome content Elie, keep doing great. one for the midday app, wud be a banger !
Thanks for the suggestion! That's a good one! I did a video on their pitch deck half a year back, but have yet to do on their core repo, and there's good ideas to learn from in there.
Thanks for this! Was really informative
Glad it was helpful!
cool
Np
thank you so much, how can i connect with you?
You can join the Discord if you like. Link in the video description
I have encountered errors on windows. I submitted support requests in github and disocord. They responded saying windows is not supported, so I booted up a linux/debian system. Same issues. To save viewers the hassle, this project is broken and support is very lacking.
I’m sure they’ll get it fixed. They’re working on it actively. Also you can watch the video without having to use it. It’s about the ideas behind srcbook and how you could build something similar yourself.
Responded to you in Discord!
I can’t use this, I keep getting an error in my terminal. I use the OpenAi key. (Spawn npm ENOENT) error. How can I fix this?
Got the same error man!!
I’ll get one of the founders to answer. It worked for me but they’ve made updates since
Comment from founder: 1) we’ve seen this when the API key isn’t valid. Try generating a new one and try again 2) you can join our Discord (discord.gg/shDEGBSe2d) and share logs I can troubleshoot further Or you could post an issue here: github.com/srcbookdev/srcbook
@@ajamit5006 Comment from founder: 1) we’ve seen this when the API key isn’t valid. Try generating a new one and try again 2) you can join our Discord (discord.gg/shDEGBSe2d) and share logs I can troubleshoot further Or you could post an issue here: github.com/srcbookdev/srcbook
@@elie2222 its broken currently for me as well. I added open ai and anthropic keys, deleted, re-added, and the api key passes its verification check. errno: -4058, code: 'ENOENT', syscall: 'spawn npm', path: 'npm', spawnargs: [ 'install', '--include=dev'
great video Elie! Just a heads up, it looks like some of the video chapters don't match what the section is actually about
Thanks for that! I’ll fix that up!
Fixed!
Is there any tool which can convert json (it can have complex nested data) to jsonl for make it ready for fine-tune e.g "appetizers": [ { "id": 1, "name": "Beef Dumplings", "price": 10.45, "description": "6 PCS", "options": { "Dumplings": [ { "id": 1, "name": "Steamed", "price": 0 }, { "id": 2, "name": "Fried", "price": 0 } ]
This seems to do it from a quick search: codebeautify.org/json-to-jsonl-converter Any LLM will also do it well.
this was the best video on the subject for me, that's what I was thinking of implementing as well. thanks
i was reading the code on your repo and also found really interesting your observability integrations with sentry and posthog... by any means you think of producing some video around this? i think it'd be great since most tutorials doesn't seem to get to this production-level concerns
Great. I have more thoughts on it at this point. Next-safe-action is a solid option for it. Midday GitHub has an example of how that’s done if you’re interested. Wraps actions with sentry, does zod parsing, and also checks auth.
Was considering it. The things to note there: Sentry and posthog are mostly automatic. The thing you need to do manually with sentry is the server action error collection. The rest should just work automatically. And then occasionally I’ll more explicitly capture an error that comes up. The other thing I do is ignore certain errors. There’s a few ways to do it and my code here is a bit messy. There was a point I tried to really cut down my sentry errors. But feels impossible to completely clear everything. For posthog it’s all automatic. I do put it into the error logging a little to try see how certain things impact users but I haven’t even looked at the ones I put in. But will be there for me if I ever decide to look.
I totally missed this repo getting published- I am SO happy that you did a deep dive 😃
Glad you liked it!
Thank you
❤️
If you're new here be sure to check out the other videos in the playlist: ua-cam.com/play/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO.html And star Inbox Zero on GitHub: github.com/elie222/inbox-zero
all this image preloading doesn't work on mobile where you have no hover event
Good point. You could use onTouchStart, or when the a link moves into the viewport, you could preload the images. Or you could just not optimize on mobile. Pages would still load fine.
it still has prefetch when a next link comes on view
Great video! But I was wondering, what video recording software do you use to show your camera and the screen at the same?
Screen studio. There’s an affiliate link at the bottom of the description!
Exactly what I thought! Even back then, I implemented this method for all my WordPress clients. I prefetch whenever I can, except on free sites, news sites, or blogs, where it’s a bit less aggressive than for e-commerce.
Nice!
Wow.😮 Thats awesome
Glad you liked it!
thanks I was reading the code this video indeed very helpful.
Glad to hear that!
This is incredibly bad for multiple reasons. The original site is making a total of 154 requests for all of the homepage content and most of them on demand. But this bullshit implementation makes thousands of prefetch requests that it's ridiculous and it feels like a mockery. I'm sure they think we are complete fools who'll believe anything they say!
If you use next/link it defaults to prefetch. This is going a step further and loads images. If you don’t care about the extra performance then don’t do it. It’s a demo. No one telling you that you have to implement your site in the same way. But if you want extra speed this is a way to do it.
It’s not just bad for bandwidth, but for an e-commerce site, where conversion rates are usually higher than on a regular blog or freebie site, it’s acceptable. We’ve seen a big drop when our and client's sites slows down, our CTR once fell to 30%, when it’s usually around 80-90%, never dropping below 70%. So, load speed is crucial. Even after implementing these methods, not just for Next.js sites but for most of our clients, there’s been no noticeable increase in bandwidth costs. Try working as a digital marketer, and you’ll see how cheap bandwidth is compared to the impact on CTR and average session duration.
@@elie2222 no you are not getting my point. There is no argument against prefetching assets to speed up your site. But what they have done is overload everything to the max and claim speed. The original site is in production and it's that fast to interact. Nextjs can do well similarly although slightly heavier on Js. But this "demo" is a mockery of the attention to detail they've done in the original site. You might as well load the entire database in the browser and claim 0ms network latency.
my internet is so slow it loads on both of these site
🤯 nice
Looks awesome 👍 Thanks for sharing ❤
Thanks!
I think the way they prefetch on mouse enter events is a highly unnecessary optimization that will cook your server for no reason
The benefit is clear in that it avoids the image flash. Whether that’s important is up to you. The serverless endpoints aren’t going to be cooked. They’ll handle this just fine. There’s some cost to it but that could be minimal dependent on the business value driven. If it leads to an extra 5% in sales or a few dollars in revenue then it’s worth paying the extra cents to make the extra server calls. There are studies by Amazon that show that extra speed leads to increased sales.
These days, most e-commerce sites handle their assets with a CDN, so it won’t put any strain on your server.
thanks for the breakdown
Glad you enjoyed!
wow amazing engineering
Ya. Very cool how they built it
Insightful, love it
Glad you enjoyed!
This is amazing
Glad you like it!
Thank you. But why don't you recommend building a personal blog. I want to understand more.
Wdym? You can build a personal blog if you want. You can also self host on another 100 websites. Depends what your goals are. I’ve never had a self hosted blog for my own writing as you’ll see at elie.tech. I use Medium and similar sites to publish. I do self hosted for Inbox Zero because I want maximal SEO benefits for it being under my domain. And I also don’t want another monthly bill. So Sanity ended up being a great solution
Is there a way to use a global error middleware in server actions, similar to the approach used in Express or Hono?
Hey. I’ve been spending a bunch of time around this recently. You can’t apply anything to all actions unless you implement it yourself. A library that helps with this is next safe action. For getinboxzero.com/github I wrote my own wrapper function I use for every action. But I think next safe action is better
I don´t really get the point of posting a video saying "I don't know how this works, it was all automatic".
You don’t need to know every small detail to use sanity. The video covers a production blog set up in Sanity. If you want to dive into even more detail elsewhere you can.
Very helpful one, thank you, man!
Glad it was helpful! Been a good free setup for me so far. Exactly what I needed
Creating a job class with crons is far less convoluted edit: and free
Trigger is more than a replacement for cron. Background workers != cron jobs. Ask ChatGPT about the difference. And even for cron jobs Trigger does a better job depending on what you’re after. I moved over a cron job to trigger and happy I did. The cron was simpler for me at first but had a lot of issues which is why I moved that particular item to trigger and I’m happy I did.
Good luck Elie!
Thanks! Doesn’t look like we can repeat last time’s first place finish. But happy with a 5th this time around. A few hundred upvotes and good exposure is nice.
Love it - can you setup a tunnel to VPC database?
If you're self hosting I don't see why not.
@@elie2222 but not on triggers cloud ?
what is the name of application you are using for screen recording your mac and your cam? please
Screen Studio. My affiliate link: screenstudio.lemonsqueezy.com?aff=1r16r
Great vid. Thanks for sharing Elie
Thanks!