https://github.com/zgramming/phincon-pokemon-fe

Implementation Poke API
https://github.com/zgramming/phincon-pokemon-fe

mantine nextjs swr tailwind zustand

Last synced: 2 months ago
JSON representation

Implementation Poke API

• Host: GitHub
• URL: https://github.com/zgramming/phincon-pokemon-fe
• Owner: zgramming
• Created: 2024-04-25T13:49:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-26T06:00:35.000Z (about 2 years ago)
• Last Synced: 2025-05-17T07:41:03.621Z (about 1 year ago)
• Topics: mantine, nextjs, swr, tailwind, zustand
• Language: TypeScript
• Homepage:
• Size: 3.83 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend for Library Apps

The project builds using Next JS, Tailwind CSS, Mantine, SWR, Zustand

## Manual Installation

```bash

git clone https://github.com/zgramming/phincon-pokemon-fe.git

cd phincon-pokemon-fe

```

Install the dependencies:

```bash

npm install

```

Set the environment variables:

```bash

cp .env.example .env

# open .env and modify the environment variables

```

## Table of Contents

- [Commands](#commands)

- [Environment Variables](#environment-variables)

- [Pages](#pages)

## Commands

Running in development:

```bash

npm run dev

```

Running in production:

```bash

# build

npm run build

# start

npm run start

```

## Environment Variables

The environment variables can be found and modified in the `.env` file.

```bash

# API Url

NEXT_PUBLIC_BASE_API_URL = 'http://localhost:4000/api/v1'

NEXT_PUBLIC_BASE_API_POKEMON_URL = 'https://pokeapi.co/api/v2'

```

### Pages

List of available pages:

**Home**\

![alt text](screenshot/home.png)

**Detail**\

![alt text](screenshot/detail.png)

**My Pokemon**\

![alt text](screenshot/my-pokemon.png)

**Flow Catch Pokemon**\

![alt text](gif/flow-catch-pokemon.gif)

**Flow Release Pokemon**\

![alt text](gif/flow-release-pokemon.gif)

**Flow Rename Pokemon**\

![alt text](gif/flow-rename-pokemon.gif)