├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── components │ ├── Layout │ │ ├── index.js │ │ └── styles.css │ ├── Menu │ │ └── index.js │ └── Searcher │ │ ├── index.js │ │ └── styles.css ├── containers │ ├── App.js │ └── Home │ │ ├── index.js │ │ └── styles.css ├── index.css ├── index.js ├── setupTests.js ├── statics │ └── images │ │ └── logo_v4.svg └── utils │ └── constants.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pokedux ![Status badge](https://img.shields.io/badge/status-in%20progress-yellow) 2 | 3 | ✨ Encuentra tus pokemones favoritos y descubre todas sus habilidades para convertirte en el mejor Maestro Pokemón usando REDUX. 4 | 5 | ## 🚀 Instalación 6 | 7 | 1. Clona este proyecto. 8 | 2. Ve a la carpeta del proyecto 9 | `cd pokedux` 10 | 3. Instala las dependencias 11 | `yarn` 12 | 4. Corre el ambiente local 13 | `yarn start` 14 | 15 | ## 🛠 Despliegue 16 | 17 | 1. Una vez instsaladas las dependencias, puedes hacer el build 18 | `yarn build` 19 | 20 | ## 🦀 Base de Datos Pokemon 21 | 22 | Todos los datos vienen de [PokeApi](https://pokeapi.co/) 23 | 24 | ## 🧾 License 25 | 26 | The MIT License (MIT) 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-course", 3 | "version": "0.1.0", 4 | "private": true, 5 | "author": { 6 | "name": "Mariangélica Useche", 7 | "email": "mariangelica.useche@gmail.com" 8 | }, 9 | "dependencies": { 10 | "@testing-library/jest-dom": "^5.11.4", 11 | "@testing-library/react": "^11.1.0", 12 | "@testing-library/user-event": "^12.1.10", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-scripts": "4.0.3", 16 | "semantic-ui-css": "^2.4.1", 17 | "semantic-ui-react": "^2.0.4", 18 | "web-vitals": "^1.0.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/musartedev/pokedux/27c33ec97c42859e3e0015be29f046ae6e2df5ce/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ✨ Pokedux: Encuentra tu Pokèmon favorito 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Pokedux", 3 | "name": "Pokedux: Pokedex creada con Redux", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Menu from '../Menu'; 3 | import './styles.css'; 4 | 5 | const Layout = ({ children }) => { 6 | return ( 7 |
8 | 9 |
{children}
10 |
11 | ); 12 | }; 13 | 14 | export default Layout; 15 | -------------------------------------------------------------------------------- /src/components/Layout/styles.css: -------------------------------------------------------------------------------- 1 | .Layout-content { 2 | margin-top: 62px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Menu/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Menu as SemanticMenu, Container, Image } from 'semantic-ui-react'; 3 | import logo from '../../statics/images/logo_v4.svg'; 4 | 5 | const Menu = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | Home 13 | 14 | Favorites 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Menu; 22 | -------------------------------------------------------------------------------- /src/components/Searcher/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Grid, Search } from 'semantic-ui-react'; 3 | import './styles.css'; 4 | 5 | export default function SearchBar() { 6 | return ( 7 |
8 | 9 | 15 | 21 | 22 | 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Searcher/styles.css: -------------------------------------------------------------------------------- 1 | .Searcher { 2 | margin: auto; 3 | } 4 | -------------------------------------------------------------------------------- /src/containers/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../components/Layout'; 3 | import Home from './Home'; 4 | import 'semantic-ui-css/semantic.min.css'; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/containers/Home/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Searcher from '../../components/Searcher'; 3 | import './styles.css'; 4 | 5 | function Home() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default Home; 14 | -------------------------------------------------------------------------------- /src/containers/Home/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #934acc; 3 | } 4 | 5 | .Home { 6 | padding: 25px; 7 | } 8 | 9 | .wrapper { 10 | margin: 2rem auto; 11 | max-width: 1200px; 12 | } 13 | 14 | .ui.card > .image, .ui.cards>.card>.image { 15 | background-color: rgba(var(--main-color), 0.5); 16 | } 17 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/statics/images/logo_v4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const FAV_COLOR = 'yellow'; 2 | export const MAIN_COLOR = 'violet' 3 | --------------------------------------------------------------------------------