11 | {this.props.title}
12 |
13 | );
14 | }
15 | }
16 |
17 | GridItem.propTypes = {
18 | id: PropTypes.number,
19 | thumb: PropTypes.string,
20 | title: PropTypes.string,
21 | filter: PropTypes.string
22 | }
23 |
24 | export default GridItem;
25 |
--------------------------------------------------------------------------------
/src/scss/pages/home.scss:
--------------------------------------------------------------------------------
1 | @import '../base/color';
2 |
3 | .home {
4 | background: linear-gradient(to bottom, color(gradient-primary), color(gradient-secondary));
5 | min-height: 100vh;
6 | padding-bottom: 25px;
7 |
8 | form {
9 | button[type='submit'] {
10 | display: none;
11 | }
12 | }
13 |
14 | .btn-explore {
15 | position: absolute;
16 | display: block;
17 | width: auto;
18 | cursor: pointer;
19 | color: color(secondary);
20 | top: 50%;
21 | left: 50%;
22 | transform: translate(-50%, -50%);
23 | font-weight: bolder;
24 | background-color: color(invert);
25 | padding: 10px 20px;
26 | border-radius: 80px;
27 | text-align: center;
28 | text-transform: uppercase;
29 | box-shadow: -1px 1px 20px 13px rgba(0, 0, 0, 0.15);
30 |
31 | &:active {
32 | box-shadow: -1px 1px 20px 13px rgba(0, 0, 0, 0);
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/scripts/components/transition.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Transition = () => (
4 | Sorry, but the page you were trying to view does not exist.
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :mortar_board: Marvel API Explorer 2 | 3 |  4 |  5 | [](https://coveralls.io/github/iondrimba/marvel-api-explorer) 6 | 7 |  8 | 9 | ## About 10 | 11 | This is a personal project built in my spare time for learning purposes. 12 | It uses the official [Marvel API](https://developer.marvel.com/docs) 13 | 14 | ## Features 15 | 16 | * PWA 17 | * Responsive 18 | * Offline ready 19 | * Installable (add to Homescreen ) 20 | * Swipe gestures for pagination 21 | * Pull to refresh keeps current pagination page 22 | 23 | ## Running 24 | 25 | ```bash 26 | npm start 27 | ``` 28 | 29 | ## Testing 30 | 31 | ```bash 32 | npm test 33 | ``` 34 | 35 | or 36 | 37 | ```bash 38 | npm run start:watch ## watch/tdd mode 39 | ``` 40 | 41 | ## Built with 42 | 43 | * ES6 44 | * Sass 45 | * React + Redux 46 | * Jest 47 | * VSCode 48 | * WebPack 49 | 50 | ## Todo 51 | 52 | * Write more tests(especially jsx components) 53 | * Refactor bits of code 54 | * Add more mobile friendly gestures 55 | -------------------------------------------------------------------------------- /src/scss/components/search.scss: -------------------------------------------------------------------------------- 1 | @import '../base/color'; 2 | @import '../base/easing'; 3 | 4 | .search { 5 | box-shadow: 0 2px 20px 0 color(shadow); 6 | position: fixed; 7 | top: 0; 8 | transform: translateY(0) translate3d(0, 0, 0); 9 | transition: transform .3s easing(easeOutExpo); 10 | width: 100%; 11 | z-index: 7; 12 | 13 | .search-wrapper { 14 | position: relative; 15 | width: 100%; 16 | } 17 | 18 | &.display { 19 | transform: translateY(100%) translate3d(0, 0, 0); 20 | transition: transform .3s easing(easeOutExpo); 21 | } 22 | 23 | form { 24 | display: flex; 25 | width: 100%; 26 | 27 | label { 28 | background-color: #757575; 29 | visibility: collapse; 30 | height: 0; 31 | width: 0; 32 | display: block; 33 | } 34 | } 35 | 36 | .close-icon { 37 | background-color: color(secondary); 38 | cursor: pointer; 39 | padding: 13px; 40 | position: absolute; 41 | right: 0; 42 | top: 0; 43 | transform: translateX(48px) translate3d(0, 0, 0); 44 | transition: transform .3s easing(easeOutExpo); 45 | width: 48px; 46 | 47 | &.show { 48 | transform: translateX(0) translate3d(0, 0, 0); 49 | } 50 | } 51 | 52 | input { 53 | border: 0; 54 | padding: 15px; 55 | width: 100%; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/components/scroll-indicator.scss: -------------------------------------------------------------------------------- 1 | @import '../base/color'; 2 | @import '../base/easing'; 3 | $scroll-indicator-size: 24px; 4 | $scroll-indicator-icon-size: 10px; 5 | 6 | .scroll-indicator { 7 | align-items: center; 8 | background-color: transparent; 9 | border: 0; 10 | cursor: pointer; 11 | display: flex; 12 | height: $scroll-indicator-size; 13 | justify-content: center; 14 | left: 50%; 15 | opacity: 1; 16 | position: fixed; 17 | top: -30px; 18 | transform: translateX(-50%); 19 | width: $scroll-indicator-size; 20 | z-index: 2; 21 | 22 | &__icon { 23 | animation: yoyo-scroll .8s infinite; 24 | border-bottom: 0; 25 | border-left: 2px solid color(invert); 26 | border-right: 0; 27 | border-top: 2px solid color(invert); 28 | display: block; 29 | height: $scroll-indicator-icon-size; 30 | margin: 0; 31 | padding: 0; 32 | position: absolute; 33 | transform: translateY(0) translate3d(0, 0, 0) rotate(45deg); 34 | width: $scroll-indicator-icon-size; 35 | } 36 | } 37 | 38 | @keyframes yoyo-scroll { 39 | from { 40 | transform: translateY(0) translate3d(0, 0, 0) rotate(45deg); 41 | } 42 | 43 | 50% { 44 | transform: translateY(-50%) translate3d(0, 0, 0) rotate(45deg); 45 | } 46 | 47 | to { 48 | transform: translateY(0) translate3d(0, 0, 0) rotate(45deg); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/scripts/model/api.js: -------------------------------------------------------------------------------- 1 | import apiKeys from '../../../api.keys'; 2 | import axios from 'axios'; 3 | 4 | class Api { 5 | constructor(API_KEY, HASH) { 6 | this.publicKey = API_KEY; 7 | this.hash = HASH; 8 | this.timeout = 10000; 9 | this.options = { 10 | limit: 15, 11 | offset: 0 12 | }; 13 | 14 | this.instance = axios.create({ 15 | baseURL: `${apiKeys.baseUrl}/${apiKeys.version}/${apiKeys.folder}/`, 16 | timeout: this.timeout 17 | }); 18 | } 19 | 20 | appendParameters(url, options) { 21 | let { page, orderBy, titleStartsWith, nameStartsWith } = options; 22 | let fetchUrl = `${url}?ts=1&apikey=${this.publicKey}&hash=${this.hash}`; 23 | console.log(`Appending parameters to URL: ${fetchUrl}`); 24 | 25 | this.options.offset = 0; 26 | 27 | if (page > 0) { 28 | page--; 29 | this.options.offset = page * this.options.limit; 30 | } 31 | 32 | let mergedOptions = Object.assign({}, { orderBy }, this.options); 33 | 34 | mergedOptions = titleStartsWith ? Object.assign({}, { titleStartsWith }, mergedOptions) : mergedOptions; 35 | mergedOptions = nameStartsWith ? Object.assign({}, { nameStartsWith }, mergedOptions) : mergedOptions; 36 | 37 | for (let option in mergedOptions) { 38 | fetchUrl += `&${option}=${mergedOptions[option]}`; 39 | } 40 | 41 | return fetchUrl; 42 | } 43 | 44 | get(options) { 45 | return this.instance.get(this.appendParameters(options.url, options)); 46 | } 47 | } 48 | 49 | export default Api; 50 | -------------------------------------------------------------------------------- /src/scripts/pages/detailsCommon.js: -------------------------------------------------------------------------------- 1 | import Infos from '../components/infos' 2 | import React from 'react'; 3 | 4 | export const animateIn = (slides) => { 5 | slides.map((el, index) => { 6 | requestAnimationFrame(() => { 7 | requestAnimationFrame(() => { 8 | el.classList.add('active'); 9 | }); 10 | }); 11 | }); 12 | 13 | const loader = document.querySelector('.slides .loader'); 14 | 15 | setTimeout(() => { 16 | loader.classList.add('show'); 17 | }, 200); 18 | } 19 | 20 | export const enableScroll = () => { 21 | document.querySelector('html').classList.remove('disable-scroll'); 22 | } 23 | 24 | export const disableScroll = () => { 25 | document.querySelector('html').classList.add('disable-scroll'); 26 | } 27 | 28 | export const coverOnLoad = (content, img, slides, positionInfos, tilt) => { 29 | setTimeout(() => { 30 | const loader = document.querySelector('.slides .loader'); 31 | 32 | setTimeout(() => { 33 | positionInfos(); 34 | 35 | content.classList.add('active'); 36 | img.classList.add('show'); 37 | 38 | slides.reverse().map((el, index) => { 39 | loader.classList.remove('show'); 40 | el.classList.remove('active'); 41 | el.classList.add('out'); 42 | }); 43 | 44 | tilt.init(img); 45 | }, 800); 46 | }, 300); 47 | 48 | disableScroll(); 49 | } 50 | 51 | export const infoData = (data, hasItens, title)=> { 52 | return hasItens(data) ?
23 | MARVEL API Explorer is a personal project made by Ion Drimba Filho using ReactJS + Redux and the oficial Marvel API.
24 | It also works as a PWA.
25 |
28 |
29 | 
27 |
28 | API Explorer