pokemon universe - final deploy

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Elison Michell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,49 +1,102 @@
-# **TESTE DE FRONTEND**
+<a href="https://pokemon-universe-elisonmichell.vercel.app">
 
-Neste teste, você será livre para criar uma aplicação consumindo a API que você quiser e com o tema que desejar.
-Contudo, o seu projeto deverá seguir os requisitos mínimos de conteúdo.
+  ![file cover - 1](https://user-images.githubusercontent.com/97061419/212690817-67ad2e1a-f067-4b43-9260-57a44f6e5421.png)
+</a>
 
-SUGESTÕES DE APIS:
-https://github.com/public-apis/public-apis
+<div align="center">
+  <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/ElisonMichell/pokemon-universe?color=FF2330&style=for-the-badge" />
+  <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/ElisonMichell/pokemon-universe?color=FF2330&style=for-the-badge" />
+  <img alt="GitHub license" src="https://img.shields.io/github/license/ElisonMichell/pokemon-universe?color=FF2330&style=for-the-badge" />
+  <img alt="Status" src="https://img.shields.io/static/v1?label=Status&message=Complete&color=202028&style=for-the-badge" />
+  <a href="https://pokemon-universe-elisonmichell.vercel.app">
+    <img alt="Link" src="https://img.shields.io/static/v1?label=Access Page&message=Link&color=9BCC50&style=for-the-badge" />
+  </a>
+</div>
 
----------------------------------------------------------------------
-## REQUISITOS:
+## 📚 About
 
-## GIT
-- Faça um fork deste repositório.
-- Criar uma branch para codar as suas features.
-- Criar um pull-request quando o teste for finalizado e submetido.
+<p> 📌 Project developed for the technical test of Orma Carbon. </p>
+<p>
+  Pokémon Universe is a pokedex made for listing pokémons using the PokéAPI to capture information about pokémons.
+</p>
 
-##### **NOTA: Será avaliado também se o nome da branch, títulos de commit, push e comentários possuem boa legibilidade.**
+## 🌦 Orma Carbon
 
------------------------------------------------------
+  - At Orma Carbon, innovative solutions are created for climate action, emissions compensation and access to the carbon market.
+  - Our solutions range from accessing our projects and credits, to portfolio creation and ESG instruments for purpose-built companies and investors.
+  - Real-time emissions calculation and offsetting within service and e-commerce platforms – affordable and convenient for users, at no cost to platforms.
+
+  Check out more about Orma Carbon's services <a href="https://www.orma.eco">here!</a>
 
-## FRAMEWORK
+## 📦 Features
 
-- Utilizar as ferramentas presentes no framework do projeto (NEXT.JS).
+- [x] Animated video as banner
+- [x] Navigation menu
+- [x] Pokémon search bar
+- [x] Theme switching by context API
+- [x] Listing with detailed information of each pokémon released
+- [x] Interactive status chart
+- [x] Fully responsive and mobile friendly website
 
------------------------------------------------------
+## 🛠 Tech Stack
 
-## ESTILOS
+- HTML5
+- CSS3
+- Javascript
+- NextJS
+- Styled Components
+- Axios
+- REST api
+- Context api
+- Phosphor icons
 
-- Os estilos deste teste devem ser feitos em styled-components (evite utilizar bootstrap, mas se necessário, use).
-- O projeto deverá conter tema claro/escuro e forma do usuário alterar entre os dois.
-- Deve ser totalmente responsivo.
+## 🎨 Gallery
 
------------------------------------------------------
+<div>
+
+  ![localhost_3000_overview (15)](https://user-images.githubusercontent.com/97061419/212695415-a0e54028-6f40-4b74-b1bc-98ae36d7588c.png)
+  ![localhost_3000_overview (3)](https://user-images.githubusercontent.com/97061419/212695697-7ba6145e-eb20-4e2b-b468-fec2e4b96139.png)
+  ![localhost_3000_overview (6)](https://user-images.githubusercontent.com/97061419/212695793-25fc18fa-bd36-499d-99d0-3a0952cebeb4.png)
+  ![localhost_3000_overview (13)](https://user-images.githubusercontent.com/97061419/212695588-71ab4eea-ffd0-4f58-8eda-3573af7d7c92.png)
+  ![localhost_3000_overview (2)](https://user-images.githubusercontent.com/97061419/212696122-e89d63f5-d1e3-419d-8cf8-2d3055bb28cb.png)
+  ![localhost_3000_overview (7)](https://user-images.githubusercontent.com/97061419/212696085-d9eb6fd0-f527-454e-a86e-6179f1fa8acd.png)
 
-## PROJETO
+</div>
 
-- Deve utilizar useContext, useState e useEffect.
-- Ter ao menos 3 paginas navegáveis com router (ex: um navbar para facilitar a navegação).
-- Deve consumir uma API de sua escolha, desde que os dados sejam filtraveis e paginados. No mínimo 15 itens por requisição.
+## 🚀 Getting Started
 
--------------------------------------------------------
+<p>These instructions will get you a copy of the full project up and running on your local machine for development and testing purposes.</p>
+<p>The project can be built with npm or yarn, so choose one of the approach bellow in case you don't have any installed on your system.</p>
 
-## REQUISITOS DIFERENCIAIS:
+- <a href="https://nodejs.org/en/download/">Node.js</a>
+- <a href="https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable">Yarn</a>
+- <a href="https://git-scm.com/downloads">Git</a>
 
-- Código tentando seguir SOLID.
-- Código performático.
-- Utilizar inglês no projeto todo.
-- Utilizar Injeção de Dependências.
-- Fazer deploy do mesmo (heroku, netlify, aws, vercel, github pages ou outro da preferência).
+## ⚙️ Setting up
+
+```bash
+# Clone this repository
+$ git clone https://github.com/pokemon-universe.git
+
+# Go into the repository
+$ cd pokemon-universe
+
+# Switch branch
+$ git checkout pokedex-develop-branch
+
+# Install dependencies
+$ npm install
+
+# start the application
+$ npm run dev
+
+# Now you have a copy of the project to modify and test in your editor.
+```
+
+## 📝 License
+
+This project is under the MIT license. See the <a href="https://github.com/ElisonMichell/pokemon-universe/blob/pokedex-develop-branch/LICENSE">LICENSE</a> for more information.
+
+##
+
+Made with ♥ by Elison Michell 👋 <a href="https://www.linkedin.com/in/dev-elison-michell/">Get in touch!</a>

components/AttributeBox/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import TypeLabel from '../TypeLabel';
+import { Container, Content, Types } from './styles'
+
+function AttributeBox(props) {
+  return(
+    <Container className={props.className}>
+      <header><h3>Attributes</h3></header>
+      <Content>
+        <ul>
+          <li><b>Height:</b> {props.height / 10} m</li>
+          <li><b>Weight:</b> {props.weight / 10} kg</li>
+        </ul>
+        <Types>
+          {
+            props.types.map((item) => (
+                <TypeLabel key={item.type.name} type={item.type.name} />
+            ))
+          }
+        </Types>
+      </Content>
+    </Container>
+  )
+}
+export default AttributeBox;

components/AttributeBox/styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.spacing.md};
+  border: 1px solid ${(props) => props.theme.colors.border};
+  border-radius: ${(props) => props.theme.spacing.md};
+  transition: background 0.3s, color 0.3s, border 0.3s;
+  color: ${props => props.theme.colors.text}
+
+  h3 {
+    margin-bottom: ${(props) => props.theme.spacing.lg};
+  }
+
+  li {
+    list-style: none;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: ${(props) => props.theme.spacing.xs};
+  }
+`
+export const Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const Types = styled.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.spacing.sm};
+`

components/Box/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Container } from './styles'
+
+function Box({title, children}) {
+  return(
+    <Container>
+      {title && 
+        <header className='title'>
+          <h3>{title}</h3>
+        </header>
+      }
+
+      {children}
+    </Container>
+  )
+}
+export default Box;

components/Box/styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const Container = styled.section`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: ${props => props.theme.colors.text+10};
+  padding: ${props => props.theme.spacing.xl};
+  border-radius: ${props => props.theme.spacing.xl};
+  border: 1px solid ${ props => props.theme.colors.border};
+  transition: background 0.3s, color 0.3s, border 0.3s; 
+
+  .title {
+    font-size: ${props => props.theme.fonts.size.lg};
+    font-weight: 600;
+    margin-bottom: ${props => props.theme.spacing.lg};
+    color: ${props => props.theme.colors.text};
+  }
+
+  @media (max-width: ${props => props.theme.breakpoints.sm}) { 
+    padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.lg} ${props => props.theme.spacing.lg};
+  }
+`

components/Button/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Container } from './styles'
+
+function Button(props) {
+  return(
+    <Container {...props}>
+      {props.icon}
+      <span>{props.title}</span>
+    </Container>
+  )
+}
+export default Button;

components/Button/styles.js

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+export const Container = styled.button`
+  display: flex;
+  align-items: center;
+  gap: ${props => (props.title && props.icon) && props.theme.spacing.md};
+  width: ${props => props.flex ? '100%' : 'max-content'};
+  min-width: ${props => !props.icon && '10rem'};
+  border-radius: ${props => (props.rounded && '50%') || props.theme.spacing.md};
+  padding: ${props => props.theme.spacing[props.size] || props.theme.spacing.md};
+  font-size: ${props => props.theme.fonts.size.md};
+  font-weight: 600;
+  cursor: pointer;
+
+  color: ${
+    props => props => (props.active &&
+    props.theme.colors.white) ||
+    props.theme.colors[props.textColor] || 
+    props.theme.colors.text};
+
+  background: ${
+    props => props.active ? 
+    props.theme.colors[props.activeColor] || 
+    props.theme.colors.primary100 :
+    props.theme.colors[props.color] || 
+    props.theme.colors.primary200
+  };
+  transition: background 0.3s, color 0.3s;
+
+  span {
+    text-align: ${props => props.icon && 'start'};
+    flex:1;
+  }
+
+  :hover {
+    background: ${ props => !props.active && (props.theme.colors[props.hoverColor] || props.theme.colors.text+20) };
+  }
+
+  :disabled {
+    pointer-events: none;
+    filter: opacity(0.5);
+  }
+`

components/Card/index.js

@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { Container, Content, Header, Types } from "./styles";
+import { RouteContext } from "../../context/routeContext";
+
+import TypeLabel from "../TypeLabel";
+import Frame from "../Frame";
+
+function Card(props) {
+  const { toPokemonLink } = useContext(RouteContext);
+
+  return (
+    <Container active={props.active} onClick={() => toPokemonLink(props.name)}>
+      {props.sprite && (
+        <Frame
+          src={props.sprite}
+          alt={props.name + " Sprite"}
+          width={360}
+          height={360}
+          priority
+        />
+      )}
+      <Content>
+        <Header>
+          <div>Nº&nbsp;{props.id.toString().padStart(3, "0")}</div>
+          <span>{props.name}</span>
+        </Header>
+        <Types>
+          {props.type &&
+            props.type.map((type, id) => (
+              <TypeLabel key={type} type={props.type[id]} />
+            ))}
+        </Types>
+      </Content>
+    </Container>
+  );
+}
+export default Card;