{"id":15117629,"url":"https://github.com/aryankholqi/nextUI-Dashboard","last_synced_at":"2025-09-27T23:31:19.193Z","repository":{"id":245989865,"uuid":"819760098","full_name":"aryankholqi/nextUI-Dashboard","owner":"aryankholqi","description":"NextUI v2.4.6 Dashboard with React","archived":false,"fork":false,"pushed_at":"2024-08-01T17:15:30.000Z","size":47190,"stargazers_count":66,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-09-26T01:56:45.650Z","etag":null,"topics":["admin-dashboard","admin-panel","beautiful","clean-code","dashboard","dashboard-templates","minimalist","nextui","react-hook-form","reactjs","tailwind","tanstack-query","tanstack-router","template"],"latest_commit_sha":null,"homepage":"https://nextui-dashboard-xi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aryankholqi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"custom":null}},"created_at":"2024-06-25T06:40:02.000Z","updated_at":"2024-09-23T08:36:32.000Z","dependencies_parsed_at":"2024-07-15T13:15:37.145Z","dependency_job_id":"99e6473e-25b4-4837-832a-7ace884f7aa4","html_url":"https://github.com/aryankholqi/nextUI-Dashboard","commit_stats":null,"previous_names":["aryankholqi/nextui-dashboard"],"tags_count":3,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryankholqi%2FnextUI-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryankholqi%2FnextUI-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryankholqi%2FnextUI-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aryankholqi%2FnextUI-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aryankholqi","download_url":"https://codeload.github.com/aryankholqi/nextUI-Dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234470290,"owners_count":18838628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","admin-panel","beautiful","clean-code","dashboard","dashboard-templates","minimalist","nextui","react-hook-form","reactjs","tailwind","tanstack-query","tanstack-router","template"],"created_at":"2024-09-26T01:46:00.826Z","updated_at":"2025-09-27T23:31:13.280Z","avatar_url":"https://github.com/aryankholqi.png","language":"TypeScript","funding_links":[],"categories":["Boilerplates / Templates"],"sub_categories":[],"readme":"# NextUI-Dashboard (Starter Version)\n\n**Glad you chose us to develop your project.**\n\n## Skills\n\n- React.js\n- Typescript\n- Tanstack/react-router\n- Next-UI\n- Farmer-motion\n- Tailwind\n- Tanstack/react-query\n- axios\n- clsx\n- js-cookie\n- react-hot-toast\n- Zustand\n- react-hook-form\n- react-helmet\n- recharts\n- react-i18next\n\n## Run Project\n\nFirst of All for running the project you should do these three steps:\n\n```\ngit clone https://github.com/aryankholqi/nextUI-Dashboard.git\n```\n\n```\ncd nextUI-Dashboard\npnpm install\n```\n\n```\npnpm run dev\n```\n\nok... the project is running on your local.\n\n## Login\n\nAt first you face the login page, because the nature of dashboard panels, which is **authenticated**:\n\n![1720134341919](image/README/login.png)\n\n\u003e We've used **fakestoreapi** login api to get an access token for working like a real authorization scenarios **(Note that you should always login with this username and password to access to dashboard )**. We've managed token with **js-cookie** library.\n\n## Dashboard (Home)\n\nwell, when you successfully logged in, you'll face the dashboard layout which we really love it:\n\n![1720134683209](image/README/dashboardDark1.png)\n\n![1720134730641](image/README/dashboardLight1.png)\n\n![1720134770041](image/README/dashboardDark2.png)\n\n![1720738449974](image/README/dashboardLight2.png)\n\n## Folder Structure\n\n![1720738595211](image/README/1720738595211.png)\n\n\u003e We want to go straight forward to src folder:\n\n- **assets** =\u003e includes all **icons** and **images** we've been used in the project\n- **components** =\u003e All sections are devided into **template/module** component:\n  1. **Templates**: All components which are only used only in **a single route** (page)\n  2. **Modules**: All components which are used at least in 2 routes or **entire the project** (like Sidebar, Topbar)\n- **configs** =\u003e libraries like **tanstack/router**, **tanstack/query ** , ... have default configs that you can customize them, in here we customized **createRouteFile** of tanstack/router for handling if user is authenticated to navigate through our authorized routes.\n- **constants** =\u003e nothing to explain. so easy XD\n- **hooks** =\u003e in here we developed some custom hooks which is used by components:\n  1. api: for each api we've developed a custom tanstack/query hook to manage api call and we used it inside the component which that api should be called\n- **interfaces** =\u003e yeaaah. the project is **typescript** supported. we've managed all interfaces that we needed here.\n- **layouts** =\u003e as you might noticed this project has 2 different layouts. one for Login and the other one is for the whole dashboard. so we have **AuthLayout.tsx** for Login route and **DashboardLayout.tsx** for all other routes (authorized ones)\n- **mock** =\u003e for some components which need data from api, we simulated it as mock but it's not an api, it's just a function which returns the data the component wants\n- **pages** =\u003e each route means a page to us. so for each page we've created a folder in here, its name is matched by the pathname of the url. (we've treated like next.js pages route here XD)\n- **routes** =\u003e if you've never worked with tanstack/router, don't worry! the routing system is as easy as it is. for each route you wanna create, you should just create a file matched with the name of the route. it will automatically do the things for you ;)\n- **services** =\u003e the api requests all are in here. we've developed an axios interceptor called **httpService** to handle the requests.\n- **stores** =\u003e for managing the global states like **isSidebarExpanded** we've used **zustand**, all states and the reducers handled here.\n- **utils** =\u003e some functions which may be used in different components. so we've developed them here. like **isAuthenticated function**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryankholqi%2FnextUI-Dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faryankholqi%2FnextUI-Dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryankholqi%2FnextUI-Dashboard/lists"}