Build Full Stack NextJs Student Attendance Tracking App | React, MySql, Tailwind css, Drizzle ORM

Поделиться
HTML-код
  • Опубликовано: 19 янв 2025

Комментарии • 198

  • @manish_kumar_iitg
    @manish_kumar_iitg 5 месяцев назад +4

    27:50 => here i can change the layout of authentication
    51:16 => how to get user's name, profile picture, email etc.

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 8 месяцев назад +7

    man you are dropping awesome fullstack apps

  • @pratikpatil5457
    @pratikpatil5457 День назад +1

    I have questions
    How to change data for specific account. If we change login account then students or other info also want to change

    • @tubeguruji
      @tubeguruji  12 часов назад

      This can be achieved by linking the account to its specific data, I'll explain more later.

  • @mohdali-yq8gq
    @mohdali-yq8gq 8 месяцев назад +4

    Really impressed the instructor presenting the new and great features of modern programming and great examples and topic and we have only one request to make use of type script which is a very essential part of project.

  • @berke.code07
    @berke.code07 3 месяца назад +2

    I want to implement a feature like every stundet will have an unique QR code with their id , whenever the admin scan that QR Code the system will tick the day that qr code scanned at
    could you help me to figure this out ?

  • @AvikNayak_
    @AvikNayak_ 7 месяцев назад +3

    How to migrate this project to plain react js? Also instead of using clerk, authentication with jwt would have been better

    • @tubeguruji
      @tubeguruji  7 месяцев назад

      Just simply use react and add react routing.

  • @eugeenhunter7384
    @eugeenhunter7384 8 месяцев назад +2

    you just earned a subscription from me, this is one of the projects i have been yearning for

  • @hafizhhadiawan4507
    @hafizhhadiawan4507 5 часов назад

    Hello, im trying to follow your tutorial however i can't connect my nextjs with kinde, I followed this part several times and it always said '404 not found' does this happen because I don't use hostinger or the node.js version im using isn't The same as your version? Sorry for my horrible English

  • @kaushal.mp4
    @kaushal.mp4 8 месяцев назад +5

    *I Love Your Projects So Much!!* ❤
    They are so Unique & Impressive!

  • @harshrathod3807
    @harshrathod3807 2 месяца назад +2

    koi bana ke github pe upload karo please and give its link

  • @avinash2421
    @avinash2421 8 месяцев назад +5

    get error as localhost can't currently handle this request.
    HTTP ERROR 500

    • @surjo2003
      @surjo2003 8 месяцев назад +1

      Yes i am facing the error. Did you find any solution?

    • @JamesKinyanjui-hz2qt
      @JamesKinyanjui-hz2qt 8 месяцев назад +1

      me too got stuck from there i cannot continue with the code along anymore cause of the error

    • @avinash2421
      @avinash2421 8 месяцев назад +2

      Yes It got resolved but I forgot

    • @surjo2003
      @surjo2003 8 месяцев назад

      @@avinash2421 brother can you please help me resolving it?

    • @JamesKinyanjui-hz2qt
      @JamesKinyanjui-hz2qt 8 месяцев назад

      @@avinash2421 how did you fix the error please

  • @grandparick3176
    @grandparick3176 Месяц назад +1

    Can this really be done from beginning to end or is there any gray area where we get stuck and can't proceed any further in the middle.

  • @tuoyo6896
    @tuoyo6896 8 месяцев назад +1

    I love this. This is a very life-applicable application that fits into many needs. God bless you Tube Guruji

  • @satendra8617
    @satendra8617 8 месяцев назад +3

    its great but can you add total attendance for a single student at the end of month , it would be great and please tell me how to do it.

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Thats easy to do, Just sum it for give student

  • @ajibodeolayinka3903
    @ajibodeolayinka3903 8 месяцев назад +2

    nice work and consisntnecy ,but is there a reson why you dont use typescript ?

    • @tubeguruji
      @tubeguruji  8 месяцев назад +1

      For begginer user typescript is hard to understand, SO I thought lets teach with javascript and then will go to Typescript, In some of the video I already use typescript.

  • @SalmanKhan-mn3cn
    @SalmanKhan-mn3cn 8 месяцев назад +2

    this is best channel which make real world projects ❤❤

  • @rickghosh8507
    @rickghosh8507 5 месяцев назад +2

    Sir please tell me any free alternative for hostinger, because I have to use mysql database.
    Please sir....

    • @tubeguruji
      @tubeguruji  5 месяцев назад +1

      Use postgres database from neon . Its free

  • @alfaloverss3116
    @alfaloverss3116 3 месяца назад +2

    do one thing thats is student have access to mark the attendance

  • @NOOBGAMER-gj9ox
    @NOOBGAMER-gj9ox 3 дня назад

    Sir sing in pe click karne ke baad error 404 vala page aa raha pata nahi kya ho raha he step by step follow kia he

  • @Account001-k6f
    @Account001-k6f 8 месяцев назад +1

    Love the consistency. Love from 🇱🇰

  • @johnedet2987
    @johnedet2987 8 месяцев назад +2

    I had love to see downloading attendance report and deployment

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Will Add in upcoming videos.

  • @AfraYasz
    @AfraYasz 2 месяца назад +1

    do this project calculate the attendance percentage of a student ? for a certain period of days

    • @AfraYasz
      @AfraYasz 2 месяца назад +1

      any one who try this project pls reply. do this project can calculate the attendance percentage of a student for a set of days

  • @tonyp3173
    @tonyp3173 7 месяцев назад +1

    I am getting an error when I try to sign up and authenticate. After hitting sign up and going through that, it gives me an error of 500
    code: 'ERR_INVALID_URL',
    input: '/dashboard'
    I am stuck

    • @arys-on-fire
      @arys-on-fire 7 месяцев назад

      did you solve it?

    • @tonyp3173
      @tonyp3173 7 месяцев назад

      @@arys-on-fire No I did not. Suggestions?

    • @arinsingh1377
      @arinsingh1377 7 месяцев назад

      Did you got any solution to this?

    • @CodeNinja18
      @CodeNinja18 6 месяцев назад

      you can also use clerk instead of kinde

  • @amitprajapati6025
    @amitprajapati6025 4 месяца назад +1

    Can i get synopsis of this project

  • @regilearn2138
    @regilearn2138 8 месяцев назад +2

    pls use typescript for future projects

  • @vishalghule4807
    @vishalghule4807 6 месяцев назад +3

    1000 likes are done. will there be new upgraded project now 😁

  • @majidmohd100
    @majidmohd100 7 месяцев назад

    Is the website responsive? does the attendance table and all that work well in a smartphone?

  • @somnathdutta6311
    @somnathdutta6311 8 месяцев назад +1

    Hi, sir I am new to fullstack. Know html,css, tellwind css , javascript. Very little about react.
    Can I do this project? I mean will i able to understand all the code and concepts?

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Yes for sure.. it’s for beginner .. watch any of my videos and all are for new users

  • @md.taohidimamkhantamim9747
    @md.taohidimamkhantamim9747 7 месяцев назад +1

    Can not u use Prisma orm and Aiven( a free cloud db)?

  • @prajwal3043
    @prajwal3043 4 месяца назад

    Thank you for this video sir.
    I would appreciate if you make extended version of this application!

  • @vikas_z_246
    @vikas_z_246 7 дней назад

    facing with axios errors what to do

  • @OnurrrYilmazz
    @OnurrrYilmazz 8 месяцев назад +1

    When will file sharing come with aws s3 and next.js

  • @folk_frontier
    @folk_frontier 2 месяца назад

    Awesome work you have done sir, am actually using this for my school project Thanks a lot. Is there a way to make the students be able to mark their own attendance and currently when i mark the attendance it updates the table and database but in my database the present column is marked as false instead of true . I have tried everything Please help

  • @manishasaini307
    @manishasaini307 8 месяцев назад

    Hi, which tech stack did you use? we people are in confusion typescript or reactjs?

    • @tubeguruji
      @tubeguruji  8 месяцев назад +1

      No typescript.. i used nextjs react.. with mysql database

  • @saykotrayhan8363
    @saykotrayhan8363 8 месяцев назад

    How did you get the checkboxes in the table rows?

  • @danishmaqboolg
    @danishmaqboolg 5 месяцев назад +1

    Bro can i build this without buy Hostinger? and Upload on Vercel ...? , Thanks!

    • @tubeguruji
      @tubeguruji  5 месяцев назад

      Yes you can, Use Any Database like postgres sql from neon

    • @danishmaqboolg
      @danishmaqboolg 5 месяцев назад

      @@tubeguruji Can you please make one Video on this

  • @POOJAKUMARI-vl1my
    @POOJAKUMARI-vl1my 8 месяцев назад +1

    Can you give me guide of how can i create same mysql database on other platforms, and how to connect it with application as i can't afford hostinger pack

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      You can use postgresSql as well, on Neon...

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      ruclips.net/video/pQoHvx0SoiA/видео.html

  • @FOCUS_AND_GROW
    @FOCUS_AND_GROW 2 месяца назад

    how to download attendance report of that perticular month??

  • @farhanakhtar5229
    @farhanakhtar5229 4 месяца назад +1

    bro where is the new feature upgrade please extend this app

  • @LuxacDevelopers
    @LuxacDevelopers 8 месяцев назад +2

    Greate project keep it up brother🎉🎉🎉can you make a full school management system

  • @adilredaoui1679
    @adilredaoui1679 8 месяцев назад +3

    Mike full school management system please 🙏

  • @patel5532
    @patel5532 8 месяцев назад +1

    Sir, Discord link is invalid. Kindly provide the updated link

  • @saamsforever7339
    @saamsforever7339 Месяц назад

    i want a student view as well , where in the student can know if he was correctly marked present, obviously the student view should not be able to edit the attendance, also i want to include the marks of internal examinations, and assignments, each of themm must have certain percentage according to which the total internal marks of the student are calculated, plz help me out with this

    • @tubeguruji
      @tubeguruji  Месяц назад

      Noted. In future product we can add that

  • @PrashantRajput-c3b
    @PrashantRajput-c3b 8 месяцев назад +2

    Sir please make PWA app alternative of Split Wise

  • @_ShreyanshAgrawal
    @_ShreyanshAgrawal 8 месяцев назад +1

    if you can make a mobile version in react native of these , with same database

  • @tuoyo6896
    @tuoyo6896 8 месяцев назад +1

    Can this app be deployed on Hostinger?

  • @progress5779
    @progress5779 10 дней назад

    hello is thier any way to host the database because i cant afford the hustinger

    • @tubeguruji
      @tubeguruji  9 дней назад

      U can try Neon Postgres Sql database

    • @progress5779
      @progress5779 5 дней назад

      @@tubeguruji is it the same setup as hostinger? because i get confuse sometimes when connecting is different

    • @progress5779
      @progress5779 5 дней назад

      @@tubeguruji its okay now i got it. drizzle and neon thank you so much.

  • @chiragmaini9564
    @chiragmaini9564 8 месяцев назад +1

    thank you for such an amazing tutorial:)
    sir I want to avail source code of react native video course project, but it is showing card not supported.
    Any other option available sir ?

  • @eugeenhunter7384
    @eugeenhunter7384 8 месяцев назад

    just a quick question kindly don't ignore an, can i use mysql running locally

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Yes You can do it

    • @eugenehunter6305
      @eugenehunter6305 8 месяцев назад

      Please explain more, or where will i intergrate local mysql, using the default authentication from it

  • @tanlilun4874
    @tanlilun4874 3 месяца назад

    1:14:15
    npm run db:push is not working
    added:
    dialect: "mysql",
    Run:
    npx drizzle-kit push
    Error:
    No config path provided, using default 'drizzle.config.js'
    Reading config file 'C:\Users\60183\Documents\GitHub\Student-Attendance-Tracking\drizzle.config.js'
    Anyone encounter this and how you solve it?

    • @shethrives30
      @shethrives30 2 месяца назад

      same

    • @ApnaCodingSchoolOfficial
      @ApnaCodingSchoolOfficial 8 дней назад

      This is one of the fundamental problem with the drizzle orm
      I think we are having problem because we are trying to connect it with our local databse mysql

  • @avinavkashyap8802
    @avinavkashyap8802 8 месяцев назад +1

    please make something useful website related to BANs .Please also tell us the deployment part of it

  • @priyankanaidu9193
    @priyankanaidu9193 6 месяцев назад

    After creating account, it's not redirecting to home page instead it's showing localhost cannot handle the request HTTP 500 error, I tried a lot to resolve it but couldn't. Please help me out!

  • @ApnaCodingSchoolOfficial
    @ApnaCodingSchoolOfficial 8 дней назад

    How to use normal my sql database with this project ?

    • @tubeguruji
      @tubeguruji  8 дней назад

      I explained in this video how to use it and its quite simple

    • @ApnaCodingSchoolOfficial
      @ApnaCodingSchoolOfficial 8 дней назад

      @ sir but facing problem in npm run push
      Where you have used db:push in package.json
      Why is thag happening

    • @ApnaCodingSchoolOfficial
      @ApnaCodingSchoolOfficial 8 дней назад

      @ sir i am using normal mysql as my databse is it possible in this project i tried all the resources but not able to find out please guide if possible

  • @riis08
    @riis08 7 месяцев назад +1

    Amazing contents @TubeGuruji

  • @arys-on-fire
    @arys-on-fire 7 месяцев назад

    As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

    • @AvikNayak_
      @AvikNayak_ 7 месяцев назад +1

      And did you fix it?

    • @arys-on-fire
      @arys-on-fire 7 месяцев назад

      @@AvikNayak_ just remove middleware or add another redirect link to it. change all sh like 'api/auth/login.....' to just '/dashboard'

  • @ReyXt
    @ReyXt 8 месяцев назад +1

    is it completed tutorial sir? because i want to follow it

  • @mugambwajoel6121
    @mugambwajoel6121 3 месяца назад

    can you do an internship management system

  • @ranjsx
    @ranjsx 8 месяцев назад

    is there any alternate database holder? because i don't have money to subscribe hostinger; is there any possible alternate for that?

    • @tubeguruji
      @tubeguruji  8 месяцев назад +1

      You can use postgresql using neon and drizzle ORM, Watch my ruclips.net/video/pQoHvx0SoiA/видео.html

  • @CodeSnap01
    @CodeSnap01 8 месяцев назад +1

    Thankyou you fullfiled our wishes.

  • @2ru2pacFan
    @2ru2pacFan 8 месяцев назад +1

    Can you please do a employee holiday tracker?

  • @abdur786_
    @abdur786_ 8 месяцев назад +1

    Cam we make this project easily using mongodb

  • @hubesh716
    @hubesh716 8 месяцев назад +1

    Any plain for react native projects

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Yes soon, Will launch new react native project

  • @sanjaymurali4635
    @sanjaymurali4635 Месяц назад

    bro hostinger requires subscription
    but can we use it for free

  • @H_NileshKumar
    @H_NileshKumar 7 месяцев назад

    why didn't you use 'src' directory when creating the project?? src directory is new and its better than pages directory. i was hoping to learn nextjs with src directory tutorial.

    • @tubeguruji
      @tubeguruji  7 месяцев назад

      Src is old way for nextjs, In my old nextjs project you will find src directory

    • @AvikNayak_
      @AvikNayak_ 5 месяцев назад

      You are confused. Pages was the old way. The new way is App Router.

  • @sumanthprabhu11
    @sumanthprabhu11 8 месяцев назад +14

    Please make a deployment video

  • @KrishnanduGurey
    @KrishnanduGurey 4 месяца назад

    buddy is there any free solution to backend management, pls suggest me if i can use any alternate to hostinger which would be free to handle the database pls 🙏🙏

  • @nileshnishad5599
    @nileshnishad5599 8 месяцев назад +2

    Amazing 🤩

  • @snesmaraksamiti8683
    @snesmaraksamiti8683 3 месяца назад

    very helpful , Please deploy to Vercel

  • @ThestarksGot
    @ThestarksGot 8 месяцев назад +1

    Subscribed. Great Content and presentation, Please would you integrate a school fee management system to this app. Or please create a school fee management app in react native. Look forward to your positive response. Thanks

    • @tubeguruji
      @tubeguruji  8 месяцев назад +1

      Sure Will do it

    • @ThestarksGot
      @ThestarksGot 8 месяцев назад

      @@tubeguruji Thank you for agreeing to create the app based on my comment. Your generosity and talent mean the world to me. I'm thrilled to see the final product and share it with others. Your dedication is truly inspiring.

  • @GameCode-with-Abhi
    @GameCode-with-Abhi 4 месяца назад

    sir can you please build attendence websit for college using reactjs

  • @jhonsnow534
    @jhonsnow534 8 месяцев назад +1

    Responsive??

  • @nayan_CSE
    @nayan_CSE Месяц назад

    Plz make video for that students who can not buy domain...there are many free resources plz make video on those...

  • @nadetdevfullstack7041
    @nadetdevfullstack7041 8 месяцев назад +1

    So Excellent

  • @opketan477
    @opketan477 6 месяцев назад

    getting errors in setting middleware😭😭

  • @PrashantRajput-c3b
    @PrashantRajput-c3b 8 месяцев назад

    Sir how to make demo login option that every user can experience our app without login

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      You can add custom Login

  • @gambiatec3318
    @gambiatec3318 8 месяцев назад +1

    Nice!

  • @alfaloverss3116
    @alfaloverss3116 2 месяца назад

    why are uh use drizzle ??? instead of drizzle use prisma

    • @tubeguruji
      @tubeguruji  2 месяца назад +1

      Drizzle is much faster than prisma

    • @alfaloverss3116
      @alfaloverss3116 2 месяца назад

      @tubeguruji i want to learn orm so suggest me which orm is best because my friend told me prisma community is so big as compared to drizzle

    • @tubeguruji
      @tubeguruji  2 месяца назад +1

      @ drizzle is fast and easy to use

  • @vidyasagarg-g2f
    @vidyasagarg-g2f 8 месяцев назад +1

    Nice tutorial in the youtube

  • @waqasalam_007
    @waqasalam_007 Месяц назад

    I wanna leran ho to build any kind of app easily😢

  • @vishaljadhav4393
    @vishaljadhav4393 8 месяцев назад

    Please Deployment Video sir ..

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Watch my previous video in which deployment chapter is included.

  • @tahrizade
    @tahrizade 8 месяцев назад +14

    Dont Use in next projects: 1- Luside icon ( its so bad iconspacket ) , 2 - dont use clerck or other auth ( create users custom with backend, its so interested ). thx for video )

    • @tubeguruji
      @tubeguruji  8 месяцев назад +3

      Thanks for suggestion.

    • @mancya
      @mancya 8 месяцев назад +1

      ​@@tubeguruji Yeah please we need backend from your own creation, node js for example, it'll be amazing and cheap

    • @sanidhyagupta8266
      @sanidhyagupta8266 8 месяцев назад

      You can try frappe framework for developing backend

    • @tahrizade
      @tahrizade 8 месяцев назад

      my comment for who record this video, not for u ₽₽))

    • @everurstruly
      @everurstruly 8 месяцев назад +1

      Are you requesting, dictating or suggesting?

  • @Eadev44
    @Eadev44 8 месяцев назад

    What do you use your record your screen

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Screen recorder go

  • @ayeshdev
    @ayeshdev 8 месяцев назад +1

    Use nestjs please

  • @avinavkashyap8802
    @avinavkashyap8802 8 месяцев назад +1

    please deploy it also

  • @ezeslucky
    @ezeslucky 3 месяца назад

    Send the code

  • @hemanthpusarla4428
    @hemanthpusarla4428 8 месяцев назад

    sir why dont u provide source code for free members we r students we dont have enough money

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Dm me on instagram

    • @arinsingh1377
      @arinsingh1377 6 месяцев назад

      @hemanthpusarla4428 hey did u get source code, as he is not replying to my dm
      please help!

  • @anzamuneebkhan1980
    @anzamuneebkhan1980 8 месяцев назад

    Bhai ap Hindi ya Urdu ni bolty kya pz Hindi ma

  • @vaibhavchaudhari2650
    @vaibhavchaudhari2650 8 месяцев назад +1

    Hii

  • @tanishqava8667
    @tanishqava8667 8 месяцев назад +1

    first

    • @dipanshusabharwal
      @dipanshusabharwal 8 месяцев назад +1

      Bharat Ratna ke liye nominate krte h tujhe

    • @tubeguruji
      @tubeguruji  8 месяцев назад

      Hahaha, Thanks ... 😂

  • @mugambwajoel6121
    @mugambwajoel6121 2 месяца назад

    am getting an error

  • @ChurchHorace-m5l
    @ChurchHorace-m5l 4 месяца назад +1

    Hall Susan Gonzalez Matthew Hernandez Elizabeth

  • @achrefnabil2463
    @achrefnabil2463 8 месяцев назад +1

    Bro please we need mern stack projects 🥺🥹🥹

    • @tubeguruji
      @tubeguruji  8 месяцев назад +1

      Sure

    • @achrefnabil2463
      @achrefnabil2463 8 месяцев назад

      @@tubeguruji but you build only next js project

  • @christianjohncalderonduque4554
    @christianjohncalderonduque4554 2 месяца назад

    Sir Can i use mongodb as my backend? Thanks
    i cant afford hostinger

    • @tubeguruji
      @tubeguruji  2 месяца назад +1

      Yes, you can

    • @christianjohncalderonduque4554
      @christianjohncalderonduque4554 Месяц назад

      ​@@tubeguruji Hopefully you recreate this Amazing Full-Stack Student Attendance Tracking App again but in MERN STACK :). There is a feature that I suggest: Implementing parental engagement features, such as real-time attendance tracking and push notifications for absences with communication options to teachers, can enhance support for students and improve overall attendance :)