Best frontend and backend projects for resume

hey there everyone hes here back again with another video and in this video I will solve a really simple problem that you're having the problem is pretty simple you want to stand out in your resume how can you do that by adding really fine project the project which impresses everybody but these days if you put up I built a Netflix clone I built an Amazon clone these are getting pretty generic all thanks to the so many of the YouTube YouTubers who are putting up these uh all these content they were put out with a great intention that people will learn the things but instead of they just are copying and pasting the stuff so in this video I will walk you through one such resource absolutely for free although this resource was not intentioned to be designed to be used in this way but we are just hacking our own way to actually use this resource in our own benefit now what's the problem statement again we want to stand out we want to make great resume and great projects but the problem is when you are just getting started you don't know to how much extent a project should go for example if you want to build something like a blog app I don't know to what extent I should be creating a blog app is the listing of all the blog articles okay should I be putting up the categories as well how much work should I do in the categories how much work should I do in filtering should I implement the search as well how the search page is going to look like what all the pages I have to work on with there are so many questions and when you are just getting started you don't know you really want somebody to dictate you that hey these are all the features that you should work and this is going to be called as a really good project and on top of that then there is a segregation of the frontend engineers as well as for the backend engineers in this video the frontend engineers that I'm targeting are react developers and nexts developer and for the back end feel free to pick up any stack that you like maybe nextjs maybe pure Express maybe spring boot whatever you like you can just pick up with that now in the front end also at first you might think like hey this is really not the way how I want to go but just wait till I download the project and install it and then you'll realize oh there is so much more work that I have to do and this work is exciting and I can just make it stand out nobody's going to do this uh as of now and even if they do it there is no solution online so the way how you will be doing it that's exactly going to be your way of doing the project so let me walk you through with that so all you have to do for this is go on to device.com and create a simple account it's all free and by the way no we are not going to be giving them any figma plugins or a figma design or something we are going to be using it in a little bit of a different way let me just go ahead and click a sign in and as soon as you do sign in I have to sign in with my Google account okay that's nice pretty fast now in this just simply go ahead and create click on the new application we will be selecting uh the second option which is uh pickup from the the templates so let's go ahead and click on the pickup from the templates now you'll see a lot of mobile screens what we are interested in this is at the very top select the templates click on the web this is where things get interesting and on this side let me just move this a little bit here and a little bit here now on this portion you'll see that we have so many of these applications on different different resources for example uh we have educas an online course we have news blog we have blog app we have Oracle foodio there is so much but it I'm not saying just download it and say that hey I build this project no because you cannot you have to work more on it what do I mean by that let me show you uh let's pick any one of them let's pick this news blog and this is whole how the news blog will look like uh this is my homepage this is how the homepage will look like this is how the search page will look like it will have the category and stuff this is how the subscribe page will look like this is how a single blog will look like this this is how the all Blog Page look like given the fact that they have uh sorted the design part for us that what I have to all work but now if I click on use this template and then we have we have to select what you want to call this application I want to call this one as uh news blog and react of course and I'll choose JavaScript for this one no particular reason you can feel free to choose typescript as well and click on the create app now as soon as I create this an app it it will try to convert this template into the react uh it did it like ridiculously fast and this is how it looks like all right looks good and what I'm interested in is this button which says build the app I'm not interested in changing the design although you can uh but I'm not interested in that for this particular video I'll click on the build app now this is the point where you can learn something more in pretty much all the companies there is a design system which is usually maintained by a couple of tools story book is one Search tool where you maintain the design system in case you don't know about it that's okay we'll just continue with without story book I'm not interested in the CRA I'll go with the V because I love that it's it's really fast and I'll click on the build now couple of things first notice it says it uses Tailwind CSS okay very modern and uh although they says npm start and npm install here what I've personally noticed is if you use yarn that is way faster and way optimized for the applications which are generated by the device personal opinion I found this way better but if you want to go with npm that's okay these are just the tools and we are on the 71% I'm not going to even fast forward this they are usually very fast in this one okay told you leave the page click on the leave and now on the next one we want to go in the code view this is the most interesting part for me and in the inside the code view there is one button at the very bottom of it I hope you can see this now sync or download the code I want to click on this no GitHub no gitlab uh sorry thank you uh we'll just go with the download and I want to download the entire source code for this one and I want to show you that what more you can do as a front-end engineer I'll just go in the test yeah test folder is fine and looks okay now let me open up the test folder and go back up here news blog there we go now let me fire up my vs code and tell you that what more you can actually do in this one because you might be thinking hey this is all good and this is all working no my friend this is exactly where your skills actually comes up okay we'll go with the yarn and we'll say yarn install let's go with this one hopefully now before you go ahead and check out anything else uh let me show you that if you go ahead check out the package.json there are so many packages like react router domom hash link react date picker all these things are pre-installed for me I don't have to work too much on this but still uh this entire platform is not yet ready you have to make it ready and this is one of the skill that you have to learn in this era of AI where a lot of work is already done for you but you have to do the fine tuning the last fine tuning and that is where the productivity lies and if I go ahead and say Hey I want to yarn Run start uh the exact same thing let's open this up let's go on the full screen now this is where my application looks like so it already by default looks great uh can impress anybody but what's not going to impress is this application is not yet working if I click on the health health doesn't go anywhere if I click on the login login is going but not the entertainment not the life they are not going anywhere so where are my other Pages if I click on the search oops we ran out of the code what happened in this one this is where your front-end skills actually come and all you have to do is make this project absolutely ready if there are some things like which are not aligning properly or something you have to fix them this is way how you go for it if I go ahead and click on login uh we can see uh it's working good but not that great we have to do some fixes on this and this is exactly where the AI is not that amazing but it has done so much job for you let me show you one more thing into this one let's go back into the code part let's try to understand the code written by the AI it's almost like we're trying to understand the code which somebody else is written kind of a open source world so let's go into the source and we have so many things assets models pages and all these things one thing which is interesting is route. jsx so routing is already done for you but notice here we have the Subscribe we have a single blog we have a all blog we have login register what happens if I go onto this all blog let's see if this is there so there is no link or button right now to go onto this one neither onto the homepage so I have to fix this and let's go ahead and see what happens when I go ahead and type all blog so there is a page for all the blogs but it's not working I need to use some of the dummy datas or I have to somehow fix this so notice here a lot of work is already done for you but now you have to do the final touches and final finishes and I don't think there is any other good way to learn and brush up your skills your manual labor is already being done now you're working on just polishing the stuff and I think this is the best way to learn the things on the go and a lot of time this is kind of exactly work that you do in the corporate as well there are other people who have written the code but there are some bugs or issues some tickets are being allotted to you that hey you know what the homepage link is not working or the single blog page is not working you have to fix them this is exactly the corporate work that you're looking up for and we are not paying anything for this one we just hacked way although this was intended the product was intended that you supply them uh your figma designs and they try to just generate the code they are doing their job best but not AI is not replacing you so just go ahead and work with that so all block filters all these things are there a lot of code is written for you models and pop-ups and whatnot but if you really want to taste that how a real world application is being built this is how they are built and now if you'll make this application entirely polished and workable that means there is no way that anybody is going to doubt your skills that hey you cannot work on the front end and similarly for the backend people if this kind of a front- end template is being given to you you work on your backend part design the models for you what are all the features which are required how a front end guy will apply what happens when I click on login if I click on the register what all the fields I'm taking this is was the problem statement so now you have to save in your user model the name the email the passwords and register them at the login time you have to work somehow that user will enter their email and password you have to work with remember me you have to work with forgot password all these things that you have to work on and this is just the T tip of the iceberg by the way I can go back into the all apps and I can just select again new from the templates and let's drag and draw for the web there are so many if you want to practice that hey I want to build a project which nobody has built yet I'll be working on the edtech platform maybe an e-commerce platform just go ahead and look on this all the things in this one you have to work on implementation of Google as well uh Google login and this is the UI so I'm not worried about the UI I'm more worried about how can I make this filtration work High School College compute all the data for me and if somebody shows that hey I worked on a project and this is how the project looks like I think you automatically Stand Out than those generic uh Netflix and Amazon clo this is how the real world industry works so I think if you have enough time you have done with the react course by the way the playlist is also available on the channel push yourself for something which is not for which the solution is not yet available if the solution is there you'll be copy pasting the solution but if you really want to push yourself and really want to learn the code this is the way how you do it not just by following following the people on YouTube and everything is good but you have to somay work on the application all alone without the support without the YouTuber without the mentor and this is where you truly learn programming so go ahead there are amazing templates uh although they were meant for the different stuff but we actually hacked it away to learn and enhance our skills so whether you're a react developer or an xjs developer if you're an xjs developer hey this is all react code try to import that into the next years and fix it up if you're a react developer fix the application I think that's the best way to learn so a small hack to increase your portfolio and make sure that your portfolio is standing out and is looking like a ready for corporate not those generic YouTube uh resume so that's it for this video I hope this uh insight and this small trick has is going to help you to learn more about how to make uh how to make a standout resume uh really small and amazing trick that's it for this video hope you have enjoyed this and by the way if you're not yet following there's another AWS Series going on in the channel learn about the cloud and all these stuffs and I'll surely catch you up in the next video

Channel: Hitesh Choudhary

Views: 170,082

Keywords: Programming, javascript, devops, cloud, aws, reactjs, nextjs, MERN, coding interviews, portfolio, frontend, backend, resume projects, industry standard projects

Id: CogZL5HBJgg

Length: 13min 11sec (791 seconds)

Published: Wed Feb 21 2024