Build a Free HR Payroll System with Selfie Attendance & GPS | Claude Code + Google Sheets

[0:00]What if I told you that this entire HR attendance application was built in just five prompts with live image capture and the location for the employee and all the code is written with the help of the AI using cloud code in VS code extension and the Google sheet we use as a database and the employee check-in or check-out with their live images. And also they can check out their history and their leaves management and also we have the multiple roles in this web application the admin manager and the employee. And now we are in the admin login admin can able to manage the employees then departments then project sites and also they can able to see the live map where the employees will log in. And also they can check out the leave applications and take a print and keep the record offline and then we can set the employee hourly rates in the settings. And then we just simply go to our payroll select a employee and the salary payroll slip automatically calculated based on their hourly rates. And in the settings section we can change out the hourly rate and the currency symbol as well. Well now I am going to tell you how we can create this web applications with the help of the AI step by step and how we can connect this web application to our Netlify a hosting. Free of cost and the same way we can do on our hostinger and the Google sheet we use as a database as usual. So first of all we need to open our Visual Studio code and once our Visual Studio code open we just simply click on this new folder go to the desktop and and the other path as per your own needs and then we just simply rename them to the attendance and then simply select this particular folder. And now we go to our extension sections where we can search the cloud code and once we search the cloud code so you can able to see this extension in front of you. Just simply open this and click on this installed I already installed this and once it's installed you just simply press on this cloud icon. And once you press on this cloud icon and now this is the section where we you we can write the prompt. We have divided this web application in five different prompts.We just simply copy our prompt and paste it here and it will create the code dot JS and index dot HTML for us. Because we have the five prompts we just give the one prompt first and then we give the second prompt and then we give the third prompt and then we give the fourth and the fifth. And once all the five prompts is completed the web application is completely ready for our production uses okay. So later on we will check out them if we need any kind of tweaks and if we need any kind of changes we can simply do that and now you can able to see here the code dot JS is simply created. And there is a option for the Q messages okay right now here so we just simply copy all over our remaining prompts the prompt two three four and five and paste it here and click on this send so this prompt will be added in our Q section. Okay so now we just simply copy our the prompt number three and paste it here and click on this send now the prompt two and the prompt three is in our Q. Okay now the same we do with the prompt number four and the prompt number five as well so once we paste all the prompts in the Q messages the AI will understand and they will work step by step. Once it's completed the prompt one then it will move to the prompt two and then it will move to the prompt three and same like that so once it's completed we will get our code dot JS and index dot HTML. And once we get our code dot JS and index dot HTML we just simply go to our Chrome browser. So this is our Chrome browser we just simply need to enter the sheet dot new in our URL bar. And once we enter the sheet dot new we have created our new Google sheet we just simply click on this extension and go to the app script. So once we go to the app script you will see the app script editor in front of you we just simply copy our code dot JS from our VL Studio code and paste in our app script editor. So once we paste the code in our app script editor we just simply click on this deploy and click on this new deployment. So once we click on this new deployment as of now you will see this this kind of setting icon in front of you just simply select web app and who has access to the anyone and click on this deploy. So once you click on this deploy as of now you can able to see here it's updating the deployment and now it will ask for the authorized access you just simply click on this authorized access. And now you have a option the advance just simply click on this advance and then you need to simply press it here go to the untitled project unsailed. Just simply select it here and once you select it here then you just simply check mark them all and click on this continue. So once you click on this continue as of now you can able to see here it's updating the you just simply copy this particular URL and you go back to your Visual Studio code. And once you go back to the Visual Studio code go to your index dot HTML and here what we what you need to do you just simply search it here the constant API. And now you need to replace your actual web app URL here so I just replaced my actual web app URL here and once it's replaced successfully I just simply press the control S and save it. So once I save it and now you can easily able to see here the code is saved out successfully. Now we just open our Chrome browser and search it here the Netlify so this is the first website we just simply open this particular website. And if you don't have the account you just simply create account I already have a account I just simply click on this login. And now you can able to see here this is the my dashboard and now I am in the dashboard I just simply click on this browse files. To upload I just simply selected here the browse files to upload and now I just go back to my that particular folders and select my index dot HTML file and you just simply make sure you just go to the right path where your actual file is available and select that particular files for the uploading. Okay so I just simply selected here my index dot HTML and click on this open and now it's uploading it says please don't refresh the page so we don't refresh the page. And once it's completed you will see this kind of interference in front of you now just simply click on this quick setup and now we can rename them so I just rename them to the Ramiz scripts HR and click on this update project name. So once I click on this update project name as of now you can able to see here it ask you if you want to connect the custom or set password protection to your website. So I don't need that I just simply click on this finish later so once I click on this finish later as of now you can able to see here your web application is hosted successfully on the Netlify. And now we need to enter our admin or admin one two three username or the password okay so it will give us the error because we don't have set up the demo data in our Google sheet. So you can try it as per your own needs unlimited time it will not allow you to log in why because we not have set up the set up demo data in our Google sheets because in our Google sheets we don't have any kind of database back end. So we just go back to our Google sheets again and just simply go to the code dot JS and simply select it here and make it set up demo data so once I click on this set up demo data and click on this run so the execution is started. And once the execution is started you can easily able to see here all the users is all the sheet is created successfully in our Google sheet and that is the demo data is installed. So now let's go back to the here and enter our username or password and now you can easily able to see here it's authenticating and now we are in the admin panel. So this is the dashboard where we can take the overview of the complete system and that is our employee section where we can add employee edit employ or delete employ. And also we can easily able to check out the today's status that this particular employ is checked in or not. Okay so this is a department sections where we can add the departments like the CS department other departments as per your own needs you can also edit or delete them. And that is our project sites where we can add our project sites and we just simply project name the location the latitude and the longitude. And the attendance radius allowance in the two hundred meters you are allowed to mark the attendance okay and then simply that. Now there is we have added a option to the live map you can easily able to see here where is your project sites actually available so once the employee check in or check out you can easily able to visualize them on the charts real time as well. So this is the attendance section where we can check out the attendance of that particular employees and we can also apply the filters month and year as well. And that is our leave sections where we get the leave applications and we have a multiple features we can approve or reject leave as well. We can edit the leave as well we can delete the leave as well and we have also a option for the print. So once we click on this print icon so now you can able to see here there is a professional application is printed and we can take a print and the manual signs of the authorities and keep them record in our office files as well. Well okay so you can easily able to see here now we have a option for hourly rates where we can set the hourly rates for each employee manager and etcetera. Let take example I just mark the hourly rates for the employer two is the 67 rupees and the employer one is the 134 rupees so how this will work. For that we need to go to our payroll section and in the employee drop down we just simply select that particular employee I just simply selected here the employee two and then the year and the month and click on this generate. So once I click on this generate as of now you can able to see here the hourly rate is this particular we have set them and that is their records on this particular date this person check in check out time these hours they have worked and that is their automatically calculated salary. And the same like that I just simply go to employee one and that have the rate 134 rupees and now you can able to see here they have worked the four days and that is their automatically calculated salary as well. And now you can take a print on the A four paper size something like that very professionally and the set in the setting section you can change the name currency symbol and also you can configure the late uh coming penalty and also you the leave or absent date fine as well so that will be deducted in your total payroll amount. Okay so there is a uh sidebar facilities layout facilities whatever your employ want to set them you can easily do that. Also this web application is completely mobile friendly and you have a different color palettes you can simply choose them as per your own needs okay. So this is the thing now we just simply log out and go back to our Google sheets and now this is our employee log in we just simply copy the username and the password and then go back to our web application and simply paste the username and the password for the employee and click on this login. So once I click on this login as of now you can able to see here it's authenticating and it will ask for the permission to your location to check out them where exactly you are. Okay so I just simply click on this here the check in with selfie so once I click on this check in with selfie so it will ask me uh for the picture I just simply take the picture and once I take the picture it will mark the check in time and the check out time and the current location as well where actually right I am here. Okay so this is the thing and once I check in or check out successfully they are not allow me to check in again okay. So this is they asking you the camera permission just simply give the camera permission and you take the picture click on this confirm so once you click on this confirm it's processing the attendance right now. Okay so once it's processing the attendance now you can easily able to see here it's still processing because it is using the do post function. So it is sending the request to the app script and then it the image will be saved in your Google Drive and the data will be saved in your Google sheet so that's why it will take some time of delays like the three to five seconds and you can hear the check in time is successfully and the same way we can do the check out as well. So we just simply click on this processing request and as of now you can able to see here we have just check out it. Well I have checked in or checked out successfully this is my check in time and that is my check out time now let's go my history section and in the my history section you can easily able to see here that is my in selfie and that is my out selfie. That is my check in time and that is my check out time and this is the particular horse and I have worked on this particular date and if admin can create the payroll then the salary will be calculated on this particular time. And that is my leave sections where we can request a leave to the admin and admin can approved or reject and also there is a my profile section where we can upload the my photo and also I can change the full name and then the change password feature as well. And this is a setting section where I can change the layout and the sidebar as per my comfortness and what I want to see and also I can change the color schema as per my needs as well. And this is my about section and if you want any kind of customized project you can simply contact us.