A lightning-fast frontend for the URL Shortener Backend, built using Next.js, TypeScript, Tailwind CSS, Formik, and Skeleton Loaders. Developed and maintained by Ahmad Raza Khokhar, this project offers a production-grade, modern UI with real-world practices.
This frontend works hand-in-hand with the backend URL shortening service. It’s built with scalability, speed, and user experience in mind:
- 🔗 Shorten URLs with a clean, responsive interface
- 🔐 OTP-based passwordless login
- 💨 Blazing-fast performance with skeleton loading
- 📦 Clean folder structure and reusable components
- 📱 Mobile-first responsive design
- Next.js – Full-stack React framework
- TypeScript – Type-safe, scalable code
- Tailwind CSS – Utility-first styling
- Formik – Robust form management and validation
- Skeleton Components – Better UX during loading
- App Router – Modern routing in Next.js
🚀 Getting Started
- Clone the repository bash Copy Edit git clone https://github.com/AhmadRazaKhokhar1/url-shortner-frontend.git cd url-shortner-frontend
- Install dependencies bash Copy Edit npm install
yarn install
pnpm install
bun install 3. Run the development server bash Copy Edit npm run dev Visit http://localhost:3000 to open the app in your browser.
📦 Build for Production To generate a production-ready build:
bash Copy Edit npm run build npm start 🔗 Connects With This project is designed to work seamlessly with the backend repo: 👉 URL Shortener Backend
Make sure to have your backend running before using the frontend!
bash Copy Edit cd ../url-shortner-backend docker compose up --build --watch 👨💻 About the Developer Hi, I’m Ahmad Raza Khokhar – a full-stack developer passionate about building scalable, modern web and mobile applications. If you liked this project or found it useful, do consider giving it a ⭐ star and connect with me online:
🔗 LinkedIn: linkedin.com/in/ahmad-raza-khokhar
💻 GitHub: github.com/AhmadRazaKhokhar1
Let’s connect and grow together in tech 🚀
📃 License This project is licensed under the MIT License.