for UI library: used shadcn

Implementation of the lucide icon library lucide react for react applications

className: cn("navLink", { "hidden md:flex": link.hideOnMobile }), what cn does is that it will join the classnames together and return a string of classnames and removes duplicates

If You want to pass dynamic styles as props from a component we can use cn {cn("relative flex items-start w-full gap-x-2", className)}

for shadcn darkmode we have to use theme first install npm install next-themes

(auth) then create a file called layout and folder called login and inside that folder create a file called page.tsx. now evenrything under the (auth) follow the layout(AuthLayout)

for SVG logo: https://www.logo.wine/logo/App_Store_(iOS)

frames mockup: https://codesandbox.io/p/sandbox/react-device-frameset-demo-forked-s577w4?file=%2Fsrc%2FApp.js%3A13%2C55-13%2C65

https://codesandbox.io/p/sandbox/mockuuupppp-forked-fe8w11?file=%2Fsrc%2FApp.js (with slide show)

useMount(): costom hook help to prevent the hydration issue. it will run only on the client side. it will run only once when the component is mounted. it will not run on the server side

for file upload I used: https://uploadthing.com/dashboard (s3 bucket) like features

https://www.npmjs.com/package/react-timeago (Used for the time stamps)