146 lines
5.2 KiB
Markdown
146 lines
5.2 KiB
Markdown
---
|
|
title: Projects
|
|
description: A collection of my personal and professional projects, showcasing my skills, creativity, and problem-solving abilities. Explore the diverse range of work I've done, from software development to design, and see how I approach challenges and deliver innovative solutions.
|
|
---
|
|
|
|
## Bitez
|
|
|
|
**Confidentiality Note:** This project is built under NDA. Details shared here reflect publicly sharable information only.
|
|
|
|
B2B social media management platform designed for restaurants and cafes. Streamlines content creation, scheduling, and analytics for food service businesses managing multiple locations.
|
|
|
|
It included real-time chat and media processing job queues, allowing users to upload images and videos, which were then processed asynchronously for optimal performance.
|
|
|
|
Alongside the core platform, I developed a companion mobile app for iOS and Android, later gravitating towards a Progressive Web App (PWA) approach for broader accessibility and ease of updates.
|
|
|
|
**Tech Stack:** Next.js, TypeScript, Supabase, Prisma, PostgreSQL, Redis, BullMQ
|
|
|
|
**Status:** Maintained
|
|
|
|
**Screenshots:**
|
|
|
|
|
|
---
|
|
|
|
## Linkboard
|
|
|
|
Self-hosted alternative to Linktree, a centralized link management and sharing solution you can deploy on your own infrastructure.
|
|
|
|
The first build of this project was a learning exercise for me and thus was not production-ready. I am currently working on a complete rewrite of the project, focusing on ease of deployment, user experience, and maintainability. The new version will be open-source and available on GitHub.
|
|
|
|
The new version has focus on ease of use for not tech-savvy users, with a simple and intuitive interface for managing links, analytics, and customization options.
|
|
|
|
**Tech Stack:** Next.js, TypeScript, Prisma, SQLite
|
|
|
|
**GitHub:** [HangerThem/linkboard](https://github.com/HangerThem/linkboard)
|
|
|
|
**Live (old version):** [socials.hangerthem.com](https://socials.hangerthem.com)
|
|
|
|
**Status:** Active / Maintained
|
|
|
|
**Screenshots:**
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## LRC Audio Player
|
|
|
|
NPM package that synchronizes LRC (lyrics file format) display with audio playback. Useful for music apps, karaoke platforms, and lyric-synced UIs.
|
|
|
|
It also has React wrapper support, allowing developers to easily integrate it into React applications.
|
|
|
|
**Tech Stack:** TypeScript, Audio API, NPM
|
|
|
|
**GitHub:** [HangerThem/lrc-audio-player](https://github.com/HangerThem/lrc-audio-player)
|
|
|
|
**NPM Package:** [lrc-audio-player](https://www.npmjs.com/package/lrc-audio-player)
|
|
|
|
**Status:** Maintained
|
|
|
|
**Features:**
|
|
|
|
- Real-time lyric synchronization
|
|
- Customizable UI
|
|
- Flexible timing formats
|
|
- React wrapper for easy integration
|
|
|
|
---
|
|
|
|
## Social Network
|
|
|
|
Personal learning project building a full-stack social network from scratch. It includes user authentication, profile management, post creation, and a basic feed system.
|
|
|
|
**Tech Stack:** Next.js, TypeScript, Supabase, Prisma, PostgreSQL, better-auth
|
|
|
|
**GitHub:** [HangerThem/socials-example](https://github.com/HangerThem/socials-example)
|
|
|
|
**Status:** Active Development / Learning Project
|
|
|
|
---
|
|
|
|
## Venia
|
|
|
|
Open-source cookie consent library with a strong anti-dark-pattern philosophy. Provides accessible, user-friendly consent management without manipulative UX patterns.
|
|
|
|
It is designed to be framework-agnostic, with implementations for React and Vue, and a core library that can be integrated into any web application.
|
|
|
|
For developers, it offers a CLI tool for easy setup and configuration, along with customizable components to fit various design needs.
|
|
|
|
**Tech Stack:** TypeScript, React, Vue, Node.js
|
|
|
|
**GitHub:** [HangerThem/venia](https://github.com/HangerThem/venia)
|
|
|
|
**NPM Package (core):** [venia/core](https://www.npmjs.com/package/@venia-consent/core)
|
|
|
|
**NPM Package (React):** [venia/react](https://www.npmjs.com/package/@venia-consent/react)
|
|
|
|
**NPM Package (Vue):** [venia/vue](https://www.npmjs.com/package/@venia-consent/vue)
|
|
|
|
**NPM Package (CLI):** [venia/cli](https://www.npmjs.com/package/@venia-consent/cli)
|
|
|
|
**Status:** Maintained
|
|
|
|
**Key Features:**
|
|
|
|
- GDPR/CCPA compliant
|
|
- No dark patterns
|
|
- Accessible by default
|
|
- Lightweight and customizable
|
|
|
|
---
|
|
|
|
## lighthouse-report-svg
|
|
|
|
Converts Lighthouse audit results into SVG visualizations. Useful for CI/CD pipelines, performance dashboards, and automated reporting.
|
|
|
|
**Tech Stack:** TypeScript, Node.js, SVG
|
|
|
|
**GitHub:** [HangerThem/lighthouse-report-svg](https://github.com/HangerThem/lighthouse-report-svg)
|
|
|
|
**Live Demo:** [lighthouse-report-svg.vercel.app](https://lighthouse-report-svg.vercel.app)
|
|
|
|
**Status:** Maintained
|
|
|
|
**Use Cases:**
|
|
|
|
- Performance monitoring in CI/CD
|
|
- Automated performance reports
|
|
- Visual audit dashboards
|
|
|
|
---
|
|
|
|
## This blog
|
|
|
|
This very blog is a personal project where I share my thoughts, tutorials, and insights on web development, programming, and technology trends.
|
|
|
|
**Tech Stack:** Next.js, TypeScript, Tailwind CSS
|
|
|
|
**Source Code:** [HangerThem/blog.hangerthem.com](https://git.hangerthem.com/HangerThem/blog.hangerthem.com)
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
All source code is available on [GitHub](https://github.com/HangerThem).
|