{"id":19731720,"url":"https://github.com/turtlepaws-workshop/horizon-dashboard","last_synced_at":"2025-04-30T02:31:27.883Z","repository":{"id":41490511,"uuid":"479241780","full_name":"Turtlepaw/horizon-dashboard","owner":"Turtlepaw","description":"Horizon's Dashboard \u0026 website","archived":false,"fork":false,"pushed_at":"2024-04-11T01:26:35.000Z","size":5076,"stargazers_count":8,"open_issues_count":6,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-28T01:15:00.407Z","etag":null,"topics":["dashboard","discord","discord-bot","discord-bot-dashboard","discord-dashboard","discord-nextjs","nextjs","nextjs-dashboard","nextjs-discord","nextjs-discord-dashboard","vercel"],"latest_commit_sha":null,"homepage":"https://horizon.trtle.xyz/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Turtlepaw.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-08T04:19:22.000Z","updated_at":"2024-03-21T01:01:54.000Z","dependencies_parsed_at":"2023-02-09T12:46:28.920Z","dependency_job_id":null,"html_url":"https://github.com/Turtlepaw/horizon-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turtlepaw%2Fhorizon-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turtlepaw%2Fhorizon-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turtlepaw%2Fhorizon-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turtlepaw%2Fhorizon-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Turtlepaw","download_url":"https://codeload.github.com/Turtlepaw/horizon-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224194355,"owners_count":17271451,"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":["dashboard","discord","discord-bot","discord-bot-dashboard","discord-dashboard","discord-nextjs","nextjs","nextjs-dashboard","nextjs-discord","nextjs-discord-dashboard","vercel"],"created_at":"2024-11-12T00:22:47.473Z","updated_at":"2025-04-30T02:31:21.773Z","avatar_url":"https://github.com/Turtlepaw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/turtlepaws-workshop/horizon\"\u003e\n    \u003cimg src=\"public/icon_rounded.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eHorizon Dashboard\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Horizon's Custom Dashboard using Next.js \u0026 React.js\n    \u003cbr /\u003e\n    \u003ca href=\"https://horizon.trtle.xyz/\"\u003e\u003cstrong\u003eExplore the demo »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://horizon.trtle.xyz/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/turtlepaw/horizon-dashboard/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/turtlepaw/horizon-dashboard/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n[Horizon's](https://github.com/turtlepaws-workshop/horizon) dashboard. With Discord auth, many pages, and a beautiful design using [Headless UI](https://headlessui.dev/), [Chakra UI](https://chakra-ui.com), and [Fluent Icons](https://www.npmjs.com/package/@fluentui/react-icons).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Turtlepaw%2Fhorizon-dashboard)\n\n## 📃 Features\n\n- 🧾 MIT License\n- 🗝️ Integrable with any bot\n- 📝 Built with TS \u0026 Next.js\n- 📤 Deploy with [Vercel](https://vercel.com/)\n- 🫶 100% open-source\n- 🏗️ Built in Discord Auth\n\n## ☀️ Horizon\n\n[\n   \u003cimg src=\"public/ADD_TO_SERVER.svg\" style=\"width: 300px;\"\u003e\n](https://horizon.trtle.xyz/add)\n\n## 📦 Installation\n\u003cdetails\u003e\n  \u003csummary\u003eExpand\u003c/summary\u003e\n  \n   ## Setting up\n\n   1. Ensure you have `git`, `yarn`, `npm` \u0026 `node` installed\n   2. If you do not already have Vercel CLI, run `yarn global add vercel` (or, if using `npm`, you can run `npm i -g vercel`).\n   3. If you are not already logged in, run `vercel login` and finish that process.\n   4. Fork this project and clone it with `git clone \u003cgithub url of fork\u003e`\n   5. Finally, run `npm install` or `yarn`\n\n   ## Discord Credentials\n\n   1. First things first, we will need some special keys from Discord. Head to [discord.com/developers](https://discord.com/developers/applications) and hit \"New Application\" in the top right or click an existing application.\n   2. Secondly, open your application and copy the \"Client ID\", \"Bot Token\" and \"Client Secret\" – we will need these later so keep them safe. It is important not to share the Client Secret or your bot token with anybody, too.\n   3. Third, during development, you will need to make a file called `.env`. In here we will securely store our sensitive information in a   manner that won't be commited (meaning _pushed_ to Git for all eyes to see).\n   4. In this file, you need to add the Client ID and Client Secret. Optionally, you can add the APP URI and JWT Secret but these are not    important for development. You will get a warning in the console, though, if you do not change these values. The reason behind that is    so that you do not forget to change them in production.\n      1. The file should look something like this\n      ```\n      CLIENT_ID=999999999999999999\n      CLIENT_SECRET=yDzjb6CEC7mfhCCGQmr8fKtxw_as9CG4\n      ```\n      2. If you want to rid of the error messages, you can add `JWT_SECRET` (which can be anything in **development** – this does matter in  production, however) \u0026 `APP_URI` (which in most occasions should be `http://localhost:3000` unless you know what you are doing).\n   5. You will now want to head over to the Discord developer dashboard again, select \"OAuth2\" in the sidebar, and add `http://  localhost:3000/api/oauth` as a redirect URI.\n\n   ## Production Environment\n\n   1. Next up, head to [vercel.com](https://vercel.com/) and hit \"Import Project\"\n   2. Select \"Import Git Repository\"\n   3. Enter the URL of your fork, and hit continue\n      1. We now need to set up your `.env` file, but on the production vercel deployment side.\n   4. When it loads, click on \"Environment Variables\" and one by one, add `CLIENT_ID`, `CLIENT_SECRET`, etc...\n   5. It's crucial here that you add `JWT_SECRET` \u0026 `APP_URI` as these are the variables that the Discord OAuth will use to sign your jwt    token and handle the Discord redirection\n      i. `APP_URI` will look like `https://my-app.vercel.app` (including the protocol)\n      ii. `JWT_SECRET` should be a long string of cryptographically generated characters. The more the merrier. [passwordsgenerator.net]  (https://passwordsgenerator.net/) is a great start.\n   6. After this, you can hit deploy and watch your app build to production! Congrats.\n   7. Finally, open discord developer dashboard and add another redirect URI which is your `APP_URI` with `/api/oauth` added to the end.\n\u003c/details\u003e\n\n## ❤️ Credits\n\n- [Alii](https://github.com/alii/) created [the Next.js Discord OAuth repository](https://github.com/alii/nextjs-discord-oauth/) which is used here.\n- [Turtlepaw (ofc)](https://github.com/turtlepaw) I built most of the dashboard (like 95% of it.)\n- [Vercel](https://vercel.com/) for providing **✨ outstanding ✨** hosting.\n- [Github](https://github.com) for hosting the source code.\n\n## ✅ ToDo\n- [ ] Create a custom component to select a guild setting category\n- [x] Render guilds with icons and more to the right in a container\n- [ ] Get API running \u0026 intergrate API with the dashboard\n- [ ] Create an embed page `/embed/create` and `/embeds`\n- [x] Create a changelog on the site\n- [ ] Create custom markdown formatter ([here](https://npm.im/@horizon/markdown))\n- [x] Create a changelog in a markdown file\n- [ ] Add tabs to `/guilds/:id`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturtlepaws-workshop%2Fhorizon-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturtlepaws-workshop%2Fhorizon-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturtlepaws-workshop%2Fhorizon-dashboard/lists"}