https://github.com/nicklima/hostgator-react-app
This project was developed as an application test for the Frontend position at Hostgator Latin America.
https://github.com/nicklima/hostgator-react-app
Last synced: 6 days ago
JSON representation
This project was developed as an application test for the Frontend position at Hostgator Latin America.
- Host: GitHub
- URL: https://github.com/nicklima/hostgator-react-app
- Owner: nicklima
- Created: 2020-12-20T21:57:58.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-26T13:13:30.000Z (over 1 year ago)
- Last Synced: 2024-11-26T14:24:04.433Z (over 1 year ago)
- Language: JavaScript
- Size: 3.39 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://hostgator-react-app.nicklima.com.br/)
# Hostgator Challenge
## Table of contents
* [About](#about)
* [Requirements](#requirements)
* [Extras](#extras)
* [Preview](#preview)
* [Technologies](#technologies)
* [Dependencies](#dependencies)
* [Installation](#installation)
* [Cloning](#cloning)
* [Install Dependencies](#install-dependencies)
* [Running The Project](#running-the-project)
* [Build The Project](#build-the-project)
* [About The Author](#author)
## About
This project was developed as an application test for the Frontend position at Hostgator Latin America.
### Requirements
- Create a page that refers to the [API](https://6dd1804f-a914-4c99-a1ed-58adca2bca74.mock.pstmn.io/prices): to obtain prices and name of plans with JS;
- The page should follow the layout pattern [available at here](https://xd.adobe.com/spec/31631e0c-bd84-4a01-5f67-27878b4deffa-4752/screen/7c74256b-47a2-4be2-ac8b-8bd6f5a045b9/specs/);
- The images can be downloaded and used as svg;
- Web source used: Montserrat;
- Responsive layout (mobile 320px, tablet 1024px).
### Extras
Here there are some extra items to increase the test score if applied.
- [x] Use of automators (Gulp, Grunt or Webpack);
- [x] Use of CSS preprocessors (SASS, LESS and etc.);
- [ ] Performance optimization;
- [ ] Use of Redux;
- [ ] Unitary tests;
- [ ] Security measures;
- [x] Animations and effects.
### Preview
[Click here](http://hostgator-react-app.nicklima.com.br/) to view the project demo.
## Technologies
- [React](https://pt-br.reactjs.org/)
- [Styled-components](https://styled-components.com/)
- [Prop Types](https://github.com/facebook/prop-types)
## Dependencies
- [Node](https://nodejs.org/en/download/)
- [Yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable)
- [Axios](https://www.npmjs.com/package/axios)
- [React Anchor Link](https://www.npmjs.com/package/react-anchor-link-smooth-scroll)
- [Slick Carousel](https://react-slick.neostack.com/)
- [Pretier](https://prettier.io/)
- [Eslint](https://eslint.org/)
- [React App Rewired](https://www.npmjs.com/package/react-app-rewired)
- [Skeleton](https://www.npmjs.com/package/react-loading-skeleton)
## Installation
### Cloning
Clone the repository:
`git clone git@github.com:nicklima/hostgator-react-app.git`
### Install Dependencies
Navigate to the project directory
`cd hostgator-react-app`
and install the dependencies:
`npm install` or `yarn install`
### Running The Project
After install the dependencies, you can run the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
`npm start` or `yarn start`
The page will reload if you make edits.\
You will also see any lint errors in the console.
### Build The Project
After install the dependencies, you can build the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
`npm run build` or `yarn build`
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!