Responsive application to shorten urls integrate with the shrtcode API
Main Functionalities:
- Shorten a link
- See a list of their shortened links, even after refreshing the browser
- Copy the shortened link to their clipboard in a single click
- Optimal layout for the site depending on their device's screen size
Check out a live demo on this link.
-React was used on version 17.0.2
- The app is build using Typescript, it grants bring static typing for javascript, granting us the ability to use the intelisense for our code editor, facilitates the refactoring of code, saves us debuging time and brings more assertiveness when accessing properties of our variables.
- Interfaces were created with payload responsed from the API, so the whole application is aware of it's data structure.
- NextJS is a framework built on top of React that is fast and efficient.
- axios for api access.
- styled-components to simplify separation between code and stylesheets.
- jest as a test runner.
To ensure the code follow the some pattern and is correctly typed, some libs were used:
- prettier for code formatting.
UI components, like headers, footers, lists were created to avoid code duplication. The components were create to be completely reusable and they do not contain any business logic.
- For this simple application, we use ContextAPI. It provides us a way to create a separation between UI components and business logic and state.
yarn && yarn dev