1-blue / deprecated-blegram

인스타그램 클론 코딩

🐲 blegram

공부를 목적으로 만든 인스타그램 클론 웹사이트입니다.

• blegram 사이트
• velog 일지
• youtube
• trello

현재 프론트와 백엔드 두 개의 서버를 돌려서 한 달에 15일만 무료로 사용할 수 있기 때문에 매달 1일 ~ 15일 까지만 서버가 열려있을 수 있습니다.

🛠️ 사용 라이브러리 🛠️

💁‍♂️ 사용 툴 🙋‍♂️

🙌 구현 기능

1. 유저 CRUD
2. 로그인/회원가입 ( local )
3. 게시글 CRD ( 영상처리 불가능 )
4. 댓글/답글 CRD
5. 게시글/댓글/답글의 좋아요 CRD
6. 팔로잉/팔로우 CRD
7. 해시태그 CRD ( + 검색 )
8. 게시글 무한 스크롤링
9. DM ( 1 : 1 채팅 )
10. 게시글 북마크
11. 내 게시글들 보기 ( 업로드한 게시글, 북마크된 게시글 )

🛠️ 제작환경

1. OS: Window11
2. editor: VSCode, Sourcetree
3. terminal: git bash
4. Database: docker - mysql-server
5. vcs: Git / GitHub
6. Front: Next.js
7. Back: Node.js
8. 배포: AWS EC2 ubuntu 20.04

👇 가이드라인

1. 프론트엔드

• 종속성 설치

cd frontend
npm install

# npx 가능하다면 설치 안 해도 됨
sudo npm install -g pm2

• .env.development, .env.production 생성

NEXT_PUBLIC_SERVER_URL=<작성>
NEXT_PUBLIC_PHOTO_URL=<작성>
NEXT_PUBLIC_FRONT_URL=<작성>

• 빌드

npm run build

• 실행

# 개발 시
npm run dev

# 배포 시
pm2 start npm -- start

2. 백엔드

• 종속성 설치

cd backend
npm install

# npx 가능하다면 설치 안 해도 됨
sudo npm install -g pm2

• .env 생성

NODE_ENV=<작성>
COOKIE_SECRET=<작성>
DATABASE_NAME=<작성>
DATABASE_USER_NAME=<작성>
DATABASE_PASSWORD=<작성>
DATABASE_HOST=<작성>
KAKAO_KEY=<작성>

BLEGRAM_AWS_REGION=<작성>
BLEGRAM_AWS_ACCESS_KEY=<작성>
BLEGRAM_AWS_SECRET_KEY=<작성>

• 실행

sudo npm start
sudo pm2 log
sudo pm2 monit

# npx 가능하다면
sudo npx pm2 start app.js
sudo npx pm2 log
sudo npx pm2 monit

📽️ 실행 영상

1. 인피니티 스크롤링

2. 이미지 캐루셀

3. 댓글/답글

4. 좋아요/북마크/팔로우/언팔로우

5. 채팅

6. 나의 프로필 페이지

7. 해시태그 검색