URL Shortener Web Application is a user-friendly web-based tool that allows users to create shortened versions of long URLs, making them easier to share. This project is built using the MERN stack (MongoDB, Express, React, Node.js) and styled with Chakra UI for a visually appealing and responsive user interface.
- Shorten URLs: Convert long URLs into shortened versions with a single click.
- Custom Short URLs (Optional): Create personalized and memorable links for your URLs.
- Copy to Clipboard: Copy the shortened URL to the clipboard for easy sharing.
- User-friendly Interface: Intuitive and responsive UI design for a seamless user experience.
Try out the live demo of the URL Shortener Web Application here.
To run the URL Shortener Web Application locally, follow these steps:
-
Clone the repository:
-
Install dependencies for both frontend and backend:
cd server
npm install
cd client
npm install
- Set up environment variables:
- Create a
.envfile in the root directory and add the following:MONGODB_URI=your-mongodb-uri PORT=your-port-number
- Start the development server:
-Server npm start
-Client npm run dev
The URL Shortener Web Application will be running on http://localhost:your-port-number.
- Access the application at
http://localhost:your-port-numberin your web browser. - Enter the long URL you want to shorten in the input field.
- Optionally, you can provide a custom short URL code for the link.
- Click the "Shorten URL" button to generate the shortened version.
- The shortened URL will be displayed in the output field, and it will be automatically copied to your clipboard for easy sharing.
-
Frontend:
-
React
-
Chakra UI
-
React Router
-
Axios
-
Backend:
-
Node.js
-
Express
-
MongoDB (via Mongoose)
Contributions are welcome! If you find any bugs or have suggestions for improvements, please create a new issue or submit a pull request.
For any inquiries or questions, feel free to reach out via email or connect with me on LinkedIn.