https://github.com/jdmiguel/react_gallery

Image gallery developed with React and Typescript
https://github.com/jdmiguel/react_gallery

axios create-react-app jest react react-router react-testing-library reacthooks redux styled-components typescript yarn

Last synced: 15 days ago
JSON representation

Image gallery developed with React and Typescript

• Host: GitHub
• URL: https://github.com/jdmiguel/react_gallery
• Owner: jdmiguel
• Created: 2020-09-17T09:37:57.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-18T14:11:49.000Z (over 4 years ago)
• Last Synced: 2024-11-07T12:48:37.244Z (2 months ago)
• Topics: axios, create-react-app, jest, react, react-router, react-testing-library, reacthooks, redux, styled-components, typescript, yarn
• Language: TypeScript
• Homepage: https://jdmiguel-react-gallery.netlify.app/
• Size: 937 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## REACT GALLERY

### TECHNOLOGIES

- **CREATE-REACT-APP**

- **YARN**

- **TYPESCRIPT**

- **REACT**

- **REACT HOOKS**

- **REACT-ROUTER**

- **REDUX**

- **REACT-INTERSECTION-OBSERVER**

- **AXIOS**

- **STYLED-COMPONENTS**

- **JEST**

- **REACT-TESTING-LIBRARY**

### SETUP

* **clone repo**: In your folder, open a new terminal and clone the repo

* **install dependencies**: Execute *yarn*

* **run local server**: Execute *yarn start*

* **create production files**: Execute *yarn build*

* **run test suites**: Execute *yarn test*

### DEVELOPMENT

First, I used CREATE-REACT-APP as build tool with YARN.

This app was mainly developed with React and Typescript. For the Styles, I used Styled Components.

The source files are in src folder that is composed of following folders:

- **components**: App components organized by the following folders:

    * **core**: Presentational components related to UI elements

    * **layout**: Presentational components related to the layout of the application

    * **pages**: Container components related to the pages of the application

- **services**: Api requests

- **store**: Global state by implementing reducers, actions and actionTypes

- **helpers**: Reusable values such as types, constants, and mocks

### API

The [PIXABAY API](https://pixabay.com/api/docs/) was used in this project to implement the service to retrieve a list of random images.

### PERFORMANCE

In order to improve the performance of the application, I did the following:

- The HomePage loads all the images by using a lazyload by user scroll.

- I made the most of the UseCallback hook to improve the performace by memoizing some values...

- Nevertheless, the HomePage displays the stored images in Redux and if they are not available, images are retrieved by consuming the request service.

### TESTING

I added unit tests to Layout and Core components with Jest and React-testing-library.