RBY Dashboard

A self-hosted dashboard for managing a collection of development tools and various URLs, either standalone or linked to projects.

View Demo (Requires login, locked temporarily) · Report Bug · Request Feature

Table of Contents

1. The Project
   • Video Demonstration
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. License
6. Contact

The Project

The goal of this project was to build a dashboard to collect and manage urls from various sources, allowing for easy organization and linking them to specific projects. Revisiting an older project after a long period can make it challenging to quickly grasp the codebase. By gathering urls for tools, frameworks, libraries, etc. in one place, I can easily track what I've used in the past and what I may want to consider using in future projects. In the project section I also have handy direct links to live demos and github repos.

I specifically did not use React Query for this, as I wanted to learn to control state management and syncing local vs remote state. I might consider converting to React Query in the future and keep a branch with the current state management. TLDR: Use React Query, what a mess.

The project is ment to be self-hostable. In the current state it spins up a persistent sqlite database in developement mode, but uses TursoDB (Cloud) in production. As of now, it can be hosted serverlessly if needed, as it doesnt need a server to run with the current config.

(back to top)

Video Demonstration

View the video on Mac/PC

Watch the mobile version here

(back to top)

Built With

• Next.js (Framework)
• Tailwind (CSS)
• Turso (DB)
• Kinde (Auth)
• Drizzle (ORM)
• Zod (Validation)
• Zustand (State Management)
• Node HTML Parser

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

When running in a local development environment, a persistent sqlite database is initiated inside the .src/ folder. When running a production environment a external Turso link is required.

By default, registration for new users is disabled and a new users has to be created manually your dashboard at Kinde.

1. Clone the repo

   git clone https://github.com/rubenodegard/rby-dashboard.git

2. Install NPM packages

   npm install

3. Rename example.env.local to .env.local

4. Populate .env.local with the correct variables.

   # From Turso Dashboard
   TURSO_DATABASE_URL=
   TURSO_AUTH_TOKEN=
   
   # From Kinde Dashboard
   KINDE_CLIENT_ID=
   KINDE_CLIENT_SECRET=
   KINDE_ISSUER_URL=
   KINDE_SITE_URL=
   KINDE_POST_LOGOUT_REDIRECT_URL=
   KINDE_POST_LOGIN_REDIRECT_URL=
   

5. Run the application

   Local:

   npm run dev

   Production:

   npm run build
   npm run start

(back to top)

Roadmap

App

• Basic UI Structure
• CI/CD: Linting and Formatting with Github Actions (can also be ran locally in dev, npm run :ci:biome)
• Authentication w/Kinde (Registration disabled by default for self hosting)
• Setup Database Schema (Local and Production)
• Local Database (persistent local database is created and automaticly started in developer environment)
• Production Database (Turso)
• API Route: Fetch Metadata by URL
• Server Actions (CRUD actions against database)
• Protect API routes and Server Actions with Authorization
• Timeouts for database and API calls
• Custom Login Page
• Animations
• Confirmation dialogs on critical actions

Collections

• Predefined collections; "All" and "Favorites"
• Add a URL to a collection (existing or new category)
• Add a URL to Favorites (predefined collection)
• Delete a URL from a collection
• Preview metadata from a specified url
• Fetch metadata from a specified url
• Collapsed/Extended view option in Collections tab

Projects

• Add a Project: Name (required), Github (optional) and Live Demo (optional)
• Edit a Project's Options (Name, Github, Live Demo)
• Add a URL from a Collection to a Project
• Delete a URL from a Project
• Delete a Project

Considerations

• Add Notes to a Collection Item?
• Add Notes to a Project?
• Fetch and display the README.md from a optional Github Repo on a Project (automatically)

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/42069)
3. Commit your Changes (git commit -m 'Add some 42069')
4. Push to the Branch (git push origin feature/42069)
5. Open a Pull Request

(back to top)

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Ruben Odegard (Ruben Ødegård) - Homepage - contact@rubenodegard.com

Project Link: https://github.com/rubenodegard/rby-dashboard

(back to top)