21 coding projects that will give you an UNFAIR advantage

I got many DMs recently from my community. What app should I build to get noticed by companies? The answer is build the ones that you're interested in and be able to finish. I can't give you the end all, be all answer, but what I can give you is a list of apps you should be able to create for your own learning so that you can go into a company and say, hey, I can do this feature or that feature and not feel like you're behind. So in this video I'll give you 21 applications you should be able to build to be 100% job ready. So my name is Phil and I became a senior developer after the age of 30 without a CS degree. And if this video is of value to you, please share with others and like it so others can benefit from it as well. You know, maybe if you're asking me this question or yourself this question, you know, HTML, CSS, JavaScript, maybe a little bit of react, but I'd say just stick with HTML CSS JavaScript until you get all those fundamentals correct. And at this point you just want to get your hands dirty and get your hands coding. And I'll give you five examples of projects that you can do without like the Internet or like, you know, you can just have a text editor or vim and you can do them anywhere. You just need your laptop or computer. But anyways, the first one I have listed here is a calculator app. I'm going to make this smaller and calculator app. It should be pretty easy. It's the reason why I suggest calculator is because it gets you used to using like operators and inputs. The UI is pretty simple. It's just like the same square over and over again. It's not a, it's not huge or anything. Here's an example on codepen I found here just like a one plus one and before I shot this video I tried to do something. I think you can make this a lot easier. My opinion, this is an okay way but I use eval. So eval is like a. It can take like a string and evaluate it to become like for whatever it needs to do. So like I'll show you example here. Like you say like const string string equals like a string of like one plus three like this and then eval and then you can put the string and it says four so maybe you can see how powerful that could be. So like maybe like eval on bigger eval 4 times 4 and then it'll give you 16 so it's. It's pretty powerful. My opinion, it's really easy way. So if you don't want to like go through all the code and which is I think is okay to do the code like that. But eval you can finish the calculator in like I don't know, like 30 minutes. Maybe it won't be too hard. Maybe we can speed code that later it would be. And I can film it. It would be kind of fun anyways. So calculator would be like the first one. Another one maybe with H no CSS JavaScript you could do is a todo app and from there you could kind of use local storage and caching and you can figure out how to kind of do that. Like I'm sure there are a lot of examples. I'll just try to find one to do app codepen. And I always try to find them on codepen there because they're like you can see the source code and see it running in the browser HTML csjs. And here we have found one right here. Here's a to do list added to do hello enter. Let's see if they use local storage. Maybe they don't. No, they do not. But it's still. You can kind of learn how to do it. Maybe we can find one with local storage here. Let me just press back here. To do local storage. JS Local storage To do list code pen. Amazing. So here you can. Right when it comes in, you say local storage get item on to do list. It'll save it in this key to do list and you can do whatever you want with it. And then you can set item, you know, make it a little bigger and you can kind of set item to do list whenever to do gets, you know, and there's a. Not this one. Sorry but little one that I want to talk about is gtd. It's get things done. It's a book. But a lot of programmers kind of have this thing. It's not about like got things done, not about past tenses, about the present moment of get things done. So that you know, whenever you do a to do list you kind of like ah, these are the things that have to get done Anyways. So a to do app is a pretty good one with like local storage. You can just type it in Google tic tac toe. I think it's pretty good because then you can kind of work with like events and you help with like logical thinking. And you know there are only so many outcomes that can come that are like winning Right. Like if you have like an array of arrays, right, you have 012-01-2012. Basically you can kind of draw where it's three in a row and then come up with all the, come up with all the coordinates of like where it's a three in a row. And then once it matches one of those it could be you find the winner. But that's pretty good. I found one here on codepen. Like here it makes like some choices and it's a tie. And then here there's three in a row. So like if it's, if it's an array 01234, I would probably think about it 012012012 and then think if it's like 001020, that's correct, right. It would be like a winning combination. So like 0 and this would be 01 or 02 as coordinates, kinda like row, column. And then I'll kind of think about it like that. Anyways, so. And then another kind of thing you could do With HTML CSS JavaScript is very simple like form validation with like email password, confirm password and some agree check marks. As you can probably find one on here. I'll just do a simple Google search.HTML CSS JS form validation. Okay. And pen stack with form validation. JS form validation. Here we are. So then here I can try to do something here. Maybe when I press enter it'll tell me some validation is wrong. Let's look. This is where you can kind of get your hands dirty with like regular expressions or just however kind of form validation you want to use. So they did use check email validation here. So obviously I got the validation wrong. This regular expression checks for some kind of characters, an symbol, some something with over two after the dot. Right. And I think if you ever are wondering like about regular expressions, about validations, I know there are a lot of wrappers for these like recently. But regular expressions are always kind of like good to learn and there's a lot of tutorials over it. I think this learn regular expression, learn regex1 I think has a good kind of like lesson on it. Just it's very easy. Like you just try to match these, you try to match these like patterns abc okay. That continue or define this. I see like I can match 1, 2, 3 at all these. Okay, cool. And just like you can kind of just go through this lesson and kind of teach you a little bit about regular expressions and you can kind of like even though if you don't need it, it's good to like kind of like hang in the conversations whenever you're at work or something. And another one I think you can always make is like a carousel. You know like a lot of websites are going to need these kind of carousels. And the good utility to carry around with you, put in your treasure box and you can carry around this carousel with you. Oh, can you put this carousel here? Oh yes, I can just copy paste it and it'll be kind of. Well you wouldn't say that, but it's something you can have in your back pocket, you know, and whatever you need. And it's kind of good logic. You can kind of think about it like a really wide like have the picture like this and then have a picture like two, three and then you can make a slider or you can like display none. Display none and only display. The one that is like is selected at that like in index or whatever. There are like two methods to it, but maybe you should do both. And those are kind of like five projects, okay. So that you should be able to do in like the HTML CSS JavaScript land. So calculator to do app tic tac toe a simple form validation kind of thing and a carousel and then so that's five, five projects there and then that'll be interesting for you to do and as long as you can kind of finish those, it'll be fine. And then. So what are some apps you personally learned a lot from at this level? I would love to hear your thoughts. Please comment below. So anyways, and then next like it's like maybe medium level projects. There's like a lot right with like React and JavaScript or TypeScript. So this is kind of cheating but the five HTCL CSS JavaScript projects I just read out, redo those in React, translate them into reaction. That's it's. You could find a lot of examples. It's not like you're doing it like yourself the first time. And like you know here you probably get used to working with APIs and HTTP requests. So you will need the Internet for this, right? So you will need wi fi and a laptop at a nice cafe with some coffee. But you can just practice these, it'll be fun. And because this is like what a bulk or like most of your jobs is working if you're working just front end, right? And getting used to tools like so when I was like a front end developer or any job actually I used to use a lot of like tools online. Like this is like one of my favorite ones. So I'll just, I'll just get this API real quick. So if I, if I grab this, people saying, telling me that my monitor, my text is too small. But okay, so here's like, I use Jason Viewer a lot. Used to be super free with no ads, but they added some ads recently. But anyways, you can pay some Jason here. You can format, make this bigger too. Anyways, and then you can format it and it turns it kind of pretty and then you can see the viewer and you can kind of see like all the keys and stuff. So these are kind of tools that you should kind of build up to kind of make you faster at programming or understand because looking through a bunch of text is a pain anyways, so you know, JSON Viewer is a really cool tool. There's a bunch of these online like JSON Viewer, JSON Vue, JSON Formatter, whatever one you choose to use. I think there's built in ones to the VS code extension as a VS code extension. But I just use JSON Viewer because that's what I've always used. And another one that you should kind of get used to is Insomnia or Postman. I use Insomnia. Insomnia is very good for making HTTP requests and stuff like that. So like it just helps make requests. And I can like spam the request to like make sure that you know everything's working correctly. And you just put, put in the HTTP and you put in what you need to and that's that. And another tool is Draw IO, so it's a flow chart maker. Just cancel that one. Create new diagram. Create a flowchart diagram thing. I'll just put aaa. Oh my goodness, I already made an AAA before. All right, there you go. All right. So you can make like a flow chart and just kind of like, I know like a lot of thinking is like, okay, if this is this, then this goes. So try to find how your brain kind of like thinks it thinks about it. I think it's called a UML diagram tool. Yeah, UML Unified Modeling Language Diagram Tool. But I just call it a flowchart thing. You can do some database stuff here. You can do some flowchart stuff and you can kind of like say, I don't know, like is logged in. And then if it's logged in, they go to like the home screen and it's kind of just good to visualize this kind of stuff. And in your medium projects you're going to kind of need to do this right, because you're going to have a lot of these little projects going on, little thoughts and little cases that are happening and these can get quite large. But that's Straw IO. Those are just three examples of tools that are online that are really easy to use that I use and I think they'll help you in the future. But anyway, so translate the earlier project so the calculator to do app tech toe form validation carousel into React form validation. There are a lot of React kind of like packages right. So one that's really good is React took form for validation or Formic with Yup. Or there's a bunch right there. I think Zod. Zod is one. Joy is Joy form validation. I don't know if it's called Joy. I don't know but it's. Yeah, it's similar to Yum I guess. But just get good at one and it'll carry over These kind of help with like regular expressions and all that kind of stuff. So another one. So now you're kind of working with like HTTP requests and maybe in React project, maybe a good one will you be like to make. Those are Axios and wrap your Axios with React query and React Query will help your application be more performant. But there's a couple APIs. Like I use RandomUser Me API. It's really easy to use no like API key to like sign up for anything. It's just able to be used. Another one is like just like base your apps around this like make some kind of crud system. You don't need to make the back end. But like. Like kind of like the. Kind of like the. The things you made in the to do app will transfer over into like handling these arrays of like objects right. Which rather it be random users or swappy. Swappy is a good API as well. Star wars API. It gives you all the Star wars characters. And then another one that I like to use is. Is a quotes generator API. So I have. I have one here from API Ninjas. I'm wondering if you need the ht but I'm hoping not. So you just send a request here. Maybe you might need some API key or something. But there are a bunch of quote APIs you can just send a request here. Let's see if I can do it from my browser. I'm missing an API key so I can do it from here. But you can just sign up for an API key. It's pretty easy somewhere. Hopefully it's free or we can find a new one. It does not matter. And then you could basically put like happiness or category. There's a bunch of different categories for these and you have a limit of a hundred. Right? Okay, so that's pretty interesting. There's only one way to happiness and that is to create. That is to cease worrying about things which are beyond the power of our will. It's pretty powerful, huh? So stop worrying about things you can't control and control the things you can. Anyways, so another thing is a weather application. So there's a bunch of these tutorials on weather application because you can cache it and it doesn't change for like a day or something. And a weather app with a pwa. So weather app, pwa. So PWA is a progressive web app. So it's able to use like little bit of like platform features with, with the browser so you can cache things. And then this kind of website that you're going to build as a PWA can be run without the Internet. And for some reason things without the Internet is kind of like a theme of this. But no, nevermind, but there's a lot of like documentation. People like make these all the time. They like use service workers and all this kind of stuff and just, just learn about it a little bit. It'll be fun. And one GitHub I can see is this one. I'll see here. Here's what it looks like. You can learn how to use it. You can just press period on the GitHub repository. I didn't write this or anything, but you can see that. I just want to show you like how the PWA works. You have some kind of service workers and it helps with the app and stuff like that. So you can kind of set that up and it'll be fun for you and it'll be good learning experience. So, you know, work with HTTP requests. And then obviously when you're making the weather API, you're going to have to work with the service worker, an HTTP request or an API to kind of get the weathers. And like, I have another bonus point for you. Like if you make a weather app and I don't think there's an app for it, but maybe you can recommend the clothes you should wear for the weather. It's going to be. That'd be kind of interesting as an app. So. And then like another one would be like making, making a blog application for yourself. But that's not just like the UI or like having to code out like new blocks every time. Maybe you can make a CMS in the background that no one else sees but you, and you just put in title and then like article and then you can like upload it and then it goes to the public viewed website and then you have like your cms, your content management system in like a password protected area of your website. That'd be kind of interesting I think. And like there are plenty of services that do this right like WordPress or like, I don't know, WIX does it. But anyways WordPress is a good one to use but it would be kind of cool to build out yourself a very simple one. And then another one I would say is a React Native Firestore Firebase chat app. And like people say you can make them in 10 minutes or whatever but I would like try to really understand it and you know spend like a couple hours trying to really understand. There's a bunch of tutorials for this. So React Native Firebase chat app template. Summarize the use of Google Firebase Initial Setup Authentication Firestore and Chat app. The reason why Firestore is really, really easy to use with chat app is Firestore kind of has these like listeners called like use snapshot or use. When I was using React Redux Firebase it was use Firestore Connect. But it basically creates a socket or like a listener to your database. So whenever there's an insert there, it notifies everyone that's like subscribed to that place, to that database to kind of say hey, something went in here. So that's kind of very powerful because you can say okay, here's all the messages but a new message went in. So I'm saying another event to add another image or add another. What is this? Add another message to the chat and that's like live, live requests. So maybe I think I have an example. Let me find one. There we go. That's another example that I wanted to show you guys later. But here we are. And you guys always say that the text is always so, so small. So I'm making it a little bit bigger. Here we are. Whoops. Chat chat room screen. So here's like a chat room screen. A good package that I always use is React Native Gifted Chat. It's like a full chat UI already built out for you. It's pretty good. And then I had things like chat room subscriber check if chat room exists and the subscriber just meaning listen to the Firestore. Right. So let unsubscribe. Why did I have an empty use effect? Oh, it's here. All right, here we are. So I set the chat room subscriber Here. And then it sets messages whenever there's a new chat message. Let's look at what chat room subscriber is. Chat room subscriber is a message ref.orderby and then I limit it. And then on the snapshot of the chat room ID of the messages collection inside, there's a sub collection with chat, chat room ui, chat room id. And then every time that happens, I map over my documents or whatever. It's pretty interesting. So this is the send message. And all this kind of documentation is all over Google. This is just an example. Anyways, there we are. I think that's done. That's now. This one's way too small of text, but okay, so now we have things working with HTTP requests and some kind of socket with firestore. Pwa. So that's like. And the quote generated in the random users. So that's 1, 2, 3, 4, 5 more projects. So that's now we're at 15 projects, right? We have the, we have the original HTML CSS JavaScript ones. Then we translate them into React. Then we got a couple like these medium projects. And then now we'll go into the advanced stuff. Right. So let's think about like the like HTML css. I found this duck hunting game. It's pretty cool, I thought. But if it. I think it's cool because if you really like are into like JavaScript, I mean just like HTML CSS, this could be interesting. So I know that these are all inputs, these ducks here. And if you click on it right at the right time, they go away, right? Yeah. So if I took the duck image away, it would just be a little checkbox up like this. And these are just being moved by. But being moved by the style CSS with keyframes, duck fly and at 0% top 10% left, 150% and it just keeps on going and going. It's not like they do anything special, but they do do some rotations and try to make it a little bit random, but they all end up kind of doing the same thing, as you can see, at different timing. But I think the CSS can get pretty deep. So you have like the first one, you have the second one that animates for 20 seconds and whatever. And I think it's pretty cool. And this would be kind of like. This is a bunch of CSS stuff like I thought was really interesting. I don't know at all. But this is, this is pretty cool. It's very short and simple. That's pretty cool. And the HTML is very small. It's just an input and a label. Pretty interesting. Anyways, anyways, we also do have, I'm trying to bring up the document one second. So now we have our maybe like an advanced CSS project with a bunch of like cool CSS stuff that a lot of people like. You know, I'll never like. I, I don't think I'll use it too much in my career, but maybe some people will and that's like the road they want to go down. And then you know, like with React you can make like a small social networking website with like a small backend, a small database and have features like login, sign up, select onboarding, profile management like a feed and some CRUD server. So like a create, read, update and delete. And I did find some kind of article here that's build a social media feed app with Redux and React part one. So if it's part one there's like many parts, right? Part one, part two, part three maybe. And if you just follow this, maybe you'll have like a complete project in the end and they always share the GitHub repository in the end somewhere. So it's a video. So seems interesting. Anyways, so just build out those features and then you'll have that in your tool belt and it'll be kind of cool. So that's 17 projects, another eight. Another project that I think you can do is you can try to make a back end server right without a front end. So you can do like backend first development which is like the way it's supposed to be, right. And so you can kind of like imagine your brain how the front end will interact with your requests that you make. And it'll be, it'll be interesting like maybe like build a reservation app for just the server first and you can build out like putting users in your database, maybe hashing the password if you're going to save their password, then JWT protection for your endpoints and you know, just your server like and then create it. So an example I have here is here it's a server here called Burner Server. I have like some kind of resume service. So it's something I was building a long, long time ago. But people can update a resume, people can set a resume so they can post a resume and you can handle the work history. So the user ID and company name. When you started the work, finished description and created at updated it and then it would cut. You can set the resume and then basically like an HR service or whatever, they could look up the references then save reference and get references and I try to get a skill get single reference to be used when getting resume of user and then you could just send the ID of the resume that it's talking about and then something like reservation service here. So if an employer looks at the resume, checks all the references, then they can like set a reservation. So set reservation. So it would be the company id, the date, the time slot, the slot length and who it is. Right. So then you get those things and you can kind of set the resume or set the reservation and you can get the reservations. You can filter them from the now like less than now. Yeah. And all that kind of stuff and delete the reservation and. And seems interesting. And then make like a email service for like nodemailer or something and nodemailer and set up your cron job. So this isn't done but it was just to set up the cron job for when I needed it later. And then like some sms, send text kind of stuff. Kind of interesting. And yeah, so you can kind of like create a backend service and expect the front end to talk to you like this. So then like you can get kind of like both worlds. I like to think about it like how the front end likes to receive the data and how the back end likes to give the data and stuff like that. And so that's number 18. So like another really interesting project is like maybe a video chatting project using Twilio Agora or jitsi and or webrtc and here's like a GitHub repository repository and this one will just like use the navigator media. Get user media. I did a project like this in like one of my first videos like the. What was it? Audio to text generator. I use the media devices get user media with just the audio. So use the mic and then it recorded the voice and then it gave you the text back. But you can actually get the video as well and use the camera and then with that camera you can kind of get the blob or whatever and set it to a canvas and it's pretty fun. So you can get that going and then as if you get deeper into there you get to learn about like ICE and stun and turn server and all this kind of stuff. And I have the handshake STP handshake I think it is and it gets interesting, it gets very deep into whatever you're gonna like try to do. And I think, you know, if you're deep into something then you can be used in something kind of like, not used, but, like, you can be utilized somewhere. Right? And if you're good at the RTC stuff, I'm sure there are a lot of companies like, you'd be interested in. Like, maybe you could work at Zoom, Google Meets or whatever it is. Right? That'd be kind of fun. Or Twilio. Oh, another one. Do I have an example of, like, a video chat app? Hold on one second. Let me find one in my repository.