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

  • @Jay-pj7ob
    @Jay-pj7ob3 ай бұрын

    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

    @setsunaicodes

    3 ай бұрын

    Would also appreciate to see other workflows so I can get inspiration to improve mine

  • @abcproduction6819

    @abcproduction6819

    3 ай бұрын

    That’s gay bro

  • @Jay-pj7ob

    @Jay-pj7ob

    3 ай бұрын

    @@abcproduction6819 ?

  • @TNK-pj2wh

    @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

    @latituddev7884

    3 ай бұрын

    @@abcproduction6819 what tf

  • @synthesis44
    @synthesis443 ай бұрын

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

  • @hqasmei
    @hqasmei3 ай бұрын

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

  • @khaledsanny4817
    @khaledsanny48173 ай бұрын

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

  • @rand0mtv660
    @rand0mtv6603 ай бұрын

    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

    @aramshiva

    3 ай бұрын

    You can also do yarn create next-app

  • @user-vd3ph6zh8q

    @user-vd3ph6zh8q

    3 ай бұрын

    You can just replace 'npx' with 'pnpm dlx'

  • @matematicafacile8107
    @matematicafacile81073 ай бұрын

    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

  • @conceptilumn
    @conceptilumn3 ай бұрын

    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

    @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.

  • @JayminProd
    @JayminProd2 ай бұрын

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

  • @ectoplasm1285
    @ectoplasm12853 ай бұрын

    thanks, will do it in the morning

  • @prithviye
    @prithviye24 күн бұрын

    you bring beauty to coding. something pretty rare these days

  • @soheilweb
    @soheilweb3 ай бұрын

    Happy for you🎉

  • @bukhariauwal
    @bukhariauwal3 ай бұрын

    This man is insane in a good way 🎉❤

  • @ismaeltinta6118
    @ismaeltinta61183 ай бұрын

    congratulations for you 100K here to the MILI

  • @haha7836hahah
    @haha7836hahah3 ай бұрын

    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?

  • @hakanaki
    @hakanaki3 ай бұрын

    Congrats Josh 🎉🎉

  • @Nic13Gamer
    @Nic13Gamer3 ай бұрын

    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

    @andre-vitorio

    3 ай бұрын

    That's screen.studio

  • @_kadirmetin
    @_kadirmetin3 ай бұрын

    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?

  • @ivangechev4243
    @ivangechev42433 ай бұрын

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

  • @DhangMaker
    @DhangMaker3 ай бұрын

    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.

  • @rand0mtv660
    @rand0mtv6603 ай бұрын

    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

  • @seathblazertiger
    @seathblazertiger3 ай бұрын

    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.

  • @gbrachetta
    @gbrachetta3 ай бұрын

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

  • @schlumen488

    @schlumen488

    3 ай бұрын

    Same for me, deployed on vercel

  • @rajfekar1514
    @rajfekar15143 ай бұрын

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

  • @prashlovessamosa
    @prashlovessamosa3 ай бұрын

    Thanks buddy.

  • @zaritzki
    @zaritzki29 күн бұрын

    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!

  • @nishantshah_
    @nishantshah_2 ай бұрын

    Please write unit tests for your react/nextjs projects. it will be a great help to most people

  • @ruggeddog3103
    @ruggeddog31033 ай бұрын

    cograts josh, we're friends

  • @kashmirtechtv2948
    @kashmirtechtv29483 ай бұрын

    What chart library yuu have used?

  • @jagadish3829
    @jagadish38293 ай бұрын

    bro please do more tutorial videos i loved the redis crash course ngl..waiting for upcomming tutorials

  • @mocambiquemaputomatola8238
    @mocambiquemaputomatola82383 ай бұрын

    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?

  • @adrian-vy3py
    @adrian-vy3py3 ай бұрын

    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.

  • @darrenpeng01
    @darrenpeng013 ай бұрын

    would be awesome if you started teaching about sveltekit too

  • @sylvesterasiedu
    @sylvesterasiedu3 ай бұрын

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

  • @DavidM_
    @DavidM_3 ай бұрын

    1:42 I wonder if there's some project in universe where Josh said No to TypeScript 🤔

  • @excalibur2417
    @excalibur24173 ай бұрын

    The country tracking only works when you deploy to vercel tho, it's vercel exclusive

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt3 ай бұрын

    thanks video

  • @redbeardjunior
    @redbeardjunior2 ай бұрын

    If you choose to use mongodb with mongoose how would you do that ?

  • @nickwoodward819
    @nickwoodward81925 күн бұрын

    Does this work with *any* project? or does it have to be an existing nextjs project?

  • @akarikev
    @akarikev3 ай бұрын

    tbh I wasn't ready for this 😅

  • @gadgetboyplaysmc
    @gadgetboyplaysmc3 ай бұрын

    1:55 But there is a way to not use npm. Just `pnpm create next@latest` or `bun create next@latest`

  • @arnabroy5352
    @arnabroy53523 ай бұрын

    "TypeError: Cannot read properties of undefined (reading 'startsWith') " why im getting this error in redis.ts file ? can anyone explain and solve this

  • @ralkey
    @ralkey3 ай бұрын

    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

  • @exerge9202
    @exerge92023 ай бұрын

    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 🙏

  • @umaid7877
    @umaid78773 ай бұрын

    Hey josh 🙋

  • @joshtriedcoding

    @joshtriedcoding

    3 ай бұрын

    yoo

  • @AmanKumar-ym1iw
    @AmanKumar-ym1iw3 ай бұрын

    Would love to see you working over a langchain based project.

  • @joshtriedcoding

    @joshtriedcoding

    3 ай бұрын

    Done that on a SaaS project in the past! It's the "quill" one :)

  • @AmanKumar-ym1iw

    @AmanKumar-ym1iw

    3 ай бұрын

    @@joshtriedcoding Ohh my bad. Have a great day ;)

  • @targettech2578
    @targettech25783 ай бұрын

    What will I learn firmly that will make me a jnr frontend engineer

  • @mpglearncode
    @mpglearncode3 ай бұрын

    Can you make a Tutorial for subdomains?

  • @AbhiShake-pl3cf
    @AbhiShake-pl3cf3 ай бұрын

    Btw, js has private now and it also hides the prop while stringifying. we dont need that private keyword

  • @shafiqrezal2855
    @shafiqrezal2855Күн бұрын

    You know the backend is good when the developer no need to be paid to use it. Again this is not sponsored!

  • @secondmillennium16
    @secondmillennium163 ай бұрын

    snowball-analytics 🤔

  • @nikhilhl892
    @nikhilhl8923 ай бұрын

    First like❤

  • @Santiego
    @Santiego3 ай бұрын

    Redis? Good luck with the costs behind a real app...

  • @soheilweb
    @soheilweb3 ай бұрын

    First View 🎉

  • @user-dt5us5bz4e
    @user-dt5us5bz4e3 ай бұрын

    frist comment

  • @targettech2578
    @targettech25783 ай бұрын

    Why don't you like npm

  • @le0pin

    @le0pin

    2 ай бұрын

    why u like npm

  • @wildrap9804
    @wildrap98043 ай бұрын

    No good only for fun. Not for real project based

Келесі