Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard

Поділитися
Вставка
  • Опубліковано 10 січ 2025

КОМЕНТАРІ • 522

  • @ukkashrecords7046
    @ukkashrecords7046 4 місяці тому +15

    Installation : 2:39
    Pages And Layout Tutorial : 5:06
    Tailwind Responsive Layout : 11:00
    Tailwind Responsive Menu Design : 18:21
    Tailwind Responsive Navbar design : 23:12
    Admin DashboardDesign : 30:18
    Animated Chart Tutorial : 40:02
    Radial Chart With Re-Chart : 41:02
    Animated Bar Chart Example : 52:42
    Animated Line Chart Example : 1:00:11

  • @ADHDOCD
    @ADHDOCD 4 місяці тому +17

    Thank you very much for this tutorial 🤩! I've always wanted to learn more about database & schema modeling for multi-tenant (B2B2C) use cases. Can you also build a CRM app tutorial like Go High Level or Hubspot ?

  • @purnesh27jagad11
    @purnesh27jagad11 Місяць тому +2

    As many people also said, this project is gold. Being a teacher myself, I am really looking forward for entire backend tutorial too.

  • @jarencefeliciano
    @jarencefeliciano 4 місяці тому +48

    Whoooo, here we go again. Another massive free latest techstack tutorial from a pro. Heads down! 🎉 Paid courses are ashamed because of this.

  • @ekurelala7083
    @ekurelala7083 3 місяці тому +1

    i love the way you structure your page by giving a full detail of each sector and what it's going to contain for example, {*left*/} and {*right*/}. It's always well laid out.

  • @raymondmichael4987
    @raymondmichael4987 4 місяці тому +27

    actually this is the best school system I have ever seen in youtube;
    one thing though , it’s missing the landing page which should be public for all to see 😊;
    I love this, hopefully I will learn a lot from thia.
    Greetings from Tanzania 🇹🇿

    • @birukdagne833
      @birukdagne833 4 місяці тому +2

      Nice work waiting for backend, appwrite database

    • @PapiYoppia
      @PapiYoppia 4 місяці тому +3

      I'm from Ethiopia I love TZ ❤

    • @raymondmichael4987
      @raymondmichael4987 4 місяці тому

      @@PapiYoppia , great to hear that, please arrange a visit I will be your host ☺️

    • @raymondmichael4987
      @raymondmichael4987 4 місяці тому +2

      for the backend, I prefer Convex, which as of now it’s framework which handles from authentications to database.
      But, I believe we’ll learn a lot from what you have planned already 😊

    • @rakeshroy1633
      @rakeshroy1633 4 місяці тому

      Very awesome 🎉🎉, plz make all features regarding school. It help us to earn money ❤❤❤❤❤

  • @iamnotstupid2
    @iamnotstupid2 3 місяці тому +1

    I think you give one of the clearest explanations on Tailwind lol. Extremely structured explanation on what each block does, this has allowed me to follow along with your train of thoughts. Like what you did with {/* LEFT BLOCK */} and {/* RIGHT BLOCK */}. This is so much better than following a tutorial where the guy just verbalize a bunch of code he is typing lol. Amazing content!

  • @Cognixor
    @Cognixor 4 місяці тому +1

    First 52 minutes done. Very nice! A clear step by step guidance. Great job!

  • @AlexNganga-sq5tu
    @AlexNganga-sq5tu 3 місяці тому +1

    Just finished building the UI and I loved it. Going onto building the backend and later add some more features to the site. Thanks to Lama

  • @PETERFILM
    @PETERFILM 4 місяці тому +6

    I can't keep up with your courses, but coming in and giving a like for your work is sacred! =)

  • @sandeepdeepu5052
    @sandeepdeepu5052 4 місяці тому +78

    Backend : Express with prisma + mongo or Express with prisma + Postgresql

  • @E.K.Bernard
    @E.K.Bernard 4 місяці тому +3

    this is a very serious project, thanks @lama dev, patiently waiting for the backend

  • @znkdev
    @znkdev 4 місяці тому +2

    LOVELY, I am on a school project right now.. This will help me a lot!

  • @rockbelleh6237
    @rockbelleh6237 4 місяці тому

    LAMA you are an excellent teacher.Thanks alot n God bless u abundantly for impacting and touching lives.Much love from Nigeria

  • @PavanSibal
    @PavanSibal 4 місяці тому +1

    Great Tutorial. Looking forward to the part2. Thanks Lama Dev

  • @MohammedAfroukh999
    @MohammedAfroukh999 4 місяці тому +225

    Backend : Nestjs + Prisma + Postgressql

    • @ArjunCodess
      @ArjunCodess 4 місяці тому

      @@MohammedAfroukh999 no hate, but drizzle is much better.

    • @muhammedriyas4514
      @muhammedriyas4514 4 місяці тому +10

      Or mysql❤

    • @drujas
      @drujas 4 місяці тому +10

      Or Laravel 💪

    • @shahabjoon201
      @shahabjoon201 4 місяці тому +2

      Yes, your suggests are awesome.

    • @apdiwhapmohmet4458
      @apdiwhapmohmet4458 4 місяці тому +2

      Exactly pro that is what we want

  • @mranderson3441
    @mranderson3441 4 місяці тому +1

    Thank you, brother. You are amazing to show it all of us for free. God bless you.

  • @gauravdeveloper
    @gauravdeveloper 4 місяці тому

    Fantastic Tutorial. Yes, I want to see the 2nd part of this video.
    Backend Technology: Node with Express + MongoDB / Postgress + JWT Authentication + Dynamic Role and Permission Management from admin + Redis

  • @bilimlink
    @bilimlink 4 місяці тому

    Hat off to the creator of such amazing tutorials. As googd as usual, thank you, Lama dev

  • @KrishnaList
    @KrishnaList 2 місяці тому

    You are the best UA-cam teacher I ever seen on you tube

  • @EuroRenta
    @EuroRenta 4 місяці тому +2

    Perfect project! Waiting for Backend!!!

  • @tavanix
    @tavanix 4 місяці тому +4

    Great job as usual! Lovely looking front end
    For the backend I’d vote for: nodejs + express + prisma or sequelize + MySQL or Postgres 🎉

  • @sheptianbagjautama
    @sheptianbagjautama 3 місяці тому

    Thanks, LamaDev! I'm so excited about the backend :)

  • @ferdinandeke9590
    @ferdinandeke9590 4 місяці тому +3

    Very lovely project lama.. once more kudos to you on all your efforts. So for back end, i'd love to see your approach on micro-services in Nodejs. Maybe with nestjs or the usual node-express. Thanks for all your efforts once more.

  • @roshanali619
    @roshanali619 2 місяці тому

    Thank u so much brother. Alhumdullilah , I have completed your video and it has added massive to my knowledge base.

  • @betsonwilliam9470
    @betsonwilliam9470 4 місяці тому

    Hi Lama❤, finished the first portion.. waiting for the backend portion. Thanks a loooot

  • @kooyaw4445
    @kooyaw4445 4 місяці тому

    Incredible what you're doing for us developers brother.

  • @kennedymwangi5880
    @kennedymwangi5880 3 місяці тому

    Very good tutorial. Just a quick comment, for perfect responsive designs it is good to make good use of both Grid and Flexbox. Being confident with these helps create more fluid designs. Appreciation from Kenya 🇰🇪🇰🇪

  • @diloasver
    @diloasver 2 місяці тому

    Thanks so much for this massive project just comploted now I'm so excited for the next one Thanks so grateful

  • @himankshu
    @himankshu 4 місяці тому +11

    ❤ love it. For backend please use psql, caching, express deployment too

  • @easetellnetworks7201
    @easetellnetworks7201 4 місяці тому

    My one and only youtube legend big up boss🔥🔥🔥🔥🔥

  • @passionstudio3856
    @passionstudio3856 4 місяці тому +4

    🙌 USING NEXTJS + CONVEX 🔥🔥🔥🔥🔥

  • @naseemsaffy
    @naseemsaffy 4 місяці тому +24

    Please make backend with prisma postgres redis and docker

  • @dev_guidance
    @dev_guidance 4 місяці тому +1

    love the way you design UI

  • @danielgega4381
    @danielgega4381 4 місяці тому +4

    My brother, this project is GOLD. Please encourage everyone to appreciate LAMA Dev by liking and subscribing to the channel. Next time, can you build a music distribution dashboard project with all the functionalities required in the music industry?

  • @darawan_omar
    @darawan_omar 4 місяці тому +6

    Backend --> Node js ( Express ) + Prisma + Mysql

  • @jav1978
    @jav1978 4 місяці тому

    Gracias Llama dev sigo tu contenido y es muy especial, de corazon soy un fiel seguidor de tu contendido porque aprendo sobre react y nextjs, eres un excelente profesor, saludos desde Venezuela

    • @_Rifat
      @_Rifat 4 місяці тому

      work properly event calender?

  • @icecream-wzsz
    @icecream-wzsz 4 місяці тому

    fantastic tutorial
    for backend, express.js and SQL Server

  • @betsonwilliam9470
    @betsonwilliam9470 4 місяці тому

    Sir, tonnes of love for the content .
    Please complete the second portion
    with deployment too

  • @memester6496
    @memester6496 4 місяці тому +3

    This is amazing. I was always looking for multi role application. Please dont use clerk, if possible either use next auth or custom login to better understand the whole application.

    • @raymondmichael4987
      @raymondmichael4987 4 місяці тому

      @@memester6496 exactly mate; Clerk or Kinder are simple but not ideal for learning because they do a lot by them self which makes it harder impliment similar things without using the service.
      I prefer authjs (next auth) or Convex which can handle everything from auth to database

  • @dev_catM
    @dev_catM 4 місяці тому

    This is exactly what i’m looking for. I’ve been trying to create my own e-learning platform (just for training) but I’ve been struggled with all the models and their relations, especially with schedules.
    I’d really love to see the back end part 😊. I’d root for MongoDB and Express if possible. But other technology is also fine.
    Thank you very much Lama ❤ ❤❤

  • @OnurrrYilmazz
    @OnurrrYilmazz 25 днів тому

    where I stay
    39:40 Next.js Animated Chart Tutorial
    01:10:36 Events Component Design
    2:11:53 School Management App Other List Pages
    02:34:08 School Management App Single Teacher Page Design
    02:58:15 School Management App Single Student Page Design
    03:50:30 Next.js Lazy Loading Import Tutorial with dynamic()

  • @salaheddinemaarouf1
    @salaheddinemaarouf1 3 місяці тому

    Thank you very much for this big and high quality work ❤❤❤ wish u all the best

  • @sammer-gr5qj
    @sammer-gr5qj 4 місяці тому +1

    Just what I need Right now 🤣 you read my mind 😂❤

  • @graciouskingsley6893
    @graciouskingsley6893 4 місяці тому +1

    I appreciate you, for this great effort 🙏

  • @ShubhamKumar-e6n1z
    @ShubhamKumar-e6n1z 8 днів тому

    Hi there, I am thanking you from the bottom of my heart. Your content is really helpfull for many tech enthusiast. If it is possible for you, Please bring ecommerce project till deploying on the hostinger VPS with the same tech stack that you have used in this part and in the next part. We all hope that we will get it very soon.

  • @vikramjagtap6631
    @vikramjagtap6631 4 місяці тому

    this is just grate to learn soo much from you, thanks man you are the best

  • @johnwayne7726
    @johnwayne7726 4 місяці тому

    abi gerçekten bu içerikler için çok teşekkür ederim, her videodan da kendimi daha da geliştiriyorum.

  • @CodeVcut
    @CodeVcut 4 місяці тому +2

    Great project! Waiting for Backend.

  • @boysandra266
    @boysandra266 4 місяці тому

    man your tutorial always amazing

  • @AndriiKSK
    @AndriiKSK 4 місяці тому

    Definitely, yes!! I need backend part

  • @franckoABO
    @franckoABO 4 місяці тому

    thank you for this tutorial. very instructive. I am creating a similar project. the functionality that I offer is: dark mode and the class list containing the students of each class.

  • @webabolfazl
    @webabolfazl 4 місяці тому

    it`s very wonderful!!!, thank you Lama

  • @ekurelala7083
    @ekurelala7083 3 місяці тому

    i have loved this work; it's really cool and it's a good one for learning

  • @MyEpilogoue
    @MyEpilogoue 3 місяці тому

    absolutely amazing content, thanks for uploading it

  • @ashrafflefl1435
    @ashrafflefl1435 4 місяці тому

    Best dashboard i ve ever seen , we need the teacher can create questions to students and add students roaster and attendance

  • @honeybee5609
    @honeybee5609 4 місяці тому

    Şafak Bey, ikinci bölüm olarak güzel bir backend projesi olursa süper olur! Pratik yapmam gerekiyor, ve sizin detaylı videolarınız çok yardımcı oluyor. 🙏🏻

  • @francescorusso8149
    @francescorusso8149 4 місяці тому +1

    Great video, easy to follow and very complete! 👍
    For the backend, I'd like to see a NestJS + Drizzle + PostgreSQL (maybe from Neon?) combo, with Lucia-Auth or Next-Auth as the authentication solution.
    I'd rather not see Appwrite or Convex because other channels already do that and those solutions are kind of a black box. I'd like to see the internals when it comes to authentication and data storage in DBs.

  • @sundaya.philips695
    @sundaya.philips695 2 місяці тому +2

    Thank you, @lamadev. I’m wondering why the big calendar data doesn’t display once the month has passed. I have tried rewriting the code to show the calendarEvents, but without success. The events only appear when I change the month to the current one.
    Since the class subject schedule spans four months, how can I ensure that the events remain visible even after the month has passed? I would really appreciate your help with this.

  • @extrouzex1070
    @extrouzex1070 4 місяці тому

    Thanks for such a great surprise 😍

  • @Louis.Coetzee
    @Louis.Coetzee 4 місяці тому

    Looks good! Backend: Nextjs, Drizzle, Neon, Authjs.

  • @HasanAlAsim-d2t
    @HasanAlAsim-d2t 4 місяці тому

    This a great project. For the backend, as it is a next.js project we can finish the backend with prisma and postgresql and the awesome server actions.

  • @pabloarias3907
    @pabloarias3907 4 місяці тому

    ¡Gracias!

  • @Iamvijaypotnuru
    @Iamvijaypotnuru 4 місяці тому +1

    really awesome sir 😍😍😍😍😍😍

  • @micheltsarasoa
    @micheltsarasoa 24 дні тому

    Thanks!

  • @MrSirIsBroke
    @MrSirIsBroke 4 місяці тому +14

    Best Project Sir😊😊
    Please can You add the Administrator Option to Register and Deregister Teacher. . All necessary approval. And the Notification panel from Admin to Teacher >>> Teacher to Students >>> Teacher to Parents 🙏🙏🙏

    • @raymondmichael4987
      @raymondmichael4987 4 місяці тому +1

      @@MrSirIsBroke ; Jaws droping suggestion. I up vote these features

    • @innovatorshome
      @innovatorshome 4 місяці тому +1

      Me too❤❤❤

  • @rakeshroy1633
    @rakeshroy1633 4 місяці тому

    Happy teachers day sir❤❤❤❤❤

  • @mohammad.mohsenhashimi9025
    @mohammad.mohsenhashimi9025 2 місяці тому +1

    calendar events passed to the calendar and imported form data, not displaying in the calendar🤔

  • @vishnupriyan-J
    @vishnupriyan-J 4 місяці тому

    Hi Lama Dev, your channel is awesome able to learn good coding styles and easily able to grab the concepts you Explain. Backend can be in Spring Boot + MySQL hope this can give us new knowledge in Spring Boot.

  • @fistewie
    @fistewie 4 місяці тому

    This looks amazing! Excited to give it a try. Just some feedback on the title, at first I thought this was about ui design, but this is actually developing the front end. Don’t know if it’s worth renaming so you don’t lose potential viewers?

  • @never-mind-guy
    @never-mind-guy 4 місяці тому

    Beautiful work bro

  • @animesenpai5565
    @animesenpai5565 4 місяці тому +4

    Backend: mongo or Express with prisma

  • @ukkashrecords7046
    @ukkashrecords7046 4 місяці тому

    awesome teacher with awesome effort

    • @_Rifat
      @_Rifat 4 місяці тому

      work properly event calender?

    • @ukkashrecords7046
      @ukkashrecords7046 4 місяці тому

      @@_Rifat big calendar is bad lol

  • @rohannair5807
    @rohannair5807 4 місяці тому

    hey please do post up part-2 awaiting to complete the project. Great work hands up!!!

  • @pratyushkumar5740
    @pratyushkumar5740 4 місяці тому

    Use technologies that are commonly used in the industry, such as Node.js/Express.js with MongoDB or any SQL server. Thank you so much for this tutorial; it aligns well with industry standards, which is great for my work at Bosch.

  • @ashish.ksingh8765
    @ashish.ksingh8765 4 місяці тому +2

    Nodejs + Prisma + MongoDB + PostgreSql ( some time compnay use 2 database ) how 2 database will work with application.

  • @axixkhanii4321
    @axixkhanii4321 4 місяці тому +1

    It is awesome For the backend please Use Node js (nest Framework) with any Database (SQL or NON SQL)

  • @Kaldaway
    @Kaldaway 3 місяці тому

    Thank you very much for your work !!!

  • @bekirasmcelik2934
    @bekirasmcelik2934 4 місяці тому

    You are great man! Thanks!

  • @aqibnawaz8060
    @aqibnawaz8060 4 місяці тому +3

    Looking forward to complete it, Looks Great

  • @obinnaudum1727
    @obinnaudum1727 29 днів тому

    Hello lamadev
    Thank you for this tutorial
    Pls I have an issue at 1:31:31, the title isn't showing on my react-big-calendar. Only the time and date that is showing. And the calendarEvents array have the title property in each individual object in the array

  • @papesonko
    @papesonko 4 місяці тому

    Godd job as always !!!

  • @longsovanorak
    @longsovanorak 4 місяці тому +6

    Backend - Express Prisma PostgreSQL

  • @AkashKumar-e3z
    @AkashKumar-e3z 4 місяці тому

    This tutorial is amazing.
    When can we expect the second part.

  • @trezentosfull
    @trezentosfull 4 місяці тому

    1:13:09 if your calendar shows a translation error insert the tag locale="en"

  • @emmanuelakogwu9078
    @emmanuelakogwu9078 4 місяці тому

    You too Amazing to describe with words.
    A project involving stacks like
    Nestjs +redis+ mongodb +prisma+zustand

    • @_Rifat
      @_Rifat 4 місяці тому

      work properly event calender?

  • @Leesdjo
    @Leesdjo 4 місяці тому

    Thank you Lama Dev for amazing tutorial. Just my opinion for the backend tech stack would be postgresql using prisma

    • @_Rifat
      @_Rifat 4 місяці тому

      work properly event calender?

  • @nokmantv594
    @nokmantv594 4 місяці тому

    Nice tutorial of NextJS. Looking forward for video on collapsible menu with submenu sample.

  • @more4you256
    @more4you256 4 місяці тому

    would love to see a postgresSQL / clerck usage for login and DB. Really love that, but ....
    What ever backend you chose, It will be a great educatinal video!
    Thankx!

  • @onwukaebuka5322
    @onwukaebuka5322 4 місяці тому

    Amazing curious to see what the backend looks like

  • @TOGB_Reeper
    @TOGB_Reeper 4 місяці тому

    I am really looking forward for the next part if you will use neon, firebase and drizzle ORM, and maybe even have a separate video of an lms linked to this dashboard so that teachers can create lessons and the like

  • @karimelnemr8610
    @karimelnemr8610 4 місяці тому

    Thank you for your effort and good tutorials it's really helpful, I would like to suggest: Full stack Next.js with Drizzle, PostgreSQL and if we can use Zod and docker will be great. (I saw many web developers suggest Drizzle over Prisma for SQL databases)

  • @ChibuezeLawsonLoctech
    @ChibuezeLawsonLoctech 3 місяці тому +1

    Beautiful tutorial thanks. Please after adjusting the date on the data.ts to current date, the event are not showing up on the calendar kindly assist

    • @MrArod1207
      @MrArod1207 3 місяці тому

      Having same issue, did you figure it out?

    • @ChibuezeLawsonLoctech
      @ChibuezeLawsonLoctech 3 місяці тому

      @@MrArod1207 No. I changed the date to the current date still no way.

    • @MrArod1207
      @MrArod1207 3 місяці тому

      found the answer from commenter below. Thanks. Add a defaultDate={new Date(2024, 9, 12, 9, 45)} or whatever your date is

  • @The-sound-of-silence
    @The-sound-of-silence Місяць тому +1

    I can't thank you enough for this mesmerizing video, I would be very happy if you replied on my question: How can I implement a chat so teachers can send messages to student page inside this app?

  • @berkipekoglu
    @berkipekoglu 4 місяці тому

    Awesome! Thank you!

  • @KenyaDataPlatform
    @KenyaDataPlatform 4 місяці тому

    Lama comes hot ...dont forget to like and subscribe....since we are using latest tech stack its only fair to go Hono, drizzle ORM and Neon(Postgres). I have used this stack and its amazing.

  • @spotnuru83
    @spotnuru83 День тому

    Thank you so much for this tutorial, really amazing and i am trying to do this along the side , I hope I will be able to finish this soon, by the way in this I do not see login and register pages, is it added when the backend is also added in the next video?

  • @siro_himitunoorusuban
    @siro_himitunoorusuban 4 місяці тому

    i love it,thank you Sir.

  • @SachinPorwal-e4x
    @SachinPorwal-e4x 4 місяці тому +1

    Always MERN and Best Project

  • @BilalJan-h9v
    @BilalJan-h9v Місяць тому

    Hi,
    I am stucked at a point where react-big-calendar having and error and can not display the data.
    Warning_ Prop `aria label` did not match. Server: "November 25, 2024" Client: "25 November 2024" error component stach.
    I live in Sweden and date format is correct in data file.(2024 12 12) format