Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nalsae/my-pokedex-client

😺 나만의 포켓몬 도감, My Pokedex 😺
https://github.com/nalsae/my-pokedex-client

apollo-client framer-motion graphql next tailwindcss typescript zustand

Last synced: 3 months ago
JSON representation

😺 나만의 포켓몬 도감, My Pokedex 😺

Host: GitHub
URL: https://github.com/nalsae/my-pokedex-client
Owner: nalsae
Fork: true (My-Pokedex/my-pokedex-client)
Created: 2023-07-03T14:50:50.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-10-16T17:23:13.000Z (about 1 year ago)
Last Synced: 2023-10-17T07:45:36.209Z (about 1 year ago)
Topics: apollo-client, framer-motion, graphql, next, tailwindcss, typescript, zustand
Language: TypeScript
Homepage: https://my-poke-dex.vercel.app/
Size: 1.66 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 😺 My Pokedex

![main](https://github.com/My-Pokedex/my-pokedex-client/assets/101828759/e6b607cb-a96d-471b-908f-3493b5a1803a)

    
📁 나만의 쉽고 편리한 포켓몬 도감, My Pokedex 📁
 




> 🤔 포켓몬 관련 정보, 항상 검색하기 너무 귀찮지 않으신가요? 


> 


> 포켓몬 이름, 타입, 도감 번호 등의 기준으로 **포켓몬을 검색하는** 기능, 


> **타입별 포켓몬의 상성을 볼 수 있는** 기능, 


> 나만의 포켓몬 조합을 기록하는 **나만의 조합** 기능까지! 


> 


> 😺 **My Pokedex** 😺에서 쉽고 편리하게 포켓몬 관련 정보를 열람하세요! 😊




------------




## 🚩 프로젝트 개요

* **프로젝트 명** : My Pokedex

* **진행 기간** : 23.08.01 ~ (임시 중단)

* **서비스 URL** : [😺 My Pokedex 😺 바로 가기](https://growstory.vercel.app/)




## 👨‍👩‍👧‍👦 팀원 소개

| 김민석 |

| :---: |

|  |

| [@nalsae](https://github.com/nalsae) |

| 기획, 디자인, 개발 **총괄** |




## 🔧 기술 스택

### 🔨 Front-End

![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) 

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![GraphQL](https://img.shields.io/badge/-GraphQL-E10098?style=for-the-badge&logo=graphql&logoColor=white)

![Apollo-GraphQL](https://img.shields.io/badge/-ApolloGraphQL-311C87?style=for-the-badge&logo=apollo-graphql)

![Zustand](https://img.shields.io/badge/zustand-%2320232a.svg?style=for-the-badge&logo=react&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

### 🔨 Back-End (미정)

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![GraphQL](https://img.shields.io/badge/-GraphQL-E10098?style=for-the-badge&logo=graphql&logoColor=white)

![Apollo-GraphQL](https://img.shields.io/badge/-ApolloGraphQL-311C87?style=for-the-badge&logo=apollo-graphql)

### 🔨 DevOps

![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)




## 📝 관련 문서

#### [📌 와이어 프레임](https://www.figma.com/file/Bhf6nj7ZZ3ok6YASdHvoTv/Pokedex?type=design&node-id=2-5&mode=design)

#### [📌 컴포넌트 명세서](https://www.figma.com/file/Bhf6nj7ZZ3ok6YASdHvoTv/Pokedex?type=design&node-id=2-6&mode=design)

#### [📌 디자인 프로토타입](https://www.figma.com/file/Bhf6nj7ZZ3ok6YASdHvoTv/Pokedex?type=design&node-id=2-8&mode=design)

#### [📌 진행 현황 및 기록](https://my-pokedex.notion.site/Pokedex-0757927d7a40462abdd096025e2f8927?pvs=4)




## 🖥 구현 이미지

| 페이지 (기능)           | 이미지                                                                           |

| ---------------------- | -------------------------------------------------------------------------------------- |

| 메인              | ![메인 페이지](https://github.com/My-Pokedex/my-pokedex-client/assets/101828759/1b721a20-8b0b-4979-b814-c3309bf8a82d)|

| 포켓몬 검색   |  ![포켓몬 검색 페이지](https://github.com/My-Pokedex/my-pokedex-client/assets/101828759/e8b6bff7-ab7d-49f2-8154-e48ced8fd9fa)|

| 포켓몬 상세 정보              |![포켓몬 상세 정보 페이지](https://github.com/My-Pokedex/my-pokedex-client/assets/101828759/871bf3d5-1462-48a6-b084-7bf239bc1345)|

| 타입별 상성        | ![타입별 상성 페이지](https://github.com/My-Pokedex/my-pokedex-client/assets/101828759/08bbebc7-490a-460c-8ee2-a01e715052cd)|




## 🤙 컨벤션

  
📌 Issue

  

  1. 제목

    

  - 작업 내용에 따라 커밋 메시지에 사용하는 Gitmoji를 적절하게 작성

  - 자신이 작업한 내용을 한 눈에 파악하기 쉽도록 명사형으로 작성

    

```

✨ OOO 컴포넌트 구현

```

  2. 내용

    ## Abstracts

    * 간략하게 할 일에 대한 설명을 작성해주세요.

    

    ## To Do

    - [ ] 구현할 기능 1

    - [ ] 구현할 기능 2

    

    ## ETC

    * 추가적인 안내 사항이 있다면 작성해주세요.

  
📌 Commit


  - 커밋 메시지

  

  1. 적절한 커밋 접두사 작성

  2. 커밋 메시지 내용 작성

  3. 내용 뒤에 이슈 (#이슈 번호)와 같이 작성하여 이슈 연결

    🔧 Conf: 초기 환경 설정 (#1)

  | 접두사 | 설명  |

  | --- | --- |

  | ✨ Feat : | 새로운 기능 구현  |

  | 🍱 Add :  | 에셋 파일 추가 |

  | 🐛 Fix : | 버그 수정 |

  | 📝 Docs : | 문서 추가 및 수정 |

  | 🎨 Style : | Formatting 변경 (코드 변경 없음) |

  | ♻️ Refactor : | 코드 리팩토링 (동작 변경 없음) |

  | 🧪 Test : | 테스트 |

  | 🚀 Deploy : | 배포 |

  | 🔧 Conf : | 빌드, 환경 설정 |

  | ✏️ Chore : | 기타 작업 |

  
📌 Pull Request


  1. 제목

  - 작업 내용에 따라 커밋 메시지에 사용하는 Gitmoji를 적절하게 작성

  - 자신이 작업한 내용을 한 눈에 파악하기 쉽도록 명사형으로 작성

    

```

 ✨ OOO 컴포넌트 구현

```

  2. 내용

    ## Title

    * 제목은 '✨ 홈 페이지 구현'과 같이 작성합니다.

    

    ## PR Type

    - [ ] FEAT: 새로운 기능 구현

    - [ ] ADD : 에셋 파일 추가

    - [ ] FIX: 버그 수정

    - [ ] DOCS: 문서 추가 및 수정

    - [ ] STYLE: 포맷팅 변경

    - [ ] REFACTOR: 코드 리팩토링

    - [ ] TEST: 테스트 관련

    - [ ] DEPLOY: 배포 관련

    - [ ] CONF: 빌드, 환경 설정

    - [ ] CHORE: 기타 작업

    

    ## Abstracts

    * 작업 내용에 대해 간략하게 설명을 작성해주세요.

    

    ## Description

    * 구체적인 작업 내용을 작성해주세요.

    * 이미지를 별도로 첨부하면 더 좋습니다 👍

    

    ## Discussion

    * 추후 논의할 점에 대해 작성해주세요.

    

    ---

    Close #1

    (작성한 Issue를 연결해주세요.)