"URL Shortener" is an application to not only shorten the long URLs but also it provides users with advanced management tools like tracking click counts, editing URLs, and generating QR codes.

The challenge was to build a fully functional and scalable URL Shortener application that not only generates shortened URLs but also provides users with advanced management tools like tracking click counts, editing URLs, and generating QR codes. The key goal was to ensure fast, reliable performance and efficient database handling using MongoDB. Additionally, the system needed to support features like title tagging, custom short codes, and clipboard copy within a user-friendly interface.

The application is expected to support:

• Shorten/Shrink the long URLs
• Record vitals of link like date, title
• Track the click counts
• Ability to copy, Edit & Delete the links
• Generate QR code - Ability to share via QR code.
• Option to generate custom short URL

My Role & Responsibilities

I was given a Figma design to start the coding. My contributions included:

• Complete fron-end coding using Express JS and other technologies
• Setting up backend environment using Node.js
• Connected MongoDB for storing original and shortened URLs along with metadata like click count, titles, and timestamps.
• Integrated a QR code generator to auto-generate codes for each shortened URL.
• Testing & Validation of the application

Tools & Technologies Used

• Express JS: for front-end coding
• Node JS: for backend server environment
• Bootstrap: for responsive design
• HTML/CSS: for page structure and custom styling
• Mongo DB: for storing original and shortened URLs along with metadata like click count, titles, and timestamps

Development Approach

1. Understanding the Provided UI Design
• Reviewed and analyzed the Figma/mockup design (given by client or team) for layout, component behavior, and user flow.
• Identified key modules: URL input panel, URL table list, edit modal, and QR code popup.
2. Setting Up Backend Environment
• Set up Express.js and Node.js server architecture
• Setup & connected MongoDB for storing original and shortened URLs along with metadata like click count, titles, and timestamps
3. Front-end Development
• Used Express JS to code for front-end
• Implemented a robust and unique short code generation logic.
• Integrated a QR code generator to auto-generate codes for each shortened URL.
4. Testing & Validation
• Performed thorough backend and frontend testing (manual/unit) for all user actions
• Validated API endpoints and edge cases (e.g., invalid URLs, duplicate custom codes)
• Ensured error handling and loading states for smooth UX
• Made the project ready for production deployment with environment separation (dev/prod), MongoDB config
5. Implementation & Launch
• Deployed the application to the production environment
• Conducted post-deployment testing to ensure system stability
6. Iteration & Feedback
• Post-launch user feedback was gathered and documented
• Insights are being planned for implementation in upcoming development phases