/flickr-frontend-example

Primary LanguageJavaScript

flickr-frontend-example

A frontend application with React for viewing a list of Pockémons grouped by their type. It calls to its backend version flickr-backend-example It is a responsive application and uses @media queries with a max-width of 1024px (the order of components will change).

Who is this project for?

It is a good example of how using these tecnologies:

How to install/configure the project?

Installation

Just:

$ git clone https://github.com/aaronplanell/flickr-frontend-example.git
$ cd flickr-frontend-example
$ npm install

Obviously, the last line can be replaced by:

$ yarn install

How to run the project?

For running in development mode just run:

$ npm start

Or:

$ yarn start

Automagically the browser will be open with the application.

Note: The development mode has Hot Reloading configured even with Redux Store :D

How create an optimized production build ?

For creating an optimized production build just run:

$ npm run build

Or:

$ yarn build

You will see a message like:

The build folder is ready to be deployed.

Starting up http-server, serving ./build
Available on:
  http://127.0.0.1:3001
  http://192.168.1.2:3001
Hit CTRL-C to stop the server

Forget it and open http://localhost:3001. The CORS configuration of the API Server ban all the IPs excepts one: the localhost.

Note: The production mode has only the Redux Thunk middleware.

How to test the project?

Easy... Just.

npm run test

Or:

yarn test

You will find all the tests in differents tests folders. It checks:

  • Action creators.
  • Reducers + Selectors.
  • Components -- Render -- Snapshot

It uses Jest technology :)

Contributing

This project uses.

License

GPL (GNU GENERAL PUBLIC LICENSE)