Build a Modern Analytics Dashboard with Next.js 14, React, Tailwind - 2024

So I've always been a fan of beautiful dashboards, and what better way to build one together than building an analytics system for your personal website. Hope you enjoy!

-- my links

[Jay-pjob]

Please make a video on how to plan building web apps, A-Z literally from brainstorming, wireframing designing and coding. This will help me a lot.

[synthesis]

I'm watching your vids since 2k subs. Now. you got your silver play button. Kudos!

[hqasmei]

Freaking amazing! Great job Josh!! 👏 Needed this for my web apps :)

[conceptilumn]

Hello, Josh, great tutorial! I think it'd be really cool if you could make one about adding maps to those dashboards! I think maps are a good way for visualizing data when it comes to working with different regions, and I think it adds a lot of value to a application like that!

[JayminProd]

Great Tutorial, sometimes the classnames are a bit fast but with the lens feature of vscode its understandable

[randmtv]

2:02 but they did. There are "--use-pnpm", "--use-yarn", "--use-npm", "--use-bun" flags to specify what to use to bootstrap the app. They might potentially autodetect it as well if you use something other than "npx" to initialize the command. In their docs there is a "pnpm create next-app" listed as well.

[khaledsanny]

watched it all... now am gonna reimplement myself ... thkx Josh and congrat for the silver play btn BTW

[matematicafacile]

Hi Josh, I'm a super fan of you. Really really appreciate the effort you put on the channel.

I have a question that I think would be usefull to all of us following you.

When you need to build something you've never built before, what's your process for figuring out what's the best, most clean way of doing that?

'Cause clearly you can come up with some seriously clean code (way more than me for sure) which is one of the thing I admire of you the most.

Thanks bro
Keep it up with the great work
It's very inspiring

[hahahahah]

Is these a benefit to using OOPS patern while designing the api? Or will simply exporting the functions while accepting custom values as parameters also be the same?

[prithviye]

you bring beauty to coding. something pretty rare these days

[rajfekar]

I am facing problem with prisma. Prisma client not support vercel edge function or middleware. What can I do now?

[_kadirmetin]

Josh thanks for the video. But I have an idea in my mind, how can I make this admin panel fully functional (dynamically receiving the data you mentioned)? Can you help me with this?

[ivangechev]

is it better to use toSorted on the fetched variable containing all promises instead of mutating it ?

[seathblazertiger]

Hey great tutoorial. I tried running the exact code for middleware code at 6.26 but unable to see anything in the console. Where could the issue be stemming from ? The page compiles and renders fine on localhost but just can't seem to get the middleware to catch the request.

Tech stack - Bun, NextJs 14, VScode

Thanks.

[DhangMaker]

correct me if i am wrong. Page views count the number of times a page is viewed. Visits count the number of sessions for visitors.

[NicGamer]

Nice Josh! One question, how do you make these showcase videos, like the one in 1:22:48 with that big cursor and smooth animations? Is there a tool for this? I have seen other videos like that showcasing other projects and would like to know how they do it. Thank you!

[mocambiquemaputomatola]

Hello, can you help me? I intend to develop an academic management system using Next.js 14, and I want to know how I can update students' grades using an Excel file that contains the grades for all assessments and the corresponding student numbers for each grade. Considering that each student accesses the system using their student number as a username and a password to access the student area, and all information has to be stored in the PostgreSQL database management system, I have a question: can I use PostgreSQL from Vercel or Supabase?

[zaritzki]

Hello Josh, is this possible only run or track if user visited details of one item.. for example localhost/item/:id? and save all the details to db/monodogb? Thanks!

[gbrachetta]

Unfortunately the app doesn't collect data when deployed, only in development for me.

[sylvesterasiedu]

Hello, thanks for you contents and all the hard work you put in. Can you create a version that uses django and nextjs?