DevCled85/App_ProjectPokedex
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: DevCled85:f76ea3ebf87facee847fe0a559e0c27ee82cc836
Branches Tags
DevCled85:main
..
compare: DevCled85:f377e314d05c53784ce551a8d081ad892dff1e2c
Branches Tags
DevCled85:main

3 Commits
f76ea3ebf8 ... f377e314d0

Author SHA1 Message Date
Cledson do Nascimento Pereira
f377e314d0 updating used technologies README 2025-04-24 17:18:16 -04:00
Cledson do Nascimento Pereira
dbb5216d0f add screenshot App 2025-04-24 17:18:16 -04:00
Cledson do Nascimento Pereira
11b8d663a9 Initial commit 2025-04-24 17:18:16 -04:00
19 changed files with 2047 additions and 0 deletions
Show Stats Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) [year] [fullname]
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.

38
README.md Normal file
View File

@ -0,0 +1,38 @@
# 📱 App Project Pokedex
Um app simples criado com Vue.js e Vite, que consome a PokéAPI e exibe uma lista com 20 Pokémon. Cada card mostra o ID, nome e até 2 habilidades principais do Pokémon.
## 📸 Preview
![Preview do App](./public/screenshot/screenshot.png)
## 🚀 Funcionalidades
- 📦 Consumo da PokéAPI
- 🧩 Renderização de 20 Pokémon em um grid
- 💡 Cards com:
- ID
- Nome
- Até 2 habilidades principais
## 🛠️ Tecnologias Utilizadas
- [Vue.js](https://vuejs.org/) - Framework JavaScript progressivo
- [Pinia](https://pinia.vuejs.org/) - Gerenciador de estado para Vue.js
- [Vite](https://vitejs.dev/) - Ferramenta de build e desenvolvimento rápido
- [PokéAPI](https://pokeapi.co/) - API pública de dados dos Pokémon
## ▶️ Como rodar o projeto
```bash
# Clone o repositório
git clone https://github.com/DevCled85/App_ProjectPokedex.git
# Acesse a pasta
cd App_ProjectPokedex
# Instale as dependências
npm install
# Inicie o projeto
npm run dev

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projeto Pokedex @DevCled85</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1665
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "project-pokedex-cled",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.8.4",
"pinia": "^3.0.2",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.2",
"vite": "^6.3.1"
}
}

BIN
public/screenshot/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 KiB

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

27
src/App.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div>
<CompHeader />
<CompMain />
<CompFooter />
</div>
</template>
<script setup>
import CompHeader from './components/CompHeader.vue';
import CompFooter from './components/CompFooter.vue';
import CompMain from './components/CompMain.vue';
</script>
<style scoped>
div {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 1200px;
width: 100%;
height: 100vh;
}
</style>

1
src/assets/vue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

74
src/components/CompCardPokemon.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="cardPokemon">
<img :src="pokemon.image" :alt="pokemon.name" class="capa" />
<p>Nº {{ pokemon.id }}</p>
<h1>{{ pokemon.name }}</h1>
<div>
<span v-for="(ability, index) in pokemon.abilities" :key="index">{{ ability }}</span>
</div>
</div>
</template>
<script setup>
defineProps({
pokemon: Object
})
</script>
<style scoped>
.cardPokemon {
width: 300px;
border: 2px solid #555;
background-color: #222;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all .3s ease-in-out;
&:hover {
transform: scale(1.05);
}
& img {
width: 100%;
height: 280px;
object-fit: contain;
background-color: #f1f1f1;
}
& p {
width: 100%;
text-align: center;
font-size: 12px;
font-style: italic;
margin-block: 10px;
}
& h1 {
font-size: 16px;
margin-bottom: 10px;
text-transform: capitalize;
}
& div {
width: 100%;
display: flex;
padding: 5px 10px;
justify-content: space-around;
flex-wrap: wrap;
& span {
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
margin-bottom: 5px;
background-color: blueviolet;
color: white;
text-transform: capitalize;
}
}
}
</style>

21
src/components/CompFooter.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<footer>
<p>Desenvolvido por @DevCled85 &COPY;2025</p>
</footer>
</template>
<script setup>
defineOptions({
name: 'CompFooter'
})
</script>
<style scoped>
footer {
text-align: center;
background-color: purple;
padding: 12px;
font-size: 12px;
}
</style>

22
src/components/CompHeader.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<header>
...:: Projeto pokedex ::...
</header>
</template>
<script setup>
defineOptions({
name: 'CompHeader'
})
</script>
<style scoped>
header {
text-align: center;
/* width: 100%; */
padding: 24px;
background-color: purple;
font-size: large;
font-weight: bold;
}
</style>

40
src/components/CompMain.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<main>
<div v-if="pokemons.length === 0">Carregando pokémons...</div>
<div class="pokemonsCard" v-else>
<CompCardPokemon v-for="pokemon in pokemons" :key="pokemon.id" :pokemon="pokemon" />
</div>
</main>
</template>
<script setup>
import CompCardPokemon from './CompCardPokemon.vue'
import { onMounted } from 'vue'
import { usePokemonStore } from '../stores/pokemonStore'
import { storeToRefs } from 'pinia'
const store = usePokemonStore()
const { pokemons } = storeToRefs(store)
onMounted(() => {
store.fetchPokemons()
})
defineOptions({
name: 'CompMain'
})
</script>
<style scoped>
main {
padding-block: 24px;
}
.pokemonsCard {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: center;
}
</style>

6
src/main.js Normal file
View File

@ -0,0 +1,6 @@
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import './style.css';
import App from './App.vue';
createApp(App).use(createPinia()).mount('#app')

28
src/stores/pokemonStore.js Normal file
View File

@ -0,0 +1,28 @@
// stores/pokemonStore.js
import { defineStore } from 'pinia'
import axios from 'axios'
export const usePokemonStore = defineStore('pokemonStore', {
state: () => ({
pokemons: []
}),
actions: {
async fetchPokemons() {
try {
const promises = []
for (let i = 1; i <= 20; i++) {
promises.push(axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`))
}
const results = await Promise.all(promises)
this.pokemons = results.map(res => ({
id: res.data.id,
name: res.data.name,
image: res.data.sprites.other['official-artwork'].front_default,
abilities: res.data.abilities.map(a => a.ability.name)
}))
} catch (err) {
console.error('Erro ao buscar pokémons:', err)
}
}
}
})

35
src/style.css Normal file
View File

@ -0,0 +1,35 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
#app {
width: 100vw;
display: flex;
justify-content: center;
}

7
vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})