Skip to content

Commit c09455d

Browse files
ricoloicricoloic
committed
feat: added nextjs app (pokedex)
1 parent c0ed497 commit c09455d

12 files changed

+5400
-0
lines changed

‎next/pokedex/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "next/typescript"]
3+
}

‎next/pokedex/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎next/pokedex/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎next/pokedex/app/favicon.ico

25.3 KB
Binary file not shown.

‎next/pokedex/app/layout.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ThemeProvider } from "@/providers/theme-provider";
2+
import { CssBaseline } from "@mui/material";
3+
import type { Metadata } from "next";
4+
5+
export const metadata: Metadata = {
6+
title: "Create Next App",
7+
description: "Generated by create next app",
8+
};
9+
10+
export default function RootLayout({
11+
children,
12+
}: Readonly<{
13+
children: React.ReactNode;
14+
}>) {
15+
return (
16+
<html lang="en">
17+
<body>
18+
<ThemeProvider>
19+
<CssBaseline />
20+
{children}
21+
</ThemeProvider>
22+
</body>
23+
</html>
24+
);
25+
}

‎next/pokedex/app/page.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Link, List, ListItem, ListItemText, Stack, Typography } from "@mui/material";
2+
3+
export default async function Page() {
4+
const response = await fetch('https://pokeapi.co/api/v2/pokemon');
5+
const body: { results: { name: string, url: string }[] } = await response.json();
6+
7+
return (
8+
<Stack direction='column' padding='2rem' spacing={2}>
9+
<Typography variant='h1' textAlign='center' paddingTop='3rem'>
10+
PokeDex
11+
</Typography>
12+
13+
<List>
14+
{body.results.map((pokemon) => (
15+
<ListItem key={pokemon.name} sx={{ borderWidth: '1px', borderStyle: 'solid', borderColor: 'divider' }}>
16+
<Link href={`/pokemon/${pokemon.name}`}>
17+
<ListItemText>
18+
{pokemon.name}
19+
</ListItemText>
20+
</Link>
21+
</ListItem>
22+
))}
23+
</List>
24+
</Stack>
25+
);
26+
}

‎next/pokedex/app/pokemon/[name]/page.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Box, List, ListItem, ListItemText, Stack, Typography } from "@mui/material";
2+
3+
export default async function Page({ params }: { params: { name: string } }) {
4+
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${params.name}`);
5+
const pokemon = await response.json();
6+
7+
8+
return (
9+
<Stack direction='column' padding='2rem' spacing={2} alignItems='center'>
10+
<Typography variant='h1' textAlign='center' paddingTop='3rem'>
11+
{params.name}
12+
</Typography>
13+
14+
<Box
15+
component='img'
16+
sx={{
17+
height: '350px',
18+
objectFit: 'cover',
19+
width: 'fit-content',
20+
borderWidth: `1px`,
21+
borderStyle: 'solid',
22+
borderColor: 'divider',
23+
borderRadius: '10px',
24+
}}
25+
alt={`Pokemon ${params.name}`}
26+
src={pokemon.sprites.front_default}
27+
/>
28+
29+
<Typography variant="h3">
30+
Abilities
31+
</Typography>
32+
<List>
33+
{pokemon.abilities.map(({ability}) => (
34+
<ListItem key={ability.name}>
35+
<ListItemText>
36+
<Typography variant="h5">
37+
{ability.name}
38+
</Typography>
39+
</ListItemText>
40+
</ListItem>
41+
))}
42+
</List>
43+
</Stack>
44+
)
45+
}

‎next/pokedex/next.config.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

0 commit comments

Comments
 (0)