Followers Bicara
Tech:
VERSION CONTROL
Git
LANGUAGE
Javascript
FRONT END
Vue.Js
file_type_vite
Vite
Pinia
Tailwind
HTML
Daisy UI
CSS
FRAMEWORK
file_type_nuxt
Nuxt.Js
Nest Js
DEPLOYMENT
Docker
file_type_nginx
Nginx
DATABASE
Postgre
Status: ON PROGRESS
10 Aug 2025 - Present
Url: http://followersbicara.com
Description:
Followers Bicara Content Management & Social Platform for Writers Role Full Stack Developer Tech Stack Backend: NestJS · TypeScript · PostgreSQL · Prisma ORM · JWT · Swagger · Sharp · Puppeteer · Nodemailer Frontend: Nuxt 4.0 · Vue 3 · TypeScript · Pinia · TailwindCSS · DaisyUI · TipTap Editor · Chart.js · VueUse --- What I Built Complete Full-Stack Application - Architected and developed both REST API backend and responsive frontend from scratch - Translated Figma designs with pixel-perfect implementation - Built comprehensive content management system with article and event publishing - Deployed production system with Docker and staging environment setup Backend Architecture (NestJS) - Role-Based Access Control: Implemented with granular module-level permissions - Content Approval Workflow: Built sophisticated pipeline with version history and audit trails - Authentication System: JWT-based auth with layered guard system - Analytics Engine: Real-time visit tracking with fingerprinting, content statistics, and visitor journey analytics - Social Features: Following system, threaded comments with mentions, reactions & bookmarks - Error Logging: Global exception handler logging all errors to database with full request context - Image Processing: File upload system with Sharp for photo optimization and multiple size variants - Email System integration for transactional emails Frontend Features (Nuxt 4) - Control Panel: Complete admin dashboard for content management, user administration, and analytics visualization - WYSIWYG Editor: TipTap integration for rich article editing with image uploads - Authentication Flow: Login, register, password reset with protected route middleware - Content Display: Article and event pages with comments, reactions, and bookmarking - User Profiles: Creator profiles with follower system and content showcase - Event Management: Event creation with location, schedule, and registration tracking - Analytics Dashboard: Chart.js visualizations for content stats and visitor journeys Database Design (Prisma + PostgreSQL) - Designed interconnected tables supporting complex relationships - Implemented soft deletion and audit trails across all content - Built efficient indexing strategy - Created migration scripts with seeding for development/testing DevOps & Deployment - Docker containerization for both backend and frontend - Staging environment with automatic production data backup and restoration - Database backup/restore scripts with Docker volume management - Environment-based configuration (dev, staging, production) --- Technical Challenges Solved Challenge: Complex Permission System - Problem: Need granular access control where operators can have specific permissions per module (e.g., can CREATE articles but only READ events) - Solution: Designed flexible RBAC with UserPermission junction table mapping users to module-permission pairs, implemented layered NestJS guards that check role → permissions → ownership sequentially Challenge: Content Approval Workflow with Version History - Problem: Multiple reviewers need to approve/reject content with notes, maintaining full audit trail of changes - Solution: Built ContentApproval system with status progression and approval notes, implemented versioning through Prisma soft deletes and updated tracking time, allowing rollback and history review Challenge: Threaded Comments with Mentions - Problem: Need nested comment replies with @mentions, reactions, and real-time updates across frontend - Solution: Designed self-referential Comment table with parentId for threading, implemented mention detection with many-to-many mentions relation, built Pinia store syncing comment state across components Challenge: Analytics Without Performance Impact - Problem: Track every page visit with fingerprinting but don't slow down page loads - Solution: Created async VisitStats module with non-blocking fingerprint generation, implemented database indexing on common queries, used aggregation queries for dashboard analytics reducing N+1 queries by 90% Challenge: Production-Safe Staging Environment - Problem: Test changes with real data without risking production database - Solution: Built automated staging deployment script that backs up production volumes, copies to staging containers, maintains 30-day backup retention Challenge: Image Upload and Optimization - Problem: User-uploaded images in various formats/sizes need optimization and multiple variants - Solution: Integrated Sharp for server-side processing, generate avatar (original + medium) and photo variants on upload, store in auto-created directories with organized structure --- Workflow & Collaboration - Design Implementation: Translated Figma designs into production-ready Vue components - Full Stack Development: Designed API contracts, database schema, then implemented both BE and FE - Version Control: Git-based workflow with feature branches - Deployment: Docker-compose based deployment with staging/production environments --- Highlights - End-to-End Ownership: Sole developer responsible for entire stack from database to UI - Scalable Architecture: Modular NestJS backend supporting future feature additions - Production-Ready: Comprehensive error handling, logging, and backup strategies - Type Safety: Full TypeScript implementation across both backend and frontend - Clean Code: Prisma migrations, ESLint/Prettier configuration, comprehensive documentation - Security-First: JWT auth, rate limiting (100 req/10s), role-based permissions, password hashing - Developer Experience: Automated staging environment, database seeding, migration scripts
To Admin