Skip to content

Latest commit

 

History

History

project

README.md

ShortenLinks 🔗

Project Image

Project completed

Video Demo: https://www.youtube.com/watch?v=4ZiVqZBRkfE

Adjustments and improvements

The project is finished and possible new updates will be aimed at bugfixes!

Description:

The Link Shortener with Bitly API in React is a project aimed at creating a simple and efficient web application for shortening URLs using the Bitly API. Bitly is a popular URL shortening platform that provides detailed statistics and analytics on link performance.

Features:

  1. Link Shortening: Users can input long URLs into the application and receive shortened links generated by the Bitly API.

  2. Shortened Link History: A history of shortened links will be maintained so that users can revisit or reshare previously shortened links.

  3. Intuitive Interface: Develop a user-friendly and responsive user interface using the React framework to ensure a pleasant user experience.

Technologies Used:

  1. React: For the development of the user interface, allowing the creation of reusable components and a dynamic user experience.

  2. Bitly API: Integration with the Bitly API to perform URL shortening and obtain statistical information.

  3. React Router: Route management to ensure efficient navigation between different sections of the application.

  4. State Management: Use of efficient state management (e.g., Redux) to maintain the application state cohesively.

  5. Styling: Use styling tools such as CSS or libraries like Styled Components to ensure an attractive and responsive appearance.

📂 Folders

components: React components are the building blocks of a React application, encapsulating reusable parts of UI and behavior. The “components” folder helps maintain a structured project layout, making it easier to find and manage different parts of the application. Components that I developed were Modal and Menu

pages: The "pages" folder is used to organize React components that represent application-specific pages. Each file within this folder contains a React component that represents a single page of the application. These pages are routes accessible through React Router, allowing navigation between different parts of the application based on URLs. I created the index.js, 404.js and Links/index.js pages

public: plays an important role in dealing with static resources and application build configuration. Use to store static resources such as images, icons, style files (CSS), and other assets that do not need to undergo special processing during application building.

service: I used the "services" folder for dedicated files to handle API requests. These services can encapsulate the logic for communicating with external APIs, providing an abstraction for React components.

styles: used to store style files (CSS, SCSS, etc.) related to specific components or global styles of the application. Organizing styles into a separate folder can make code more modular and easier to maintain.

💻 Prerequisites

Before you start, make sure you meet the following requirements:

  • You can access the project online by clicking here

  • You need the latest NodeJs to run locally.

💾 Cloning the Repository

Make sure you have Git installed on your machine

git clone https://github.com/vncsmnl/EncurtaLinks.git

🚀 Installing ShortenLinks

To install ShortenLinks, follow these steps:

npm install

or

pnpm install

☕ Using ShortenLinks

To use ShortenLinks, follow these steps:

npm run dev

ou

pnpm dev

🤝 Contributors

We thank the following people who contributed to this project:

📝 Licença

A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.