- Видео 45
- Просмотров 173 210
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.
How Shortest uses Computer vision to QA your app using natural language
The code behind shortest: QA via natural language AI tests
Write tests in plain English and let AI handle the execution. Built on Playwright with seamless GitHub integration.
Star Inbox Zero on GitHub: github.com/elie222/inbox-zero
Join the Learn from Open Source Discord: discord.gg/RWwKa2Sn7h
Shortest: shortest.com/
GitHub: github.com/anti-work/shortest
Spell Checker demo repo: github.com/elie222/website-checker
0:00 - Intro
0:33 - Demo project
1:23 - Using Shortest
3:19 - Diving into the code
16:10 - Review of what we covered
Previous related videos:
Trigger.dev - ruclips.net/video/Ta8OI1q8Jvw/видео.htmlsi=bmcZBhElmLLCAHIg
Srcbook - ruclips.net/video/c3hy1OG77ec/видео.htmlsi=kHdAnjPNHKg9uDhX
Napkins -...
Write tests in plain English and let AI handle the execution. Built on Playwright with seamless GitHub integration.
Star Inbox Zero on GitHub: github.com/elie222/inbox-zero
Join the Learn from Open Source Discord: discord.gg/RWwKa2Sn7h
Shortest: shortest.com/
GitHub: github.com/anti-work/shortest
Spell Checker demo repo: github.com/elie222/website-checker
0:00 - Intro
0:33 - Demo project
1:23 - Using Shortest
3:19 - Diving into the code
16:10 - Review of what we covered
Previous related videos:
Trigger.dev - ruclips.net/video/Ta8OI1q8Jvw/видео.htmlsi=bmcZBhElmLLCAHIg
Srcbook - ruclips.net/video/c3hy1OG77ec/видео.htmlsi=kHdAnjPNHKg9uDhX
Napkins -...
Просмотров: 711
Видео
The secrets behind Bolt.new - the AI powered full-stack web app builder
Просмотров 4,7 тыс.Месяц назад
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 - Web...
How this open source AI builds full-stack apps in minutes
Просмотров 7 тыс.2 месяца назад
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 тыс.2 месяца назад
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?
Просмотров 6313 месяца назад
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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: skilled.co.il Twitte...
Deep dive into the code behind Trigger.dev
Просмотров 3,8 тыс.3 месяца назад
Watch part 1 on how to use Trigger here: ruclips.net/video/vZRiSPNAAM0/видео.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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top free...
Background jobs with Trigger.dev - the missing piece for your Next.js project
Просмотров 6 тыс.4 месяца назад
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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: skilled....
How I built a blog with Next.js and Sanity headless CMS
Просмотров 12 тыс.4 месяца назад
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
Просмотров 9186 месяцев назад
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,3 тыс.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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top...
How to handle Server Action errors properly in Next.js
Просмотров 1,7 тыс.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,8 тыс.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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO Give Inbox Zero a star on GitHub: github.com/elie222/inbox-zero Hire a top freelance developer, fast: skilled.co.il Twitter: elie2222 Ne...
How the open source mafia got over 100,000 GitHub stars
Просмотров 8179 месяцев назад
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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO 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:17 Nov...
The incredible open source pitch deck by Midday
Просмотров 6 тыс.9 месяцев назад
The incredible open source pitch deck by Midday
Inside the Open-Source Novu Notification Engine - Learn from Open Source
Просмотров 4,8 тыс.10 месяцев назад
Inside the Open-Source Novu Notification Engine - Learn from Open Source
Everything you need to know about Farcaster Frames
Просмотров 2,9 тыс.11 месяцев назад
Everything you need to know about Farcaster Frames
How to reduce LLM costs. And a usage tracker I built!
Просмотров 1,1 тыс.11 месяцев назад
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,4 тыс.Год назад
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
Fine-tuning GPT-3.5 Turbo in Node.js
Просмотров 2,2 тыс.Год назад
Fine-tuning GPT-3.5 Turbo in Node.js
Learn OpenAI Embeddings in Next.js from YC Idea Matcher
Просмотров 897Год назад
Learn OpenAI Embeddings in Next.js from YC Idea Matcher
did they remove the ai functionality in the GitHub repo? I dont see it.
amazing!! thank you so much
❤
I am finding this really great so far. Can we execute tests in parallel ? is there any reporting library we can use with this ?
Hmm. I think they run sequentially. But don’t remember the codebase well enough. You could hit ai rate limits if you do parallel though. Didn’t see anything about other reporting libs. You can suggest on github. Or check out the logger file in their repo.
What happen if the error that is received by the client component wasn't coming from the server function? like a connection error coming from the browser, won't it still be necessary to wrap the server function calls with try-catch in the client component?
Great video! One thing to remember is that WebContainer is not open-source and you should consider it when using it for your own projects.
Great content! Love it!
wow. i don't know this type of library is actually exist
It’s very new
Thanks you ❤. Really helpful
Glad you enjoyed it!
What would you say is your favourite thing about the genocide currently being perpetrated by Israel on the Palestinian people
It works. No more "The specific message is omitted in production builds to avoid leaking sensitive details. "
Oh nice. They fixed it? Got a link to that update?
@@elie2222 this video is the fix
@@elie2222 this video is the fix
@@elie2222 test
test
Thanks for these awesome tips
Glad it was helpful
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 😂)
Thank you for that comment. I was not sure if i was going crazy.
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: ruclips.net/p/PLoCD6QJqwk4pdLe_OnhVovqDLu0FidEOO 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!