This is a simple URL shortener web application built using React (Next.js) for the frontend and Rails API for the backend. The app allows users to enter long URLs, generate shortened versions, and copy them easily. The list of shortened URLs persists for the current session.
- 🌑 Dark mode interface for a sleek and modern look
- ⚡ Shorten URLs with a single click
- 🔗 Automatically adds
https://if no protocol is specified (unlesshttp://is already present) - 📜 Displays a list of previously shortened URLs for the current session
- 📋 Copy shortened URLs to clipboard with a button
- Frontend: React (Next.js), Tailwind CSS
- Backend: Rails API
Ensure you have the following installed:
- 🟢 Node.js & npm
- 💎 Ruby & Rails
- 📥 Clone the repository
git clone https://github.com/your-repo/url-shortener.git cd url-shortener - 📦 Install dependencies
npm install
▶️ Start the development servernpm run dev
- 🖥 Run the Rails API (if using locally)
cd backend rails server
- 📝 Enter a URL in the input field.
- 🔄 Click the "Shorten" button to generate a shortened URL.
- 📋 Click "Copy" to copy the URL to your clipboard.
- 📜 The previously shortened URLs will be displayed in a list, showing the original URL (truncated if too long) above the shortened version.
url-shortener/
│── backend/ # 🖥 Rails API backend
│── public/ # 📁 Static assets
│── src/
│ ├── utils/api.js # 🔌 API handling functions
│ ├── styles/ # 🎨 Global styles
│ ├── pages/
│ │ ├── index.js # 🏠 Home page
│── package.json # 📦 Node.js dependencies
│── README.md # 📜 Project documentation
- 🍴 Fork the repository.
- 🌿 Create a new branch:
git checkout -b feature-branch. - 🛠 Make your changes and commit:
git commit -m "Added new feature". - 🚀 Push to the branch:
git push origin feature-branch. - 📩 Open a Pull Request.
This project is licensed under the MIT License.