Personal all-in-one panel

Because I hate load times (cloudflare ugh), and not owning my own stuff

[!NOTE]

Just started this repo, will be migrating features I've built over so it's far from done. And probably never will be.

This is a personal project that combines various tools and features I've built over the years. It's a one-stop solution for managing personal finance, secure file storage, code snippets, and tools I've built for myself such as URL/text extractors, (reverse) geolocation finder, SVG to CSS-pseudo elements, HTML to JSX/TSX converter, and loads more probably.

🚀 Demo

Visit the demo

The design im working with

🧐 Features

• Frontend: NextJS 15, TypeScript
• ORM: Drizzle ORM
• Auth: Clerk
• Database: Turso (SQLite)
• State management: Zustand
• UI Libraries: Radix, ShadCN-ui, Framer Motion, TailwindCSS + custom SCSS
• Forms: React Hook Forms
• Validation: ZOD
• Analytics: Posthog
  
• i18n: i18next
• Blog/MDX: contentlayer

🐻 Packages

• useHooksPackage
  • useFavicon (dynamically update the favicon) could be paired with the logic of changing tab-title when switching tabs -> Phind Search
  • useLocalStorage
  • useGeoLocation - Maybe when extending my own reverse geo app? -Zustand - State management
    
• React Query ? - Data fetching (trying/PoC vs server actions/api calls)
  

🐻 Big core overhauls that need to be done

[!NOTE] On hold. After a few days I couldn't build with zero answers on google, deep down the dep. tree.

• React 19 upgrade
  • React 19 release notes
• NextJS -15 upgrade]
  • NextJS -15 release notes

🐻 Tools that can be useful

• AI prompt optimizer(https://promptperfect.jina.ai/interactive)]
• HTML to skeleton loader for Tailwind
  • Finance maybe app has a cool modular way of creating skeletonsusage Another skeleton helper

🐻 Interesting and/or very cool/unique components

• Cool Tailwind only script!
• Enhanced shadn button
• File vault - shadcn
• File vault v2 - shadnc
• Magic UI
• Shad Rich text editor AWESOME
• Shadcn chat
• Shadcn country dropdown + zustand state
• Shadcn DND
• Shadcn extensioned
• TomIsLoading
• Way to fancy GSAP/Framer stuff
• ?? components
• own components showcase
• syntaxUI

🐻 Design inspiration

• Nice chat (ai) design/wysiwyg
• SaaS landing with dope bento glass style
• Vercel blog page with cool gradient
• Supabase dashboard - loaders, collapse menu
• Fancy ?all-in-one? dashboard

Too fancy ui stuff

• Spark effect (source)
• Dark glow button (source)
• Glow card (source
• Menu animation (source)
• Card anchor effect (source)
  

🛣️ Roadmap and To-Do

Short-Term Goals

• Initial setup
• Add user authentication
• Upgrade to the new react compiler (Next 15 + React 19)
• Implement dark mode - Done, but light mode is far from usable.

x-term goals. Stuff that I just want to do, but only so much time in a day.

🚨 = highest priority ⚡ = medium priority 🛣️ = low priority (will probably never happen)

• [✔] Localization (always in progress)

• [✔] Add pretty flags <- did not use this package, will maybe later

• [🛣️] Migrate geolocation and re-create UI

• [60%🛣️] Create landing page

• [] Add blog feature which is actually good and not half assed. Also for release notes/changelog. Only know contentlayer. Maybe build a custom blog engine with my own CMS. if (contentlayer + markdown)

  • Retrieve date from when MDX file was created/last edited.
  • basic structure. Date, title, author, content, tags, view count, likes/dislike.
  • Allow visitors (rate limit instantly to prevent multiple likes, or try to) to like/dislike posts
  • implement view counter. Per ip or so, not session. Think of a accurate way.
  • share blog posts on social media
  • Syntax highlighting
  • Add animated sidebar scroll for progress.
  • Add reading duration to blog posts.
  • categories via tags?
  • Find out how to make the global site search index the bog titles, tags, and content
  • Allow users to comment and think of a way to implement a comment system for non-logged in users w/o spam.
  • Make sure its semantics are correct.
  • Make sure it's accessible.
  • Make sure SEO we used all the bells and whistles we can find.
  • /blog landing page with categories.
  • /blog/categories with landing for the categories/tags
  • /blog/categories/params for the actual blog. ....
  • I'd rather have my blogs in my database, so first research how much harder that is than a file based system.
  • [ ]

• [🛣️] Migrate URL tool - finished version, ugly UI

• [⚡] Migrate HTML to React tool and cleanup UI - A lot of work. And things to fix

• [🛣️] Migrate and cleanup perfect blackjack strategy tool

• [🛣️] Migrate SVG to CSS pseudo element and create UI

• [⚡] Migrate my password manager.

• [🚨] Add file vault feature

  • Allow uploading
  • Integrate uploadthing
    • images first
      • allow max size (5mb?)
    • videos second (max size?)
      • mp4, webm, avi, mov?
  • Allow multiple uploads at once
  • Visual feedback when uploading, either percentage or progress bar (PER FILE)

• [🛣️ ] pdfs/docs third

• add doc support. Sick library for pdf/doc support

• crud operations (delet, edit, create, and view metadata)

• Allow sharing

• [🚨] In addition to the file vault. I want a separate PRIVATE(!!) image/video gallery with PiP like Firefox has. Maybe also standardized sections like powertoys window manager. Must have 100% privacy. Auth middleware and I also want custom password allowance for each section.

  • allow view like regular lightbox
  • allow view multiple borderless like PiP in Firefox
  • Show all (meta) data of image/video. Like Pleio
  • Think of rate limiting, file max. Make sure I can't be screwed by a malicious user.

• [🚨] Notes app, diary, ideas via rich text editor. I suppose Tiptap, but Sick library from above also seems cool.

• [⚡] A proper kanban / todo board instead of this readme. Ideally integrated with github issues through (graphql?), we'll see.

• [🛣️] Maybe something nice with release notes/changelog generated from github releases

• [🛣️] A proper calendar app which maybe can be integrated with google calendar, but also in relation with my kanban board, and notes app. (Dream big honey)

• [⚡🛣️] Migrate my whatsapp tracker API from chromedriver to puppeteer.

  • See API schema design; https://app.eraser.io/workspace/9fMMWL4pZTG9as7cNDtB?origin=share
  • Think of a solution to save data to database instead of local json.

• [🚨] Display my whatsapp chat history. UI is done, A lot of parts of the logic is done, need to bring it together. Personal use only since whatsapp export = txt. I converted txt via python script to json in certain object format. host as private api, and use it in my app/

  • [🛣️] Think of a solution to save data to database instead of local json (1mil +objects PER some chats).
  • Allow star / favourite messages.
  • [50%] Proper search with go to and surrounding messages instead of filter
  • Maybe ever build a system where people can upload their .txt in an encrypted/client side format, auto convert to json and make it available for others. But it's a dashboard for personal use, so probably not.

• migrate my whatsapp tracker API from chromedriver to puppeteer. See API schema design; https://app.eraser.io/workspace/9fMMWL4pZTG9as7cNDtB?origin=share

Unique Implementations

• [⚡] A emoji feedback counter sticky thingy. Design 1 w feedback inputP
• Add viewport tag (source)
• Implement logic for tab title change when switching (source)
• Dark light mode toggle (source)

📋 Repos Used

• Turso next crud operations (no orm) - ez drizzle installation
• nextjs-drizzle-crud-w-images
• t3gallery
• personal-platform
• Local project with recent features that i must migrate sit over at [/home/remcostoeten/projects/dashboard_w_chat-history-api_working-status-tracker]
• and more over the previous years..
  

💖Like my work?

I appreciate a star aka e-karma. If you have any questions you can reach through: LinkedIn, email: [email protected] or visit my personal site over at remcostoeten.com.