react-pokemon-app

프로젝트 구성

배포

• https://react-poke-app-2ba8f.web.app/

사용기술

• react.js, typescript, javascript, tailwindCSS
• firebase, vite

프로젝트 설명

프로젝트 리뷰

개선한 부분

개선해야할 점

1. 단조로운 메인 화면과 로그인 화면
2. 더 다양한 정보 불러오기

프로젝트 느낀점

파일 구조

📦src
 ┣ 📂assets
 ┃ ┣ 📜ArrowLeft.tsx
 ┃ ┣ 📜Balance.tsx
 ┃ ┣ 📜GreaterThan.tsx
 ┃ ┣ 📜LessThan.tsx
 ┃ ┣ 📜Loading.tsx
 ┃ ┣ 📜Pokeball.tsx
 ┃ ┗ 📜Vector.tsx
 ┣ 📂components
 ┃ ┣ 📜AutoComplete.tsx
 ┃ ┣ 📜BaseStat.tsx
 ┃ ┣ 📜DamageModal.tsx
 ┃ ┣ 📜DamageRelations.tsx
 ┃ ┣ 📜LazyImage.tsx
 ┃ ┣ 📜NavBar.jsx
 ┃ ┣ 📜PokeCard.tsx
 ┃ ┣ 📜SetColors.jsx
 ┃ ┗ 📜Type.jsx
 ┣ 📂hooks
 ┃ ┣ 📜useDebounce.js
 ┃ ┗ 📜useOnClickOutside.jsx
 ┣ 📂pages
 ┃ ┣ 📂DetailPage
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂LoginPage
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┗ 📂MainPage
 ┃ ┃ ┗ 📜index.tsx
 ┣ 📂types
 ┃ ┣ 📜ClassNameProps.ts
 ┃ ┣ 📜DamageRelationOfPokemonTypes.ts
 ┃ ┣ 📜FormattedPokemonData.ts
 ┃ ┣ 📜PokemonData.ts
 ┃ ┣ 📜PokemonDescription.ts
 ┃ ┣ 📜PokemonDetail.ts
 ┃ ┗ 📜SeparateDamageRelations.ts
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜firebase.js
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┗ 📜test.jsx

설치

npm init vite
npm i

• firebase로 빌드하기

npm run build
firebase deploy