Full Stack · Engineering ProjectJanuary 1, 2024 — March 1, 2024
Clix
Clix — a full-stack MERN URL shortening app with authentication, analytics dashboard, and admin controls.
Domain
Full Stack · Web Dev
Architecture
Full-Stack System
Core Runtime
React · TypeScript
Status
Production Ready
Full Stack
11 TechnologiesVerified Build
RUNTIME INTERFACE STUDIO
System Interface & Feature Workflows
High-resolution captures of core production runtime views and algorithmic tools.
01 / 03
clix.app/dashboard-analytics
1/3
WORKFLOW 01Dashboard & Analytics
Responsive analytics dashboard showing clicks, visit trends, and URL management with charts.
All Workflows & Screens (3)Tip: Use ← → keys to cycle
Architecture & Overview
Clix is a full-stack URL shortening solution built with the MERN stack with robust authentication and analytics support.
I developed both backend APIs and frontend interfaces, integrating JWT-based security, MongoDB persistence, and dynamic user analytics.
The platform includes role-based access control and an admin dashboard for system-wide management.
Technical Highlights & Outcomes
Unique short URLs with redirection and click tracking
User authentication with JWT & role-based access control (user, admin)
Dashboard with realtime analytics & charts
Frontend built with React & Tailwind CSS
Backend REST APIs with Node.js, Express, and MongoDB/Mongoose
Responsive UI with protected routes & form validation
Short ID generation with `shortid` library
Users can manage their own URLs and Admins can manage all system data
Full Technology & Tooling Stack (11)
ReactTypeScriptNode.jsExpressMongoDBMongooseTailwind CSSReact RouterJWTshortidRecharts