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!
This project on GitHub: github.com/joschan21/next-ana...
-- my links
Newsletter: www.joshtriedcoding.com/
Discord: / discord
GitHub: github.com/joschan21
Пікірлер: 77
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.
@setsunaicodes
3 ай бұрын
Would also appreciate to see other workflows so I can get inspiration to improve mine
@abcproduction6819
3 ай бұрын
That’s gay bro
@Jay-pj7ob
3 ай бұрын
@@abcproduction6819 ?
@TNK-pj2wh
3 ай бұрын
100% agree! a walkthrough like this would be incredibly valuable. It's one thing to learn the coding skills, but understanding the whole process from idea to launch is where things get tricky
@latituddev7884
3 ай бұрын
@@abcproduction6819 what tf
I'm watching your vids since 2k subs. Now. you got your silver play button. Kudos!
Freaking amazing! Great job Josh!! 👏 Needed this for my web apps :)
watched it all... now am gonna reimplement myself ... thkx Josh and congrat for the silver play btn BTW
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.
@aramshiva
3 ай бұрын
You can also do yarn create next-app
@user-vd3ph6zh8q
3 ай бұрын
You can just replace 'npx' with 'pnpm dlx'
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
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!
@darkcss1054
3 ай бұрын
Check out deck gl. I've been using it on my company, the Python wrapper that is beacause I can't code in JavaScript yet 😭. Still, ppl are loving it.
Great Tutorial, sometimes the classnames are a bit fast but with the lens feature of vscode its understandable
thanks, will do it in the morning
you bring beauty to coding. something pretty rare these days
Happy for you🎉
This man is insane in a good way 🎉❤
congratulations for you 100K here to the MILI
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?
Congrats Josh 🎉🎉
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!
@andre-vitorio
3 ай бұрын
That's screen.studio
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?
is it better to use toSorted on the fetched variable containing all promises instead of mutating it ?
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.
9:25 browsers don't actually provide that info. Your deployment/hosting provider can potentially provide this. Vercel for example does provide this info. This is not something exposed by the browser
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.
Unfortunately the app doesn't collect data when deployed, only in development for me.
@schlumen488
3 ай бұрын
Same for me, deployed on vercel
I am facing problem with prisma. Prisma client not support vercel edge function or middleware. What can I do now?
Thanks buddy.
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!
Please write unit tests for your react/nextjs projects. it will be a great help to most people
cograts josh, we're friends
What chart library yuu have used?
bro please do more tutorial videos i loved the redis crash course ngl..waiting for upcomming tutorials
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?
Hey Josh, I am a business informatics student from Germany and I would love to know how you got into typescript and basically the whole web app stuff. At uni I learn Java but I am more into building web apps so I would love to know if you have any tips for me on how to start with building web apps, that would be great. Maybe you also have resources that you recommend. Do you study comp. science? And if so at what university? I hope that you will read this comment (:. As always nice videos. Greetings from Germany.
would be awesome if you started teaching about sveltekit too
Hello, thanks for you contents and all the hard work you put in. Can you create a version that uses django and nextjs?
1:42 I wonder if there's some project in universe where Josh said No to TypeScript 🤔
The country tracking only works when you deploy to vercel tho, it's vercel exclusive
thanks video
If you choose to use mongodb with mongoose how would you do that ?
Does this work with *any* project? or does it have to be an existing nextjs project?
tbh I wasn't ready for this 😅
1:55 But there is a way to not use npm. Just `pnpm create next@latest` or `bun create next@latest`
"TypeError: Cannot read properties of undefined (reading 'startsWith') " why im getting this error in redis.ts file ? can anyone explain and solve this
I'm stuck at about 20 minutes because I keep getting this error: Error [TypeError]: edgeFunction is not a function AND IDK WHAT IT MEANS
Josh, can you please make video on next auth? Others have done but they all do the simple google provider or GitHub but I want detailed one with DB and passwordless and be able to store other data related to user 🙏
Hey josh 🙋
@joshtriedcoding
3 ай бұрын
yoo
Would love to see you working over a langchain based project.
@joshtriedcoding
3 ай бұрын
Done that on a SaaS project in the past! It's the "quill" one :)
@AmanKumar-ym1iw
3 ай бұрын
@@joshtriedcoding Ohh my bad. Have a great day ;)
What will I learn firmly that will make me a jnr frontend engineer
Can you make a Tutorial for subdomains?
Btw, js has private now and it also hides the prop while stringifying. we dont need that private keyword
You know the backend is good when the developer no need to be paid to use it. Again this is not sponsored!
snowball-analytics 🤔
First like❤
Redis? Good luck with the costs behind a real app...
First View 🎉
frist comment
Why don't you like npm
@le0pin
2 ай бұрын
why u like npm
No good only for fun. Not for real project based