![Logo](public/icon_rounded.png)
Horizon's Custom Dashboard using Next.js & React.js
Explore the demo »
View Demo
·
Report Bug
·
Request Feature
Horizon's dashboard. With Discord auth, many pages, and a beautiful design using Headless UI, Chakra UI, and Fluent Icons.
- 🧾 MIT License
- 🗝️ Integrable with any bot
- 📝 Built with TS & Next.js
- 📤 Deploy with Vercel
- 🫶 100% open-source
- 🏗️ Built in Discord Auth
Expand
- Ensure you have
git
,yarn
,npm
&node
installed - If you do not already have Vercel CLI, run
yarn global add vercel
(or, if usingnpm
, you can runnpm i -g vercel
). - If you are not already logged in, run
vercel login
and finish that process. - Fork this project and clone it with
git clone <github url of fork>
- Finally, run
npm install
oryarn
- First things first, we will need some special keys from Discord. Head to discord.com/developers and hit "New Application" in the top right or click an existing application.
- 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.
- 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). - 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.
- The file should look something like this
CLIENT_ID=999999999999999999 CLIENT_SECRET=yDzjb6CEC7mfhCCGQmr8fKtxw_as9CG4
- 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) &APP_URI
(which in most occasions should behttp://localhost:3000
unless you know what you are doing).
- 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.
- Next up, head to vercel.com and hit "Import Project"
- Select "Import Git Repository"
- Enter the URL of your fork, and hit continue
- We now need to set up your
.env
file, but on the production vercel deployment side.
- We now need to set up your
- When it loads, click on "Environment Variables" and one by one, add
CLIENT_ID
,CLIENT_SECRET
, etc... - It's crucial here that you add
JWT_SECRET
&APP_URI
as these are the variables that the Discord OAuth will use to sign your jwt token and handle the Discord redirection i.APP_URI
will look likehttps://my-app.vercel.app
(including the protocol) 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. - After this, you can hit deploy and watch your app build to production! Congrats.
- Finally, open discord developer dashboard and add another redirect URI which is your
APP_URI
with/api/oauth
added to the end.
- Alii created the Next.js Discord OAuth repository which is used here.
- Turtlepaw (ofc) I built most of the dashboard (like 95% of it.)
- Vercel for providing ✨ outstanding ✨ hosting.
- Github for hosting the source code.
- Create a custom component to select a guild setting category
- Render guilds with icons and more to the right in a container
- Get API running & intergrate API with the dashboard
- Create an embed page
/embed/create
and/embeds
- Create a changelog on the site
- Create custom markdown formatter (here)
- Create a changelog in a markdown file
- Add tabs to
/guilds/:id