1-blue / deprecated-blegram1

인스타그램 클론 개인 프로젝트 ( next.js 13, react-query 학습을 목표 )

📱 blegram

• ✏️ 개인 프로젝트 - 인스타그램 클론 코딩
• ⏱️ 프로젝트 기간: 2023/03/24 ~ 2023/06/05
• ⛓️ 배포 링크: 프로젝트 결과물
• 가짜 계정: a/a, b/b, c/c, d/d로 로그인 가능

📝 문서

1. API 명세서
2. GitHub Projects
3. Blog
4. Commit Convention
5. Git Branch Strategy

🧑‍💻 구현 기능

1. 로그인 / 회원가입 ( 일반 로그인 JWT )
2. 유저 CRUD ( 이미지, 비밀번호 따로 )
3. 게시글 CUD ( + 이미지 업로드 )
4. 북마크 & 좋아요 & 팔로우
5. 해시태그 ( #으로 시작하는 글자 )
6. 검색 & 추천 검색어 & 최근 검색어
7. AWS-S3의 prisignedURL을 이용한 이미지 처리
8. AWS-RDS와 prisma를 이용한 서버측 데이터 처리
9. react-query를 이용한 클라이언트측 데이터 관리

🎩 Tech Stack

🛠️ Tools

Git	Github	GitBook	SourceTree

📥 FrontEnd

TypeScript	Next.js	React-Query	styled-components	recoil	vercel

📥 BackEnd

jwt	prisma	mysql	rds	s3

💡 가이드 라인

0️⃣ 환경 변수 등록

# prisma seed에서 사용
# NODE_ENV=development
NODE_ENV=production

# ...
BASE_URL=http://127.0.0.1:3000

# rds
DATABASE_URL="mysql://<유저명>:<비밀번호>@blegram.chu2aece13mr.ap-northeast-2.rds.amazonaws.com:3306/<DB명>"

# localhost
# DATABASE_URL="mysql://root:<비밀번호>@localhost:3306/blegram"

# access, refresh 토큰을 만드는 데 사용하는 값
ACCESS_SECRET=
REFRESH_SECRET=

# AWS-S3를 이용하기 위한 key
AWS_S3_BUCKET=blegram
AWS_S3_REGION=ap-northeast-2
AWS_S3_ACCESS_KEY=
AWS_S3_ACCESS_SECRET_KEY=

1️⃣ 종속성 설치

npm install

2️⃣ 개발 모드 실행

npm run dev

3️⃣ 배포 모드 빌드 및 실행

rm -rf .next && npm run build && npm start

4️⃣ prisma seed

npx prisma db push
npx prisma db seed