A modern, responsive URL shortener built with Next.js, TypeScript, and MongoDB. Short10 provides a clean and intuitive interface to create, track, and manage shortened URLs.
- Shorten URLs with optional custom paths
- Track click counts for each shortened URL
- Search and filter through shortened URLs
- Light and dark mode support
- Fully responsive design
- Frontend: Next.js, React, TypeScript, Tailwind CSS
- Backend: Next.js API Routes
- Database: MongoDB with Mongoose
- Packages:
nanoidfor generating unique IDsmongoosefor MongoDB interaction
- Node.js 18+ installed
- MongoDB database (local or Atlas)
-
Clone the repository:
git clone https://github.com/yourusername/shortener.git cd shortener -
Install dependencies:
npm install
-
Create a
.env.localfile in the root directory with the following:MONGODB_URI=your_mongodb_connection_string DB_USERNAME=db_access_username DB_PASSWORD=db_access_password -
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
shortener/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── [shortId]/ # Dynamic route for URL redirection
│ │ ├── components/ # Reusable UI components
│ │ ├── context/ # React context providers
│ │ ├── sections/ # Larger page sections
│ ├── database/ # MongoDB connection and models
│ └── ...
├── tailwind.config.js # Tailwind CSS configuration
└── ...
POST /api/short- Create a new short URLGET /api/short- Retrieve all short URLsGET /api/short/[id]- Retrieve a specific short URLDELETE /api/short/[id]- Delete a short URLGET /[shortId]- Redirect to the target URL
- This project uses Tailwind CSS for styling.
- The database schema is defined using Mongoose.
- The application is designed to be extended and customized by developers.
Contributions are welcome. Please fork the repository, create a feature branch, and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.