A simple and intuitive URL shortener application built with React. This project allows users to shorten long URLs, track their usage, and manage their shortened links efficiently.
- URL Shortening: Easily shorten long URLs with a single click.
- Link Management: View and manage your shortened links in a user-friendly interface.
- Statistics: Track how many clicks your shortened URLs receive.
- Responsive Design: Works seamlessly on both desktop and mobile devices.
- Frontend Framework: React
- Styling: Tailwind CSS
- State Management: React Hooks
- Testing: React Testing Library
- Environment Variables: dotenv for managing API URLs
-
Clone the repository:
git clone https://github.com/yourusername/LinkShortner-Frontend.git
-
Navigate to the project directory:
cd LinkShortner-Frontend -
Install the dependencies:
npm install
-
Create a
.envfile in the root directory and add your API URL:REACT_APP_API_URL=http://your-api-url.com -
Start the development server:
npm start
- Open your browser and navigate to
http://localhost:3000. - Enter a long URL in the input field and click "Shorten it!" to generate a shortened link.
- View your shortened links in the list below the input field.
src/
├── components/ # Reusable components
│ ├── CallToAction.jsx
│ ├── Header.jsx
│ ├── Hero.jsx
│ ├── Main.jsx
│ ├── Shortener.jsx
│ └── UrlList.jsx
├── images/ # Static images
├── App.js # Main application component
├── index.js # Entry point of the application
└── index.css # Global styles
Contributions are welcome! Please feel free to submit a pull request or open an issue for any suggestions or improvements.
This project is licensed under the MIT License - see the LICENSE file for details.
- React - A JavaScript library for building user interfaces.
- Tailwind CSS - A utility-first CSS framework for styling.
- React Testing Library - A library for testing React components.
Feel free to modify any sections to better fit your project's specifics or your personal preferences!