Transcript for:
Applying for Remote Jobs: Key Strategies and Frameworks

all right let me set the context for the video every time I've applied for a remote job in the past few years I've followed a certain framework both to find the company and after I've found a company that I like how can I impress them so that it's almost a certain interview this video is going to be divided into two parts first part will take you through that framework literally the websites I look at to see how much funds have people raised usually the companies that I Target are series a or you know have raised more than $10 million but in this video we'll focus on you know half a mill to a few million dollars of funding early stage companies that are looking for offshore Engineers how can you find them and once you do what are the steps you need to take to make sure there is some level of compatibility there is no point of you throwing out resumés and you know feeling disappointed for getting rejected you know that is going to happen inevitably if you're just you know applying left right and Center so what can you do to really focus on a few set of companies how can you provide them value even before you apply and then once you apply usually it's a smooth Road the first part of this video will take you through this framework the second part of this video will take you through once you've chosen a company how do you aggressively start to contribute to it there should be a 15 to 20day window that you take in which you are doing a bunch of things around that company that includes either contributing to their company or providing them value in a different way before you actually interview SL apply to the company with that context let's get into the first part how do I find a company to apply to right hi everyone um this video is going to be a very long walkth through of how I would apply for a remote job today what are the things that I would keep in mind how would I contribute how would I showcase my skills and eventually maybe apply to one of many startups that exist most of this is going to be relevant if you are looking for a remote job in a startup mostly in the US UK somewhere in Europe or maybe in India but mostly us and you know outside of India let's get things off let's start with a few disclaimers um if you're a complete beginner right you you don't have a skill yet and by skill I mean mobile full stack devops anything you've just starting to code or you just have done DSA maybe you should you know take a pause and not proceed with the video um at the very least if you want to proceed with the video Don't Start spamming any of these companies that I'm going to share with you know empty resumés of yours U it will not help it will not help at all anyone who's thinking of applying after this video should strongly first do the things that are mentioned here tldr of those things is you should first contribute to that company understand that company what they're doing show them some unfair Advantage show them something extra that you bring and only then apply there's this thing called the prisoners dilemma which I don't know if you've heard of this problem but if you take two prisoners and put them in two separate Chambers and give them the option the other one out we will decrease your sentence it's a very famous problem the only way that works is if none of the prisoners speak against the other person so if you think like you want to be the person who you know start just start throwing resumes to everyone uh and applying everywhere you'll probably just hurt other people the most optimal solution here is can you reach the right side of skills and then go through some of these prerequisites disclaimers make sure you have done all of them and only then start to contribute please do not spam the Projects please do not send your resumes to everyone here please don't think like you know you'll throw it and you'll they'll just let you in it won't happen realistically it won't happen it'll just you know throw off the people for a second what is happening why I receiving so many resumes and then eventually this video will fade off so will the submissions but generally it's just great if you don't do this okay just wanted to emphasize a lot on this disclaimer um again the things to keep in mind include don't contribute to any of these projects if they are open source unless you've reached a certain level of expertise one new pattern that I'm seeing is you know people GPT the issue and then just create a poll request do not do this not going to help anyone eventually you have to interview when you do they will ask you questions if GPT is all that you're using if you have zero skills and are just copying the issue and you know pasting it on GPT getting the result and creating a poll request it'll be like it'll take them one second to understand so no point doing this U use GPD generally if you're coding I'm not saying you shouldn't use AI assistants I'm just saying you know if you don't understand anything if you think putting it on GPD getting the sponse and creating a PR is the right way to go let me tell you it isn't do not spam every company that I mentioned here I'm going to mention a lot of companies pick one in case you feel like it also do a bunch of contributions if you think you're at the right place you might get a reach out or you can reach out to the company yourself but just one you just need one company you don't need to apply to don't throw a lot of arrows just apply to one go deep in one company than trying to you know throw a lot of arrows it will not help if you think you are capable like one company and contribute to it for around 2 to 4 weeks her 2 to 4 weeks that's a long time yes her free for 2 to 4 weeks yes if you are looking for a remote job you are from India not their time zone you can't meet them in person you don't live in SF unfortunately this is the only way to show you have two advantages one is you are a cheaper engineer your salary ranges are slightly humbler than an SF engineer SF May to survive only you need a lot of money a taxi driver there makes 70k 100K so an engineer should start off with at least 100K 120k that's the usually starting off range for an engineer there you give them probably half the price um because India is a cheap country and you know even 50k is a lot of money for you that's your first unfair advantage that isn't enough though your accent little bit working on the time zone also matters but you know the biggest thing that matters is were you able to Showcase some skills do you have some proof of work to show them before you can actually start you know contributing so 2 to 4 weeks is the minimum that you need for me whenever I've gotten in through open source I've aggressively contributed for around 10 days U and you know slowly towards the 10th day mark my burnout phase was coming coming because I was doing a full-time job and contributing to the company but you know thankfully I got a reach out on the 10th day though this might happen with you as well you might feel a burnout this is why most people get filter out because number one they don't have the skills they just have the GPT enough skills J say let me fix a typo and get in in case they do have the good skills you know they don't persist for two to four weeks because they have a full-time job other commitments so you can't really work you know with so much commitment for a company that hasn't even hired you yet in case they do reach out great if they don't reach out in 4 weeks if you have you're contributing to their open source project for 4 weeks they don't reach out then maybe shoot them a DM show them their your contributions and ask do you hire from India a lot of companies don't they they're okay with the remote but only in the US so you know only make sure you look at that before you start to contribute as well it's usually given on their job board whether or not they hire outside of the US um and if that's a problem that's a problem there's nothing you can do but if you have showcased the right skills they wouldn't care if you're giving them half the tce and twice you know senior engineer Vibes there's a high probability uh that they'll be at least open to an interview if not more single message on Twitter or in email if they don't reply maybe keep contributing and you know follow up in like 15 days that's it it's a long process it's not very easy applying everywhere will not help this is the general range if you're looking for full-time roles this gives you the unfair Advantage why I don't want to 100K sure ask for 100k you know that doesn't really give you an unfair Advantage then then you you're probably really good at something that they want want which is why they'll be know willing to shed that much money otherwise they'll just get someone in SF why would they Outsource to an off sh engineer unless the amount of money that they're getting is lesser so you know I think this is a very decent range 30k gives you super good odds because it's not a lot of money for a company that has recently raised a mill or something like that for a year for an engineer and ATK is you know upper side but if you're a senior engineer worked for like four five years already probably makes sense for you to you know make this much you probably make this much in India already if you're an intern and you know 10K us is fantastic IC um maybe even lesser if you really you know if you are an intern intern don't know how to do if you are a complete beginner you know don't apply this is more for if you are in college but really good still you will only be able to get in as an intern sometimes you can get in as a full-time employee as well doesn't matter either way you know your ranges will be have have to be a little bit lesser no one's hiring an intern generally a startup doesn't need an intern they don't have the time to Mentor or you know groom an intern an intern purely means you're currently in college or very recently graduated you still have the same this but you know since you're very early you might just have to join as an intern which slightly pay you know lesser than a full-time employee cool with that context let's look at the general roles that people hire for this is just reach outs that I get usually okay you know the job roles look something like this front end engineer full stack engineer back end engineer straightforward stuff here nothing new U front end engineer I want to talk about a little bit if you want to be this right have a very good portfolio almost like a designer like designers have bean Pages have a page of yours which shows six very neat uis that you have built maybe open source them and you know have live links ready but recently someone wanted to hire a front engineer and I put it on in the coh there were like 600 submissions no one has the time to look through your code especially for a front end engineer right they want to look at the UI out there live so create a simple white page which has six seven of your projects front end heavy projects and you know showcase them that's the easiest signal for someone to at least you know filter you out a resume is not enough not even close for you know a frontend engineer role full stack engineer um m is great python is great I don't know why I lo rust here rust is decent uh I don't think go and rust are two languages that a lot of startups do use goang probably a little more than rust um but I would still call it Niche I would still say nodejs and python are the primary languages u in which most startups are writing code a lot of these startups today are AI startups so python becomes the popular stack for them generally and you know m is just easy because frontend back end both can use JavaScript or typescript hence this is a stack that I generally recommend we'll also look at a few open source projects after this and you know we'll try to see what are the best popular Stacks uh when it comes to front end backend full stack whatever AI engineer this is a fairly recent role in the last one year the AI engineer I'm talking about is not a a researcher is someone who's good with gbt apis period someone who can create agents understands what nlm does and can build on top of it um here is the job role the editor please put somewhere here that someone asked for here here is the resume they shortlisted um if you look at the resume I haven't looked at it frankly but I would assume because this guy only does like on builds thing on on top of GPD apis I would assume that's what he built so you know no real core at least for these startups that I'm talking about we'll look at a few of them very soon GPT experience is great um you know if you have created a project like chat with a PDF or you know chat with a video those are great um a lot of these companies that you'll see very soon are also building very similar things smart contract engineer or protocol engineer this one pays a lot uh but is very hard to get in um not a lot of people can do Rust let alone you know writing smart contracts in Rust so it's great even in college recently someone got a 200k offer U or 190k offer I tweeted about it somewhere here someone would post that also you know was a for a protocol engineer in solidity solidity is much easier to write than um rust so you can write smart contracts in solidity F easily uh but still much harder to do you you have to understand D5 very well in case you want to get hired here U but you'll see very soon most web3 companies are you know heavily related to uh decentralized Finance they require smart contract Engineers um designer frankly I don't know much about this I just known that a recent role that came required one front end engineer one AI engineer and one designer so you know this might be a good thing for you to pick up this channel is not the best place for it um but I do feel even with AI you know you need designers in fact with AI you know front end expertise and AI sorry uh design expertise will get become a little more critical as you know people would want to differentiate from the AI I don't know but these two roles I feel like will stay almost forever even with AI I could of course be wrong but you know I would at the very least you know if you really want to be really good merge both of them and you know if you're a good front end engineer try to become a designer vice versa um and you know have this core skill set with me U so you know I could fill in two roles in a company in my last company this was like we hired a person who exactly did this he was okay at writing code but he was able to understand ta so was able to write front end code but was a great designer so like a good skill set to have devops engineer there are like devops companies that hire too much than you know full stack companies looking for a devops engineer I unless a full stack company becomes really big they don't really need a devops engineer eventually at some point they do when they scale you know beyond let's say 10 servers but there are a lot of companies that do core devops um so you know if you want to apply to one of these companies then this is a decent stack probably you can grow this out much more uh but at the very least these Basics you need to clear before you even think of applying as a Ops engineer lastly mobile engineer this is slightly Niche if I'm being honest I haven't seen too many roles most companies not most companies I guess a decent bunch of companies have mobile apps so you know I'm sure they do hire but I haven't really seen job postings as much as for you know one of these roles so good thing to do you know a lot of companies do need this I don't have a very clear path on how to you know get a remote job as a mobile engineer that's a brief I'm sure there are more skill sets but you know these are the ones the time aware of when companies are hiring uh remotely this is what they look for before you apply before you send an email before you send them a message on Twitter do these things um some of these are difficult some of these are easy based on how the company you know shares their code if they're completely open source then you know it's fairly easy it's very obvious what you have to do you have to contribute to their open source project do you have to fix typos no do you have to GPT the answers you can use a assistants but make sure you understand the answer very well you know make sure you test the answer before committing it ideally you know use AI assistants don't just copy the issue paste in GPD copy the answer paste and create a poll request that will not lead to anything this has a very big all of these I would say have a very big prerequisite of do you know these Technologies as well because if you don't know them well no point context Gathering about that project spending so much time you will not get in eventually there will be an interview right they will ask you questions there they might sometimes they don't also but most probably they will so you know it'll be very easy for them to know if you've been Googling everything NG beating everything so firstly make sure you are good at one of these things and by good I mean great um remote jobs require you to own everything from Day Zero it's not a job where you get in and have a ramp up period you have to start from day Zero these are startups that have recently raised are moving very fast and hence require Engineers who can hit the ground running on Day Zero that means you know these contributions need to be good and only then contribute otherwise what's even the point you need to be very good at understanding business priorities understanding what exactly is pissing off the CD right now and you know is a very Manish task for example you know the designer posted okay and we need to build this build that component out fairly quickly that's one you know good thing to offload from the CTO or the senior engineer from that company so understanding business priorities you know what might be important amongst these issues is also a great skill to have and then eventually of course you have to fix it as well in case the compan is not open source then rebuild their landing page is the best one recently someone interviewed at one of the these companies uh they did not get in eventually but they built a landing page U to you know showcase to the company they I've copied over the landing page that you have I'll probably show that very soon U build a feature like they need as a library yes so another thing that you can do is you know if you don't want to apply for a front end role you can apply for a full stack role by creating something that you know will you know they will need very soon we'll try to I'll show some of these features as I look at some startups soon okay what is this feature that they might need and how can you build a library that you know you can then showcase to them hey I've built this Library very similar product would you like to use it or you know can I interview or you know somewhere along those lines but you need some unfair Advantage if they're not open source either update their front end somehow rebuild the landing page a lot of YC companies these startups have very ugly landing pages so you know that's a great first contribution to show them some proof of work if not that then you know create some library that they need we'll look at some of these very soon and build an integration on top of their tool / API um a lot of these companies are Developer tools they want other developers to use their tools so you know build some sort of an integration on top of their tool write a block post about their tool you know open source something on top of their tool things like these this is also you know a good way to show proof of work let's look at some of these examples before that where do you find these companies and you know here is a good list um now this isn't no.com these companies haven't put out job roles for that you know go to no.com this is a list of good startups that have recently raised um you can find them in one of these accelerators what is an accelerator an accelerator is a company that invests in other companies um why combinator being probably the biggest one today um and thankfully a lot of their you know companies are available publicly so you can look at what company is raising money right now what company has recently gotten into let's say by combinator how much money do they require Engineers what are they building things like these we'll look at some of these very soon so here is a small list of companies that have recently raced um for example V combinator is one accelerator if you go to y in.com companies you can look at the set of companies that were for example funded in the last y combinator batch which means the last two or 3 months as you can see there are 46 companies here in the batch before that there there were 249 companies usually there are you know 200 to 300 companies this batch is probably Midway right now not every company has been selected which is why you only see 46 companies here but you know every 6 months you'll see these 200 to 300 companies that are funded you can look at them and not start to you know contribute to them or sorry uh send them messages this is not a job board you shouldn't just go here find someone and email them okay hey give me a job or go to their career space and ask for a job um you should choose one company from here and you know go from there but this is you know one of many such accelerators that exist what's why is it good to apply to an accelerator company because number one they have recently gotten money they have recently raised and number two you know they don't have a lot of money so offshore Engineers is you know an easy if you give them half the salary uh and similar skills you know it's an easy at least interview for them at least let's try to interview this offshore engineer this is like a term in SF offshore engineer if a company doesn't have money if the founder hasn't yet raised you know you get an offshore engineer usually they get it from Latin America because you know good time zone overlap or Mexico but you know India is also up there the only problem with India is the time zone issue which you know something you have to deal with all right these are some general accelerators Texar and Y combinator are you know by General I mean they fund any kind of company they're not you know specific to a niche U but still you'll see here you know YC in the last two batches has been funding a lot of AI companies before that they doing there are a bunch of categories here we'll be going through them very soon web three companies U Alliance da is a decent accelerator here they also have their companies open so you know you can look at all the companies that have been hired uh sorry that have been funded in the last batch the batch before so on and so forth if you go to Alan and companies you'll find a bunch of you know companies that they've uh funded in the last B that's um colosium is Solana's hackathon so now they're an accelerator as well um so you know they'll also choose some companies might be a good way for you to find the companies that have again recently raised from the salana foundation and you know apply to them a16z crypto school I don't know I just know it's a crypto accelerator maybe it's good maybe it's not I don't know I don't know how many companies they fund um and lastly you know all protocols ethereum Su will have you know Grant programs RV um they just give out small grants to companies to build a very quick MVP and then sometimes there is like 100 to 500k from VCS U usually these VCS being you know the Venture arm of that foundation for example if you apply in colosium which is the Solana found foundations like Solana haathon colosium will you know fund you with some 350k or something like that for your very first startup this is a again a recent startup that has raised not a lot of money only 350k so you know an offshore engineer makes a lot of sense for them and lastly in AI there's this company called aii grants it's been it's basically a lot of really smart AI folks who now fund startups for I don't know I don't think it's for a lot of money but the money doesn't really matter here the network if you're into AI grants you'll probably raise from some someplace else um but yeah these are you know the prior grants that they've gotten or the companies that they have funded in the past few batches um these are all AI companies these are all web3 companies this is General stack but here you'll find mostly AI plus full stack companies these days let's look at the category of these companies that usually exist um you if you go through this you know you'll find a lot of these are AI companies especially from the last two batches because you know everyone's very bullish on AI um I think the trend is dying down a bit now if you say AI in SF you get like a side eye you know you're trying to just create a solution for a problem that doesn't exist very similar to you know web 3 because well there was a lot of funding so everyone was building AI products but the last two batches have been you know AI heavy the very first you know kind of company I want to talk about are GPT rappers um for example you know the company over here says we're building using ml to supercharge organic growth for financial advisers read and write research papers AO pilot for sales rep in industry for Whole Sale Distributors and you know AI modular consumer video interviews AI driven Za here all of these are using GPT to solve the problem of an existing business um there is speculation this will be big you know all traditional businesses will require some sort of AI so you'll see a lot of YC companies that are being funded are companies that have uh you know that are solving a certain problem in a specific ific Niche using AI this is one such set of these companies I would say around 20 30% of the batch YC batch is this and over here you require good experience with GPT API they'll probably be hiring an AI engineer that you know works well for GPT for example respell is trying to build an AI driven zapier um and I've met the founder I asked him what are you looking for when you hire he said you know being a researcher is something we don't want it's an anti- signal because you know they're not very good at implementation I have no idea I'm not this is not my words someone else's um and he said you know we look for good Engineers as in good people who can Facebook Engineers Google Engineers they're based out of SF they have an office I don't think they have remotely um but he said you know good Engineers who we can then eventually teach AI SL you know can quickly learn on the job that's what what usually one of these companies would require Tech on top of a boring business or an Enterprise company this is something again that YC is very bullish on okay you know they feel and this is probably true okay know Hospital Management systems are going to be big education management systems are going to be big or you know for example here insurance claims with AI might be very big because all these boring businesses require some sort of tech I've generally seen them fund you know a lot of these boring companies financial companies Hospital management companies so on and so forth they require whole stack Engineers I don't know how many of them hire um you know here very hard to find a good engineer who's good with GPT apis here you can probably get you know engineers in SF so I don't know if this is a very good Market to Target as a remote engineer could be could not be open projects this is your Mecca if I'm being honest this is where you can actually contribute and you know showcase your skills we'll probably be going through one of these companies today I'll try to contribute to one of them if you you know just gives you too much unfair Advantage if you're a good engineer you know this is where you probably want to spend your time um with the prerequisite being you're a good engineer for example here glass cube even though it's open source what is it it's a Next Generation package manager for kubernetes it's something like Helm for kubernetes I I know Helm I've used Helm I know I cannot build Helm so you know there's a very high probability okay if I open this code base I will not be able to understand it I probably need to probably WR in go because most you know Dev opsy stuff is written go I don't know go very well so is it a good idea for me to go and start contributing here no I should first spend some time learning go and then you know maybe look at the code base of hel understand how that works under the hood and then maybe dive in here uh before even touching this project the other three look like fairly full stack project next UI looks very similar to you know Shad CN so it's a pure Front End Library I can probably work there fur it looks like add Integrations on your products in hours not minutes probably looks like another zapia that's open source full stack let's look at the code very soon but again seems like something I can contribute to and lastly stacko which probably is you know yeah it's probably open source Auto an open source authentication system very similar to nexo um so yeah these three libraries look like good ones that I can contribute to because I have a certain level of expertise when it comes to U full stack or you know the month stack let's look at some D5 use cases if you look at alliance St for example you'll find most companies in Def a lot of companies get funded in web 3 but you know the ones that will perpetually keep on getting funded are companies that will make money somehow that usually involves you know defy or even wallets but I would mostly say def so you know if you look at all of these companies they're either liquidity providers dexes or you know modern kind of dexes on various chains um that that might be one good use case to you know that'll eventually keep on raise money or you know make money themselves and hence a good company to Target what is good to know here other than fullstack knowledge yeah here is where if you have Smart contract knowledge um you'll be solid in fact the 200k engineer that I'm talking about uh also we used to work at an Indian decentralized finance company and then eventually joined a us- based uh similar thing and lastly wallets U Alliance do has like a bunch of wallets wallets are a popular use case every new blockchain that comes you know will aggressively fund a wallet because they all want wallets built on top of them a lot of l1's l2s come a lot of blockchains come when they do you know they'll start to fund these wallets and hence a decent use case to build and you know a company that will be hiring a lot personally for me I've worked at wallets I've not worked at a D5 company I've worked at C5 companies but you know pretty not pretty similar challenges but I yeah I probably haven't worked at D5 probably wouldn't put myself here I worked at a wallet company I worked at a company that has has an open source code base and you know have contributed to it to get in um I haven't really worked at an I sort of worked at an Enterprise company um and I call it Enterprise because it just became really big very quickly it was worth like a billion dollars and hence it had systems very big teams so on and so forth I have never worked at a GPD raer that's a brief um next up I'm going to you know do some live application if I was applying today how would I choose a company what are these things that I would do before I dive into you know emailing the founder how would I look at their code base and show some value as I said there are various things you can do you can rebuild their landing page this is not too difficult you know but again here expertise helps you know if you're rebuilding the landing page make sure it's Prime that is what differentiates that's what will catch their iar whatever he has made we can probably just reuse it as as as it is and you know hire him versus okay let me pick up a template from somewhere and put it in show some you know that you've spent some time understanding the product and build the thing with you know some some knowledge like some you understand the product and based on that you've built the landing page and not just picked up a you know a library and a template and shoved it um effort helps you need to show some extra effort U it's as I said you can just apply to every company right but you'll not get in you can create a you can have buy off a template off of somewhere and just use that for everyone's landing page but that won't work what these companies are looking for our effort it's very easy to tell if someone's using GPT using a template or you know if someone's just applying too that's a very big red flag so do one of these two the most difficult thing is contributing to an open source project we'll probably try to do this you know um everything else if you know front end you can build someone's landing page you just have to spend time understanding the product building a library let's also go through this I don't know if you will build this but I'll share okay what are some common things you could build for this specific company and build an integration let's see if we can find some tool and you know uh then we going to try to build an integration on top of it let's get right into it I'm going to go through the VC summer 24 batch um because this is the most recent one which means you know they've recently raised money and hence so might be good to find a company here otherwise there's a list of existing companies as well the further down you go probably the Lesser probability that they'll you know hire uh because a lot of them have already have Engineers these are a lot of them are you know companies that just got built by see some times gets companies that have you know they just had an idea and hence you know they don't have Engineers uh so this is the best time to get in is you know get into one of these companies um let's kick things off by you know looking at understanding what some of these companies do um this looks like you know one of those Enterprise companies that I talked about they're solving a very big problem in a very big industry um this looks like a web 3 company this looks like a in orbit cloud computing no idea what that is but seems like a devops company UI company and this one's open source um proper AI company but you know not for coders but for a different use case um AI company I would assume again um because you know read and write research papers faster probably means you know you're using AI to read it faster um add integration yeah this is the Open Source One uh AI moderated consumer videos with sounds interesting let's look at it uh solving monolithics SL microservice designs I think this is also one open source project um Financial infrastructure for AI agents just sounds super interesting so I'm going to open it a lot of these are like super ambitious products a lot of times so you know it's just good to look at them this is the open source one uh uh making AI reliable that sounds like a devops company this was the another open source one glass cube which is you know a package manager for cuberes big Tech SL Enterprise that's a good list let's go over one all of these companies one by one let's try to understand you know what are they looking for how can you provide value before you start applying USD based Neo bank for Latin America small businesses they're probably building a Neo bank for businesses in Latin America makes sense Latin America has a lot of you know small businesses now thanks to a lot of us work being outsourced there to make sense what they're building question is do they have any open source project they do have a GitHub um which points to Nowhere let's look at their Twitter and let's see what they're doing this is in a separate language which I don't understand uh they raised 1.6 mil already um but I could not see any code SL any website that I can contribute to purely because you know not in our language I would not touch this one this is great and the landing page also looks pretty decent to begin with if I'm being honest do they have a career space they probably do but carers they don't yeah I would just leave this one uh this just looked like they were building something in crypto I don't think they are I think they're just building a Neo bank for Latin American folks um this is like a devop project let's see what they're doing is are building a constellation of very low very low earth orbit satellites never mind this is out of scope for us next UI to is probably home ground who is this guy he's a solo founder I'm assuming he's really good/ popular SL has built some big things in the past which is why he got funded or probably got funded because um you know yeah he has a lot of stars or something like that all right he has this Library called Next UI which is a turbo repo so you know home ground we can pretty much contribute to this I would assume this is like Shad CN if you go to components you can see a bunch of components they provide for example there's a model component which you know you can import into your library like this it'll look something like this if you click on it it'll open a model so yeah pretty similar to Shad CN um decent one to contribute to but wow it has a lot of issues as well so you know we'll put this on the stack this might be a good one want to contribute to let's move to the next one I'm going to keep this one on the stack because number one open source so you know you can show proof of work and number two home ground front end stuff done this a lot all right Unriddle read and write research papers fast now this one is not open source but you know is a it's probably a very simple gbt rapper un is a research assistant that helps academics quickly find Insight makes sense since launch we have grown to 8,000 800,000 users one thing I've seen and they Al also hiring um but Us San Francisco California us/ remote us so they're only hiring remotely in the US so high probability they won't hire uh but you know they are hiring at the very least question is can you show them value or you know show them value quick you don't want to spend too much time here because they're not hiring from India you know remotely outside of India outside of the us so you know very low probability you can change that decision but let's see if we can somehow contribute here if I go to the careers page again it takes me here only if I launch the app and you know a while back I imported bitcoin. PDF here which is you know just a the Bitcoin white paper and you know they let you talk to it if I if I answer if ask it a few questions it responds back with an answer very simple GPD rapper it's just chat with my AI kind chat with my PDF kind of a product but you know they've probably just gotten this into universities in the US which is how they probably these you know 800k users um so how would I contribute here and you know a few issues that I was thinking was okay what if you add collaboration to this specific project for example you know you can create your own PDF here I there one probably good thing would be to you know make this more Rich add like a rich text editor kind of a thing they don't support you don't see them supporting you know images or other things you know headings you can't even create headings here so if you create an open source Rich text editor an open source notion kind of a thing might impress the founder over here another thing that I don't think they have that might be good to have would be collaboration so if I open it in two tabs if I type in one place it doesn't automatically appear in the other place so if you can build a library that lets people do collaboration um collaboration is a hard hard problem to solve because if two people are typing at the same space you know they can conflict each other the contents on this page and the contents on this page can be very different and hence you know I don't think there are a lot of good libraries that exist that let you solve this problem it is solved using something called operational transforms and there's just one library in nodejs called ot. JS which is like very old that lets you do this so I would just build a library that lets you do operational transforms in in nodejs or python maybe probably because these guys use Python since it's an a company and then you know that would be my pitch while pitching to this user it will not be any other existing products I've built it will be very tailor made chat with the PDF is another good product to build but you know everyone does that it's a very simple project collaboration would be a good Niche to show this user care I can add this on Day Zero when I join your company and you know it also shows interest okay you were looked at the product and thought of this might be a good thing to add over here that's a brief about the second one if we get the time let me also push it on to the stack we I'll show you a little bit about how you can create a collaborative editor oh they do have Rich Text uh never mind spoke a little too soon yeah they probably use a library so yeah let that be um this was next o unle is done penora add Integrations to products in hours and not minutes open source let's open their GitHub let's see add integration catalog to your SAS project product in minutes periz an open source unified API for shipping customer facing Integrations for shipping customer facing Integrations I thought this is a zappier alternative I don't think it is front endend widgets embed card react import your existing users okay let's see Catch the connection token manage connections yeah have no idea what this is but it's an open okay that might give me some idea actually it lets you correct to connect to external Integrations which probably means you know in a in a single place you can connect to your connector users to hpot other crms probably I don't know we'll see let it's an open source project we'll push it onto the stack let's move on AI moderated consumer video interviews with AI setup and Analysis I have no idea what that means why did we pick this the future is listening to your oh customers use AI to conduct and analyze hundreds of in-depth video interviews okay providing unparalleled consumer insights H I can tell you these guys are too early because booking a demo is taking to a call with one of the co-founders um but at the same time I'm trying to look at is there something I can show these guys their front end isn't great if I'm being honest that might be a decent thing to yeah I would create a better much better landing page for these guys harat show me a better landing page stripe is a decent one you know build something like this for you know these guys or Tesla is a great one or you know Apple whatever we have to make apple like front end yes we have to impress them maybe not Tesla maybe Apple but you get the idea that's what I would do here um and you know the specific company they are early but you know looking at the founders I would assume they're you know AI heavy so you know they might be looking down upon a full stack in there as such these are just initial thoughts that are coming to my mind previously co-founder at datac camp.com what is that looks like an N Tech yeah McKenzie Tech and kite ofing yeah I would just build a front end and shoot my shot here solving monolith SL mic service dilemma open source python tool to help solve microservice monolith Dilma we're doing this by enabling teams to build and scale a modular monolith our first is called Tac it lets user create module boundaries automatically Tech is currently live with a number of companies over 32k download it's in Python so I would not contribute to this and it's also a de tool it would be much harder to contribute to than a company which you know means a lot of not a lot of people will be able to contribute to it so you should um but so yeah let's keep this on the stack but I personally wouldn't contribute to it because of you know I will have to gather context as well and understand python syntax which you know don't have too much experience in let's see M py yeah God is done Elevate Financial infrastructure for AI agents this I was just generally curious about what are they building um we make it easy for agents to buy anything of the internet ooh handle the purchasing API agents are poised to elevate the way we shop I don't know about that I don't know if AI agents are poised not super bullish on the problem statement but let's see let's see their front end yeah the decentish front end but again not much I can do no product yet they do have a dock space I guess but yeah yeah I would do much here if I'm being honest um stack o again open source project which has a very good front end page this is like you know the epto of a front end page this is what you want to build if you're building for you know a YC startup um let's see they're Au right integrate in minutes no for front end and back end I would assume they have a lot of you know language level Integrations they have to do they don't have a lot of stars right now which assume which I assume that means that very early open source clerk fireus Al alternative sounds great it is a turbo repo sounds great this is home ground and do they have you know different libraries yeah so they have a python SDK they will most probably require a goang SDK a nodejs SDK a rust SDK every language SDK so you know great thing to build might be that um oh this is also mty only so there's yeah very early I would build the python SD can you know just create a pull request here her how can I can I use GPD herir no don't use GPT whatever language you're comfortable in let's say comfortable in nodejs you know look at clerk GitHub get clerk probably has you know a nodejs official JavaScript repository for Clerk or let's look at how do they open source clients um just like they have a clerk iOS right you need to build a whatever the company's name was stack iOS and similarly they just like they have a goang SDK you need to build something very similar for these guys in golang what does SDK mean what where do you use authentication you have a front end in a back end right um You have a front end in let's say react and you have a back end and this can be in multiple languages it can be in goang it can be in Rust and you know whenever you do authentication which means whenever you sign in herir gmail.com and some password this username password goes somewhere somehow cookie gets generated and you know this is very hard to solve and hence companies like not very hard to solve like generally just people just Outsource this to a company like ozero ozero is very expensive which is why you know it makes sense to have an open source alternate um like this but as you can see very early so you can start contributing to you know sdks that's what I would do let's keep this open as well and oh sorry I close two of them what else did we have making AI reliable I just wanted to see if this looks open source use LMS to valuate the output of other llms let this lets AI Engineers test different proms models and is an experimentation platform that helps team build reliable AI products let's look at their GitHub H pretty activist GitHub I would say um bug in the code stack I don't know what that is a new bench for measuring lm's capabilities to detect bug in a large code base similar to needle in the Hast stack Benchmark the bug in the h this is how I would learn any new technology dude if I have to learn about ai go into a YC company that's open source and you know start to look at the repositories keep digging in deeper I won't too much for this video but you know this is how if you're interested in a technology this is how you learn from first principle I don't understand the code Learn Python first right look at a smaller repository I don't understand what is a notebook understand what are jobit notebooks fairly common thing to do if you're an AI engineer and you know go from there very very interesting way to learn any technology same thing I would do here all right lastly glass cube is another open source project but it's a devops heavy project so I would contribute to this if I have access uh not access experience in golang because most of their code is going to be in golang I would assume let's see CMD no that's just the config hacks internal package there you go yeah if you look at all the code here it's going to be goang plus you need to know kubernetes if you want to build a package manager on top of kubernetes um there aren't a lot of people in the world who can you know even think of contributing to this project if there are 100 people who want to get into full stack or no full stack maybe 10 maybe 20 no devops maybe 10 no kubernetes maybe three no package managers and maybe one can contribute to it so the competition here will be really less um but at the same time the competition is less because it's a hard thing to do you have to first learn devops then learn kubernetes then learn package managers and then build a package manager of your own so you know yeah pros and cons in contributing to a a repository like this um I would assume though they've raised a lot of money because you know sounds like a pretty cool problem to pursue with that I've basically broken down into a few open source projects let's look at those projects one by one and see where we would like to spend our energy today so there are three projects that we've broken this down into I'm going to to pick one and contribute to it I would assume the easiest one to contribute here is next UI because number one it has a lot of issues number two it's a pure front end project does not have any backend integration so I'll probably go through this let's look at what all does this organization have has a bunch of you know CIS and other things you can contribute to this might be one but I don't even understand the product yet so let me first go through the product and then if I understand anything I'll contribute here and lastly stacko yeah one good video and it itself should be how can you create you know let's say a node SDA for these guys and then that can just be extended to goang rust and other languages um so I'll do one of these three let me spend some time going through their code base and then let's decide which one we're going to contribute to next all right believe it or not it took me around 3 hours 4 hours probably to set both of these projects locally and try to find an issue fix the issue test the issue and create a pull request the final PR that I've made is in stack uh but you know I would urge you to pick up some issues in case you feel like it you know in p as well this has a bunch of nice open issues the ones that are not tagged with core team specifically the ones that have connector you know tag Associated might be something the team that actually needs help with um a product like Panora requires a lot of external Integrations and you know the number of Integrations that they can do is you know pretty much not infinite but like a lot of them so as you can see they already have a bunch of these open and this is a great pain point to take away from the CTO is add one or many of these Integrations that can almost you know not almost guarantee okay if you solve like seven issues over here or you know create seven Integrations they'll just hire you as an engineer who just solves them for you uh because there will be a lot of these Integrations which would require a lot of grunt work um of you know looking at the API of for example Rippling or deal and figuring out you know how to connect this system with that and hence you know it's a good thing for the CTO to delegate the other repository that you know I set up locally was stack and this is just o o but open source um a slightly easier PR to setup the way to set up Panora is a little weird right now if you follow the steps it will not work you will most probably have to do a bunch of extra things specifically you'll have to migrate the database yourself this is something that took me almost an hour um but you know if you're setting this up it'll be slightly harder if you're setting this up it'll be slightly easier let's go through the issue that I finally solved this issue has been opened for around 2 weeks it says show and edit serverclient metadata in the dashboard in the users table when clicking on the three dots and the edit there should be a field for client metadata and server metadata that should accept Json values now this might feel like a jarring issue but if you set up the project locally it's actually fairly simple if if you look at the final pull request that I made this one right here it has you know like some 60 lines of code so not too much code that you had to write let's look at what the issue was and how I fixed this Step Zero before diving into anything is setting the project up locally and thankfully for stack that's not too hard if I scroll down a bit if you reach this setup section over here it gives you a few commands the first set of commands to start the database locally or you know start the external dependencies these guys used postgress and the second set of commands to actually start the project locally so let's clone the project locally open it in Visual Studio code and from scratch try to you know from first principles understand how I set the project up there were some issues that came how I fix those issues and go from there Step One cloning the repository step two opening the repository in Visual Studio code now that I have the project open in Visual Studio code I can start to you know bring up the dependencies which includes things like postgress for these guys and in bucket what is in bucket it just lets you test email applications so if you ever want to you know send out emails in a Dev environment you can use in bucket as you can see it says disposable web mail and the second thing is there primary database which is postgress how do you start this Docker compose file if you don't know what docker composers you should watch a video and if you do the way to start a specific Docker compos file is this Command right here so that's Docker Das compose or Docker compose - F the file and then up if you run this command it should start both in bucket as well as postest for you once that happens is when you know you can move on to the rest of the steps they haven't containerized the whole application which is fine really depends on them they give decent steps to you know start the project locally though you will need pnpm don't try it with npm it will fail you can install pnpm by installing by running npm install DG pnpm that should install pnpm and then you can use all these commands right here the second command is to build the project which doesn't work here why package.json there is a build command here missing script I'm in the wrong folder that's my bad pnpm install I also installed in the wrong folder I don't know maybe I did I will reinstall and once that is done I will do a pnpm run build seems to be working now the back end build is failing which is fine it failed for me as well I try to fix it a little bit then I just moved on since we're running it locally even if the build fails it's fine pnpm run code gen pnpm run Prisma DB push your database is now in sync with your Prisma schema this is for migrating your database this is for putting some tables in your database harat where are the tables you can go to schema. Prisma and you will see all the tables that exist that includes things like project config project domain so on and so forth all of these tables we have put in our postgress database how do you know you can confirm by you know if you know Prisma then this should be fairly straightforward you can go to the folder which has this Prisma folder so apps SLB backend and then run npx Prisma studio and this should open your like a database visualizer and you can see all these tables now exist in my database let's go back to the root folder what is the next command pnpm runev this should start all the apps that you have for this project there is a back end and there is a front end there are N2 end tests which feel free to ignore backend and front end are the two repositories SL two applications that you need to start locally backend is also a nextjs application I would assume let's see it is indeed and so is the front end if you go to apps SL dasboard SL package.json you will see when this is a nexts application her how is the backend a nextjs application you can have a back end only nextjs app if you only have you know API routes for example API slv1 route. TS it also isn't too much it's like a very small um backend maybe it's not even used maybe they've just moved all the back end to dashboard I don't know let's see seems to be working if you go to dashboard SL package.json you will see it starts everything on Port 8101 if you look at the dev command here starts the nexts server on Port 8101 so what do you have to do next you have to go to Local Host colon 8101 once you do wait for it you will see a an error that comes now this is where most people would just leave rightfully so it's very hard to debug this it took me less than 1 minute but if you have not done Prisma in the past if you don't understand the concept of seeding you know you will and also you don't have some some nice first principles thinking there's a good possibility you're stuck here and you're like I don't know what is happening the way I fixed this error was I realized here it says the secret server key is not valid for the project undefined it seems like I need to create a project what is a project this is user authentication right if you or this is from last time but if I open this guy right here stack this is like an application that lets you do user authentication if I sign up on this website eventually whatever I reach after signing up let me quickly do that actually let's quickly sign up and here as you can notice as soon as I sign up on their production website it asks me to create a new project so maybe I need to just you know somehow reach this page but I'm not able to maybe I need to seed some data in what does seeding mean it means I need to put some temporary data in Prisma the orm that they are using has this concept of seeding which basically means you know putting in some dummy data and you usually put it in a seed. TS file so that is how you know from first principles I reached I probably need to seed the data I reached a specific file and then I was like let's seed this specific you know Prisma database or postgress database using Prisma what does this file do it defines a function called seed which you know does a Prisma do project. upsert what does upsert mean create or update which Probably sounds right right they're saying project doesn't exist the project is undefined and this these guys are creating a project so I probably need to seed the database how can you do that just go to the place where this seed dots file exists it exists in the backend module so apps SL backend and then npx I totally I always forget the command to seed npx Prisma DB seed if you run nvx Prisma DB seed it should IDE migrate your database but what does it say again it says URL could not found I could not find error validating data source DB you must provide a non-empty URL it is saying somewhere you are using this database URL and I cannot find this environment variable so you can either Define a EnV file or just replace this with you know your postgress credentials how do I know my postgress credentials how did we start postgress locally we started postgress locally by going through this dependencies do compost. yaml right what was the command that I ran here I ran Docker compose DF dependencies doom. yaml this is what starts my postgress and what is the username I've written here postgress that's the username I'll put here what is the password I've used here it's password that is the password I'll use here what is the name of the database I'm using here stack frame that is the database name I'll use here the same change I will make in the other place as well now let's try that one more time let's do a oh sorry I stop the dependencies let me restart and here let me run a um the seed command again and now it again says the same issue it says yeah this is not found EnV databas you not found this might be another big checkpoint I made this change this code though doesn't even exist in my code base anymore why is it still giving me the same error and the answer is this code existed in this seed. TS file that was using this code is a typescript file typescript file doesn't eventually execute a Javascript file does so I probably need to rebuild the Javascript file from this typescript file so what can you do you can go to the root folder run npm run build or pnpm run build and then seed the database again now if I try to run the seed command it runs in one go it says seeding database internal project created seeding complete if I now do npx Prisma studio if I now open the a visualizer for my you know database you will see a new project has been created called internal hopefully that fixes this error that I was seeing let's restart the front end let's redo a Global if I go back to the root folder let's redo a npm runev that should hopefully start both the front end and the back end pnpm rev let's go to the front end again and as you can see I can now see the front end for this specific project set up locally this front end is exactly the same as their deployed website I if you remember a few minutes ago reach the same front end on app. stack.com sorry stack.com the same thing I was able to start locally now I had to go through a bunch of Hoops number one had to start all the dependencies number two had to migrate the database number three had to seed the database and then I've at least reached the sign up page let's quickly try to sign up now this is the signin page they send you to on by default if you try signing in I don't have a user so signing will probably fail so what should you do again from first principles I just replace / signin by/ signup I could also go to the code and figure out what is the route for signing up and then signed up as a fresh user so if I write her@ gmail.com and some password here if I click on sign up it asks me to create a new project isn't this page exactly the same as this production page to create a project yes s does that mean we've been able to set up the project locally probably let's create a fresh project call it test and you know what is this website it's an auo comparator it lets you do authentication so it's asking me what all do you want to support do you want to support login with Google GitHub email so on and so forth let's say these are the three things that we need to support I click on create project and that should you know as you can see start a project and it also tells me this is how you can add authentication to your app what does stack Au let you do if I have a website let's say algo 100ex steps.com it lets me add user authentication here it's a comparator to o o and what does o o let you do or you know there are a bunch of popular ones today it lets you know anyone do authentication easily why Yu can do in-house authentication you can but authentication is hard which is why companies you know Outsource authentication to companies like AO AO is really expensive so stacko is a comparator I have created my first project over here and it gives me the steps two now integrate stacko with my own nextjs Library I of course don't have to do this for solving this issue but if I was using next o or stack o as a user is when you know I would go through these steps and you know copy over the API keys and bring them into my project this is the final dashboard if I do bring this to my project and users sign up I can track those users over here question is what was the issue that we were solving if you remember it said in the users table when clicking on the three dots and then edit there should be fields for client metadata and server metadata that should accept Json values which means I firstly need a few users here after which I can probably see three dots click on edit and see some sort of a popup I need to add users to this users table let's see how you can do that we already have a database right remember let me start this in a third terminal if I go to visual studio code open a third terminal go go to apps SL dashboard and run npx Prisma Studio you will see it shows me a bunch of you know tables over here question is which table leads to a user entry over here which table should I put a dummy data in so that I can see a user over here what did the issue say the issue said K we need to add CL client metadata and server metadata as the fields to probably the table that shows an entry here has client metadata as one of its attributes let's go to the schema of our whole application let's go to schema. Prisma and here if I search for client metadata I see it exists in a table called project user so this is as the name suggests also a Project's user this is my project called test and its user is where I want want to add a dummy entry so I probably just need to go to the Project's users table and add an entry here there already is a dummy entry I need to add one more record question is what is my project ID it's probably this thing right here right this uu ID over here is probably my use uh project ID how can I confirm in another tab here I can just open projects and there is an internal project that was seeded by default and this is the IDE of my project that I just created called test so I can take this project ID put that as the project ID have the project user ID be a default uu ID created at be the default time primary email be something like you know whatever random gmail.com I can just let the other fields be or if I want you know if I let's say want to put in the password I can just copy the password from this guy and paste it here if I click on Save and refresh now you will see one entry for random gmail.com appears over here that is how I seeded the data put some random data in the database so that it appears over here why am I doing this so that I can fix this issue the issue states in the users table when clicking on the three dots let's click on the three dots and clicking on the edit button the model that pops up there should be fields for client metadata and server metadata this model let's say you edit the user's name email and signed up at if I change this email to random [email protected] add a display name and click on save you will see the final database if I refresh the email over here changed to random [email protected] what do we want we want yeah this server metadata and client metadata these two Fields should also you know come from in this edit model the user should be able to add these fields as well how can I do that let's look at where the code for edit user exists this model exists and build up from there all right what's the best way for me to reach the code for this model if I open Visual Studio code I can just search for edit user I'm able to reach the user table. TSX component here if I open this on the left and open this model on the right as you can see this typography component here probably probably is for this ID this input field component here is probably for this display name similarly this one is probably for the email lastly a switch field that you can toggle for verified or not a date field afterwards seems like this component is what renders this model right here we can confirm by adding like a high there over here and if I now edit again I see hi there over here so I've been able to read each the component that renders this the question is what was the issue the issue States it should have fields for client metadata and server metadata I need to put in two more input Fields here that let the user mutate the client metadata and the server metadata that exists in the database for that user we can right now mutate their name we can mutate their email this is how we can change the name this is how can change the email how can I add two more input boxes that can change the users server metadata and client metadata which need to be Json values herat I will just do this I will copy the input field that you have here for display name I will paste it over here twice I will replace the first one with client metadata the second one with so server metadata and then maybe change this name to be client metadata I don't know what it does right now and maybe change this to server metadata this might be the right approach herat let's see if I click on edit over here I do see two input boxes now one for client metadata one for Server metadata but is this enough probably not I need to change a few other things right I need to see what happens when I click on the save button if you look at this you know there are errors that come in case when I'm typing and this isn't a valid email it shows me an error a similar error should come over here if this isn't valid Json it needs to be Json that looks something like you know name hirat it cannot be a random string that is a constraint on this specific in these two specific fields that they need to accept only Json values so how can I add an error message like this if this isn't a valid Json and how can I make sure if you click on save this data is reaching the back end as well let's go over both of them one by one how does the first thing happen how does validation happen here these guys use a library called react hook forms if you've heard of it if you look at this form dialogue component it uses a react hook forms Library so if I go to the component what all things do they have here as soon as the component is rendered number one some default values are taken from props do user so I probably need to get the default values for this guy and this guy as well what does default values mean it means the value that the back end returned to you if I refresh this page click on edit there is a default value that comes here default values that come here right I need the same for this and this guy to to appear if the back end has let's say an empty object in the client metadata if I save this I need the empty object to appear over here and hence I probably need to do client metadata and server metadata needs to be props do user. client metadata and server metadata hirat how do you know they actually exist we can just log props do user if you do you will see you know a client metadata and a server metadata indeed get returned from the server the problem is This Server metadata and client metadata are Json values I repeat they are not strings if I right now click on edit over here you will see it says object object it does not say an empty object what is the the thing that's stored in the database an empty object what do I see over here object object why because I haven't stringified this what do I need to do I need to stringify client metadata and server metadata this will convert the Json object into or you know an object into a string and then the final thing that you see here if I refresh this again you see an empty object here if there is an empty object in the database let's say in the server object it's a non-empty object that looks like this the server metadata has name herir if I save this and refresh click on edit I see name her here so the default values to are sorted now what is the second thing we have to do add validation make sure this is valid Json how have these guys done it if you look at user edit form schema what does it say yeah this is the schema of our form we want a default display name which needs to be a string primary email which needs to be a string and needs to be an email if it isn't an email then show the user this error this is why if this is not a valid email you see an error over here signed up at when the user signed up which is a date and then lastly primary email verified which is a Boolean this thing right here this toggle right here what are the two new fields that I'm adding I'm adding client metadata and server metadata but are they just strings or are they something more they need to be valid Json what is this Library called yep if you search for yap on npm you will see it tells you Yap is a schema builder for runtime value passing and validation when the JavaScript code is running if you want to validate it if you want to make sure it is a string it is a string of type email or if it is valid Json which is what we want to test on this guy this guy you can use the Yap Library how can I do Json validation you just search for it you reach this this stack Overflow issue and then you you know copy this Yap validator you can also you know I'm sure there are other ways to reach here this is how I reached the Yap Json validator which if you look at it what does it say it says it needs to be a string and this is the test it needs to uh withhold SL you know pass um this is the name for a test you can name it anything you want we were naming it Json this is the message that the user sees in case it fails and this is the final validator what does the validator do it first let me add some code here there you go it first checks okay is this an empty string and if it is it returns true it says it is valid harat empty string is valid Json no empty string isn't valid Json but you don't want the user to see an error if they have posted something empty over here that means you know they don't want any client metadata so you need to make sure the validator succeeds the user does not see an error over here if the value is empty but if the value is nonempty if the user is typing something then you need to make sure it's valid Json this isn't valid Json this is valid Json how can you check if a string is valid Json you can run json. par on it which conver converts the string to an object and if this does not fail I repeat if this does not throw an exception if the control reaches here it means an exception was thrown it means Json paring failed and hence you know the validator tells you okay the validation has failed show an error message here but in case Json dopar does not throw an error is when this R the control reaches here you return true which means don't show an error to the user that's how we have created the Yap J on validator now we'll replace both of these to be to know use this validator because we want an error message to come in case the user gives us invalid Json if I now try to put some invalid Json here it says invalid Json format if I put nothing it does not throw an error if I put an empty Json object it does not give an error even if I populate a proper Json object it does not give an error if I click on Save and Go to the database you will see both server data and client metadata have been updated but there is an error as you can see it's a red in color over here it says value must be a valid Json unfortunately whenever the submit button is clicked I repeat whenever you click on the submit button this call back gets called and what does it do it calls props do user. update with these values let's log Lo these values let's see console.log values what gets logged when I click on the submit button it is an object inside which client metadata is a string this isn't an a JavaScript object what does Json stand for JavaScript object notation what is client metadata it is a string right now we need to pass it to Json before sending it over to Prisma the same is true for Server metadata as well both of these are strings and they go as strings to the database similar to you know you're doing this we don't want that we want Json to reach here and hence you know you can write something like this const updated values equal to all the existing values and the client metadata and the server metadata if the client metadata exists then it should be passed else if it doesn't exist then it should be undefined and similarly server metadata if value. server metadata exists if the user did indeed put some value over here then you should pass it before sending it back to the server but if the user did not put anything here if it is under undefined then you return undefined to the database as well let's see if this works let me paste an empty object here empty object here save let's go to the database and you will see both the refresh discard changes refresh client and the server metadata still are invalid strings if values. client metadata exists oh updated values has been defined I also need to pass it to the props do user. update function now if I refresh click on edit empty object empty object refresh you will see a valid empty object reaches both the server metadata and the client metadata what is dot do dot values it just lets you you know it spreads the original object basically means if the original object was something like this name hirat age 20 then it first takes both of them it takes both these values and puts them here and then you override the client metadata and the server metadata I repeat what does this dot dot dot values does do okay okay there we go the dot dot dot values spreads the original values what does spreading mean it just puts the original object over here all the key value Pairs and then you override client metadata and server metadata if I go over here now it seems like we have almost fixed the issue I repeat if I click on edit I can now update the client metadata to be name herat and save it if I go to the database I do indeed see the client metad data be updated the only you know extra thing over here that you know I added and might be good for you to add if you're solving this is Json can be a very big object and hence it doesn't make too much sense for this to be an input box it should ideally be a text area it should have a bunch of rows where you submit Json not a one line input box it should be a multi-line input box how can you add the code for that it's fairly simple I've already done it in the pull request that I have if you look at the pr that I created I added a text area field component just how an input field component exists I took inspiration from this this input field component and created a very similar text area field component right above it this is the input field component I created a component called text area field which eventually renders a text area what is a text area when you have a bunch of rows what does this guy eventually render it renders an input the input field eventually renders an input my text area field eventually renders a text area and that is how you can reach you know if if I use that text area over here for defining the client metadata and the server metadata the final form would look something like this as you can see the client metadata and server metadata are multi-line inputs rather than you know being in a single line like this and this this is just you know something I did from my side this ideally should depend on a designer if they had one startups don't but if they did you know it's probably their decision okay should be a it be a single line metadata or multi-line metadata cool that's how I solved the issue if you look at all the changes that I've made here they're very similar to how you know we just solved the issue locally but the only extra thing is I added a text area field rather than a simple input field and I moved the Yap Json validator to a shared Library so that everyone can use it in the future as well the client metadata and the server metadata use the Yap Json validator default values client metadata and server metadata stringify what the server returns to us so that object object doesn't appear I render the two text areas and on submit in case client method data exists I parse it before sending it up the chain in case server metadata exists I parse it before sending it up the chain lastly in the form fields. TSX component I added text area field as a fresh component and lastly the Yap validator was moved into you know a separate shared package so that other apps other components can also use it in the future that's the change that I made it hasn't been merged yet we'll wait for a bit and see what the maintainers say and go from there thank you for submiss oh you have to sign the SLA as well okay never mind I will do this in my own time but seems like you also have to you know sign this probably says you know makes you sign things like they own your code and you know you haven't added any code that you have copyright issue y y y things like this um but yeah that's a brief of how I would solve this issue let me know how it was this is actually a fairly simple issue um all the other issues in stack are taken a bunch of issues in Panora are open in case you feel like it um and let me show you a bunch of them quickly as I said the best ones do not Target ones that have you know core team these connectors might be great ones to do but you know only if you test them well locally these would require a lot of grunt work on your side to you know first go to QuickBooks understand their apis create an account here then make sure data is actually being populated there if it's well tested and if if you solve a bunch of these it's a great contribution not in terms of showing off um to you know other people but generally for these guys it'll be super helpful the other library that we were going through was next UI which has a lot of issues but you know fairly simple front end issues feel free to pick these as well U these guys have also raised they have a pro subscription so I'm sure you know they may or may not be hiding I don't know I was looking at the contributors they only have two core contributors which I'm assuming means they only have two engineers currently working uh which is this guy and this guy right here so you know may or may not hire I don't know either way it's a good library to you know contribute to that's all I had for this one uh let me know how the video was I'll see you guys in the next one bye-bye