https://github.com/samuel-amaro/landing-page-shortening
Desafio de codificação Front-End, landing page shortened URLs.
https://github.com/samuel-amaro/landing-page-shortening
bem-methodology css3 fetch-api flexbox-css grid-layout html-semantics html5 javascript jest-tests localstorage-api mobile-first msw navigator-api npm-package react-testing-library reactjs rwd-response unit-testing
Last synced: 3 months ago
JSON representation
Desafio de codificação Front-End, landing page shortened URLs.
- Host: GitHub
- URL: https://github.com/samuel-amaro/landing-page-shortening
- Owner: Samuel-Amaro
- Created: 2022-11-15T11:32:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-25T19:26:21.000Z (over 1 year ago)
- Last Synced: 2023-09-26T09:34:56.615Z (over 1 year ago)
- Topics: bem-methodology, css3, fetch-api, flexbox-css, grid-layout, html-semantics, html5, javascript, jest-tests, localstorage-api, mobile-first, msw, navigator-api, npm-package, react-testing-library, reactjs, rwd-response, unit-testing
- Language: JavaScript
- Homepage: https://samuel-amaro.github.io/landing-page-shortening/
- Size: 4.05 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Shortly URL shortening API Challenge solution
This is a solution to the [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- [x] View the optimal layout for the site depending on their device's screen size
- [x] Shorten any valid URL
- [x] See a list of their shortened links, even after refreshing the browser
- [x] Copy the shortened link to their clipboard in a single click
- [x] Receive an error message when the `form` is submitted if:
- [x] The `input` field is empty
### Screenshot
#### Mobile Result
#### Desktop Results Tablets
#### Desktop Result
### Links
- Solution URL: [Repository Project](https://github.com/Samuel-Amaro/landing-page-shortening)
- Live Site URL: [Result Live](https://samuel-amaro.github.io/landing-page-shortening/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- RWD(Responsive Web Design)
- [React](https://reactjs.org/) - JS library
- React Hooks
- [Bem Metodology CSS](https://getbem.com/introduction/) - BEM Metodology CSS
- Web Acessibility(Wai-arias, roles)
- Normalize CSS
- JavaScript Language Programming
- fetch API networks request
- API Clipboard clipboard's contents.
- [Regex URL](https://uibakery.io/regex-library/url) - Regex URL to validator
- [shrtcode API](https://app.shrtco.de/) - shrtcode API to shortened from urls
- localStorage API from browser
### Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### Available Scripts
In the project directory, you can run:
#### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
#### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
#### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
## Author
- Website - [Portefólio Samuel Amaro](https://samuel-amaro.github.io/portfolio-web/)
- Frontend Mentor - [@Samuel-Amaro](https://www.frontendmentor.io/profile/Samuel-Amaro)