React URL Shortener

A simple URL shortener application built with ReactJS, Vite, and TailwindCSS that uses the TinyURL API to create shortened URLs.

Live Demo

Visit the live application at: https://react-url-shortener-iota.vercel.app/

Features

• Shorten long URLs with a single click
• Copy shortened URLs to clipboard
• Responsive design for both desktop and mobile
• Simple and intuitive user interface
• Real-time URL validation
• Integration with TinyURL.com API

Tech Stack

• ReactJS - Frontend library
• Vite - Fast build tool and development server
• TailwindCSS - Utility-first CSS framework
• Axios - Promise-based HTTP client
• Vercel - Deployment and hosting

Getting Started

Prerequisites

• Node.js (v14.0.0 or later)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/react-url-shortener.git
   cd react-url-shortener

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser and navigate to http://localhost:5173

Usage

1. Enter a valid URL in the input field (including http:// or https://)
2. Click the "Shorten URL" button
3. The shortened URL will appear below
4. Click the "Copy" button to copy the shortened URL to your clipboard

Deployment

This project is deployed on Vercel. To deploy your own version:

1. Push your code to a GitHub repository
2. Connect your repository to Vercel
3. Configure the build settings:
   • Build Command: npm run build or yarn build
   • Output Directory: dist
4. Deploy

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• TinyURL for providing the URL shortening API
• React for the frontend library
• Vite for the build tool
• TailwindCSS for the styling framework
• Vercel for hosting and deployment
• Vitest for unit testing