Customize long URLs using the custom API
🚀 Incognito Url Maker Frontend
The frontend app is responsible for allowing users to shorten and customize long URLs using the application’s API. Users can input a long URL, provide a customized alias (masked), and create a shortened URL with the customized alias. The app also provides the ability to copy the shortened URL to the clipboard and clear the form.
Tech Stack
Client: React, Typescript, axios, react-loader-spinner.
Function Optimization
createMaskedUrl(): This function is responsible for validating the input data (origin URL and masked alias), making an API request to create the shortened URL, and updating the state with the customized URL.
clear(): This function clears all input fields and resets the state to their initial values.
UI Components
The Main component renders different sections based on the application’s state: Loading Indicator: When the loading state is true, a loading spinner is displayed.
Form Section: If customizedUrl is empty, the form section is rendered. It allows users to input the long URL and the desired masked alias and submit the form to create a customized URL.
Error Handling: If there is an error (non-empty error state), it will be displayed below the form section.
Customized URL Section: If customizedUrl is not empty, the section displaying the customized URL is rendered. It also provides buttons to copy the URL to the clipboard and clear the form.
Screenshots
Run Locally
Clone the project
git clone https://github.com/JoelDeonDsouza/Incognito_Url_Maker_Frontend.git
Go to the project directory
cd my-project
Install dependencies
npm install
Start the server
npm run start
Test cases
Tech used: React, @testing-library/react, @testing-library/jest-dom.
Test Overview
The test code included in this repository checks the behavior of the Main component under different scenarios. The test cases verify whether the component displays the correct error messages when the form is submitted with empty fields, an invalid origin URL, or an alias that is too short.
To run tests, run the following command
npx jest
Hosted link
Test the hosted project link below
https://incognito-url.onrender.com/