Groupie-Tracker
Project Overview
Groupie-Tracker is a web application that displays information about music bands and artists, using data from a RESTful API. The project demonstrates skills in Go for backend development, data manipulation, and interactive web interfaces.
Technologies Used
- Go: The primary programming language used for server-side logic
- HTML/CSS/JavaScript: For frontend development and interactive elements
- RESTful API: Handling and displaying data from external APIs
- JSON: Data formatting and manipulation
- Gorilla Mux: For HTTP routing
Key Features
- Dynamic display of artist information including names, members, creation date, and first album
- Interactive map showing performance locations
- Search functionality by artist name, location, or creation date
- Filtering options to sort and find specific artists
- Responsive design for optimal viewing on all devices
Development Process
The project started with API data analysis to understand the structure and relationships between the data sets. I then designed a simple yet effective UI that would showcase the information intuitively. The backend was implemented in Go, which handled API requests, data processing, and serving the web pages.
One of the biggest challenges was visualizing the concert locations on an interactive map while maintaining performance. This required implementing efficient data loading strategies and optimized JavaScript functions.
Outcome
The final product is a fast, responsive web application that effectively displays artist information in an engaging format. The project demonstrates my ability to work with external APIs, implement responsive design, and develop backend services using Go.
BombermanDX
Project Overview
BombermanDX is a browser-based game inspired by the classic Bomberman series. This project focuses on JavaScript DOM manipulation and performance optimization to create a smooth gaming experience directly in the browser.
Technologies Used
- JavaScript: Core programming language for game logic
- HTML5: Structure and canvas
- CSS3: Styling and animations
- DOM Manipulation: Dynamic content creation and management
Key Features
- Grid-based movement and bomb placement
- Destructible and indestructible walls
- Power-ups (bomb range, speed, extra bombs)
- Enemy AI with different behaviors
- Multiple levels with increasing difficulty
- Score tracking and high score system
Development Process
Development began with creating the game's core mechanics: grid movement, bomb placement, and explosions. I implemented a modular design pattern to separate game elements like the player, bombs, enemies, and the game board.
The main challenge was optimizing performance, especially when multiple explosions and enemies were on screen. I addressed this by implementing efficient algorithms for collision detection and managing DOM elements, recycling nodes where possible instead of creating new ones.
Outcome
The game delivers a smooth experience even on lower-end devices, with consistent frame rates and responsive controls. It demonstrated my proficiency in JavaScript, DOM manipulation, and game development concepts.
Social Network
Project Overview
Social Network is a full-stack web application that reproduces key modern social platform workflows in one product: authentication, feed publishing, reactions, stories, group collaboration, event RSVP, and real-time messaging.
This was a collaborative project, developed as a team effort with shared ownership across architecture, features, and delivery.
Technologies Used
- Next.js: Full-stack app and API routes
- React + TypeScript: Frontend architecture and UI
- Prisma: Relational data modeling and queries
- PostgreSQL: Primary persistent database
- Redis: Real-time chat stream support
- Docker: Containerized build and deployment
Key Features
- JWT-protected routes with secure cookie-based authentication
- Real-time direct and group chat with live stream updates
- Stories and social posts with reactions and comments
- Group creation, invitations, and membership flows
- Event management with RSVP states (YES/NO/MAYBE)
- Unified notification flows for social interactions
Development Process
I started by modeling the social domain with Prisma, then exposed API routes for authentication, content, chat, groups, and events. This backend-first flow helped keep feature development consistent from database to UI.
A key challenge was keeping real-time behavior stable across chat and notifications while preserving deployment reliability. I handled this through Redis-backed streaming patterns and containerized runtime setup with migrations during startup.
Outcome
The result is a production-style social platform prototype that combines product features and operational concerns in one codebase. It demonstrates end-to-end full-stack delivery: secure auth, data modeling, real-time communication, and deployment readiness.
Pochet du Courval Showcase
Project Overview
Pochet du Courval Showcase is a brand showcase and marketing website that presents the luxury glassmaking craftsmanship through a modern web experience. The site pairs a high-fidelity interactive 3D perfume bottle with curated marketing sections—Key Facts, Capabilities, International presence and Contact CTA—to communicate materiality, finishes and production capabilities.
Technologies Used
- Vite: Development server and optimized builds
- React + TypeScript: Component-driven UI with type safety
- Tailwind CSS: Utility-first styling and responsive layout
- @react-three/fiber + three.js: Interactive 3D rendering and procedural geometry
- @react-three/drei: HDR environment, contact shadows and controls
- Framer Motion: Entrance and staggered UI animations
- Radix / shadcn patterns: Accessible UI primitives and composition
- Vitest / ESLint: Tests and linting for developer experience
Key Features
- Interactive 3D Hero: Procedurally generated perfume bottle with lathe geometry, PBR materials, studio lighting and HDR environment
- Graceful Fallback: WebGL detection with high-quality fallback image for non-WebGL or low-capability devices
- Responsive Camera & Controls: Adaptive camera setups for mobile/tablet/desktop with trackball controls for exploration
- Animated Modular Pages: Hero, Key Facts, Capabilities, International and Contact CTA built as reusable components with smooth motion
- Performance-Minded Rendering: frameloop="demand", controlled DPR, Suspense/lazy patterns for minimal CPU/GPU use
- Developer Ergonomics: Vite scripts, TypeScript, linting and test hooks for maintainable delivery
Development Process
I started by modeling the bottle and materials with procedural geometry and tuned physical-based rendering (PBR) materials. The Hero3D component uses @react-three/fiber and @react-three/drei for Environment setup and contact shadows; a high-quality fallback image is served when WebGL is unavailable.
Studio lighting and HDRI (/hdr/studio.hdr) integration enables realistic material visualization and caustics. UI sections were built with Tailwind and Radix/shadcn-like primitives, animated via Framer Motion. The key engineering challenge focused on balancing visual fidelity with runtime performance and deterministic build behavior.
Outcome
The project is a production-style brand showcase that demonstrates both visual craft and front-end engineering: interactive 3D presentation, modular UI components, and a clear build/test workflow. The site is ready for content localization, CI polishing, and deployment, with further iterations focused on i18n, content authoring, and CI/CD integration.
PartiQ
Project Overview
PartiQ is a full-stack web application designed to streamline product and ticket management for technical and support teams. It centralizes product catalogues, document handling, ticketing workflows, and real-time collaboration in a single, modern interface.
A standout feature is PartiQ’s integrated AI, which continuously learns from documents stored in the database to enhance support, search, and knowledge management.
This project was developed collaboratively, with shared responsibility for architecture, features, and delivery.
Technologies Used
- Next.js: Full-stack app and API routes
- React + TypeScript: Frontend architecture and UI
- Prisma: Relational data modeling and queries
- PostgreSQL: Primary persistent database
- Docker: Containerized build and deployment
Key Features
- Secure authentication and role-based access control
- Product catalogue with advanced filtering and search
- Ticket management with custom priority and status workflows
- Real-time ticket updates and messaging
- Document upload, preview, and confirmation flows
- Dashboard with sortable, filterable tables and statistics
- Export and reporting tools for tickets and documents
- AI-powered knowledge base that learns from uploaded documents
Development Process
I started by modeling the product, ticket, and document domains with Prisma, then exposed API routes for authentication, product management, ticketing, and document workflows. This backend-first approach ensured consistency from database to UI.
A key challenge was harmonizing ticket priorities and statuses for robust sorting and filtering, while maintaining a seamless user experience. I addressed this with custom sorting logic, interactive dashboards, and containerized deployment for reliability.
Integrating the AI required designing a pipeline for document ingestion, vectorization, and retrieval, enabling the platform to provide intelligent suggestions and contextual answers based on the latest knowledge in the database.
Outcome
The result is a production-style management platform that unifies product, ticket, and document workflows in one codebase. PartiQ demonstrates end-to-end full-stack delivery: secure authentication, advanced data modeling, real-time collaboration, and deployment readiness.
The AI-powered knowledge base sets PartiQ apart, enabling smarter support and continuous learning from organizational documents.
AbrisCraft
Project Overview
AbrisCraft is an interactive 3D garden shed configurator designed to help users customize materials, hardware, and build options in a guided visual experience.
The application connects a learning chatbot to its PostgreSQL database, so the system can answer questions about product options, material estimates, and configuration details with context-aware responses.
Technologies Used
- Next.js: Frontend and server-rendered pages
- React + TypeScript: UI components and application logic
- Tailwind CSS: Responsive styling and layout
- React Three Fiber / Three.js: 3D configurator visuals
- Prisma: Database access layer
- PostgreSQL: Persistent product and estimate data
Key Features
- 3D shed configuration with material and hardware selection
- Dynamic cost estimation for materials and accessories
- Database-backed project data and inventory references
- Chatbot integration for intelligent configuration support
- Ready-to-integrate architecture for external hardware store APIs
Development Process
I built the project around a central 3D configuration engine, then connected it to a database-driven backend to persist options, pricing, and user preferences.
The learning chatbot was added to improve the experience by using stored data to answer questions and guide users through the build process.
Outcome
AbrisCraft demonstrates a full-stack product configurator with immersive 3D interaction, database-backed intelligence, and a clear path for integrating external inventory and hardware store APIs.