Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/1-blue/blegg

🔥 리그오브레전드 전적 검색 프로젝트 🔥
https://github.com/1-blue/blegg

aws-ec2 aws-s3 framer-motion nestjs passport prisma react-hook-form react-query reactjs storybook swagger tailwindcss typescript vite

Last synced: 1 day ago
JSON representation

🔥 리그오브레전드 전적 검색 프로젝트 🔥

Host: GitHub
URL: https://github.com/1-blue/blegg
Owner: 1-blue
Created: 2023-06-19T00:08:38.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-08-02T04:16:00.000Z (over 1 year ago)
Last Synced: 2024-11-10T07:25:51.925Z (about 2 months ago)
Topics: aws-ec2, aws-s3, framer-motion, nestjs, passport, prisma, react-hook-form, react-query, reactjs, storybook, swagger, tailwindcss, typescript, vite
Language: TypeScript
Homepage: https://bleshop.shop
Size: 2.92 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        > 도메인은 가지고 있던 것 중에서 아무거나 사용했기 때문에 사이트와 맞지 않습니다... 🥲


> 무료 `Riot Api`를 사용하기 때문에 요청 수의 제한이 있어 정상적으로 동작하지 않을 수 있습니다.


> 또한 매일 새로운 키로 업데이트해줘야 하기 때문에 메인 / 소환사 검색 페이지가 정상적으로 작동하지 않을 수 있습니다.

# 📱 blegg

+ ✏️ 개인 프로젝트 - 리그오브레전드 전적 검색 프로젝트

+ ⏱️ 프로젝트 기간: `2023/06/19 ~ 2023/08/01`

+ ⛓️ 배포 링크: [프로젝트 결과물](https://bleshop.shop)

+ 가짜 계정들

  1. 아이디: ( 브론즈 ~ 챌린저 영문 ) + "1"

  2. 비밀번호: 123456789a!




# 📝 문서

1. [API 명세서](https://bleshop.shop/swagger)

2. [GitHub Projects](https://github.com/users/1-blue/projects/4)

3. [Storybook](https://648fa14a937924b712976e49-jagdginlsz.chromatic.com/?path=/docs)




# 🧑‍💻 구현 기능

1. [챔피언](https://github.com/1-blue/blegg/issues/2)

2. [소환사 전적](https://github.com/1-blue/blegg/issues/5)

3. [인증](https://github.com/1-blue/blegg/issues/8)

4. [커뮤니티](https://github.com/1-blue/blegg/issues/11)

5. [프로필](https://github.com/1-blue/blegg/issues/14)

6. [리그](https://github.com/1-blue/blegg/issues/17)




# 🎩 Tech Stack

## 🛠️ Tools

| Git | Github | SourceTree | Window 11 |

| :---: | :---: | :---: | :---: |

| 
 | 
 | 
 | 
 |




## 📤 FrontEnd

| TypeScript | React.js | Vite | Storybook | TailwindCss | React-Query | Framer-Motion | React-Hook-Form |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| 
 | 
 | 
 | 
 | 
 | 
 | 
 | 
 |




## 📥 BackEnd

| TypeScript | Nest.js | Passport | JWT | Prisma | Swagger | S3 | EC2 |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| 
 | 
 | 
 | 
 | 
 | 
 | 
 | 
 |

# 💡 가이드 라인

## 📤 FrontEnd

### 0️⃣ 환경 변수 등록

+ `.env.development`

```

# 테스트용 서버 URL

VITE_SERVER_URL=http://localhost:3050

```

+ `.env.production`

```

# 배포용 서버 URL

VITE_SERVER_URL=https://bleshop.shop

```

### 1️⃣ 종속성 설치

```bash

$ cd frontend

$ npm install

```

### 2️⃣ 개발 모드 실행

```bash

$ npm run dev

```

### 3️⃣ 배포 모드 빌드

```bash

$ npm run build

```

## 📥 BackEnd

### 0️⃣ 환경 변수 등록

+ `.env`

```bash

PORT=3050

NODE_ENV=development

# NODE_ENV=production

# db

DATABASE_URL=

# auth

JWT_SECRET=

# riot

RIOT_API_KEY=

RIOT_VERSION=13.14.1

RIOT_LANGUAGE=ko_KR

# aws ( s3-full-access )

AWS_S3_BUCKET=blegg

AWS_S3_REGION=ap-northeast-2

AWS_S3_ACCESS_KEY=

AWS_S3_ACCESS_SECRET_KEY=

# oauth

FRONT_CALLBACK_URL=http://localhost:5173/oauth

# FRONT_CALLBACK_URL=https://bleshop.shop/oauth

# google oauth

GOOGLE_CLIENT_ID=

GOOGLE_SECRET=

GOOGLE_OAUTH_CALLBACK_URL=http://localhost:3050/auth/google/redirect

# GOOGLE_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/google/redirect

# kakao oauth

KAKAO_CLIENT_ID=

KAKAO_SECRET=

KAKAO_OAUTH_CALLBACK_URL=http://localhost:3050/auth/kakao/redirect

# KAKAO_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/kakao/redirect

# naver oauth

NAVER_CLIENT_ID=

NAVER_SECRET=

NAVER_OAUTH_CALLBACK_URL=http://localhost:3050/auth/naver/redirect

# NAVER_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/naver/redirect

```

### 1️⃣ 종속성 설치

```bash

$ cd backend

$ npm install

$ npm install pm2 -g

```

### 2️⃣ DB 세팅 및 시드 데이터

```bash

$ npx prisma db push

$ npx prisma db seed

```

### 3️⃣ 개발 모드 실행

```bash

$ npm run start:dev

```

### 4️⃣ 배포 모드 빌드 및 실행

```bash

# 빌드

$ npm run build

# 실행

$ npm run start:prod

# pm2로 실행

$ pm2 start npm -- run start:prod

```

# 🎥 실행 영상

## 0️⃣ 모든 챔피언 Carousel

![champions](https://github.com/1-blue/blegg/assets/63289318/feafec0f-b19b-43a4-a70b-be0a0f9ff786)

## 1️⃣ 특정 챔피언

![champion](https://github.com/1-blue/blegg/assets/63289318/644f1dc2-dcc7-4c78-b050-b37c2c4b42c6)

## 2️⃣ 소환사 전적

![Image](https://github.com/1-blue/blegg/assets/63289318/cabf6b4b-1e57-4957-b3a8-5eee64eff88b)

## 3️⃣ 소환사 전적 반응형

![Image](https://github.com/1-blue/blegg/assets/63289318/adb8f4ac-b2e1-45d6-a11e-8fb778fdeb28)

## 4️⃣ 회원가입/로그인

![Image](https://user-images.githubusercontent.com/63289318/252256248-f5e3b34a-01a5-4fb3-9672-d9271f0b5cd4.gif)

## 5️⃣ OAuth 로그인

![Image](https://user-images.githubusercontent.com/63289318/252256249-5c259209-9634-444e-a596-93eb36c025b6.gif)

## 6️⃣ 게시글 생성

![Image](https://github.com/1-blue/blegg/assets/63289318/ee10142e-23ab-43db-bf85-6df2529a9487)

## 7️⃣ 게시글 조회

![Image](https://github.com/1-blue/blegg/assets/63289318/e6aecd98-e47d-4a07-97e8-bdb80d9d5613)

## 8️⃣ 게시글 수정

![Image](https://github.com/1-blue/blegg/assets/63289318/a847a163-7973-4cbc-8f83-dda9c4822de7)

## 9️⃣ 게시글 제거

![Image](https://github.com/1-blue/blegg/assets/63289318/63e00aef-d909-4cb4-8bb0-dd031018708a)

## 1️⃣0️⃣ 게시글 검색

![Image](https://github.com/1-blue/blegg/assets/63289318/f5529605-b5ba-4ed0-a912-59a5502beb59)

## 1️⃣1️⃣ 게시글 평가 ( 좋아요/싫어요 )

![Image](https://github.com/1-blue/blegg/assets/63289318/29770133-6d81-493b-b980-f00a74b5ae19)

## 1️⃣2️⃣ 댓글 CRUD

![Image](https://github.com/1-blue/blegg/assets/63289318/db8465d2-e8b6-4798-8ace-ce33fe97fb4d)

## 1️⃣3️⃣ 답글 CRUD

![Image](https://github.com/1-blue/blegg/assets/63289318/353dfce8-29f0-418b-87cd-8a2600afb85a)

## 1️⃣4️⃣ 프로필 페이지 게시글들 ( 작성/좋아요/싫어요한 )

![Image](https://github.com/1-blue/blegg/assets/63289318/9c172663-7a56-4a7e-b464-ccbb9378c3bb)

## 1️⃣5️⃣ 프로필 수정

![Image](https://github.com/1-blue/blegg/assets/63289318/6f999308-c3a7-4162-9d8e-0b9bebe2531a)

## 1️⃣6️⃣ 상위 리그 유저들 렌더링

![Image](https://user-images.githubusercontent.com/63289318/257180011-2d71b464-2e32-4ac7-bdca-230bce3f07c7.gif)