bjc1102 / clip-planet

사이트를 클립하고 쉽게 관리할 수 있도록 도와주는 생산성 도구입니다

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

clip-planet


Goal

자주 방문하는 기술 블로그들을 조금 더 간단하게 추가하고 확인할 수 있도록 관리하는 서비스를 개발해보고자 생각했습니다. 고민하고 조사해본 결과 Notion Web Clipper, 크롬의 북마크와 같이 웹사이트 정보를 한 곳에 모아놔 쉽게 저장, 관리할 수 있도록 하는 방식이 좋을거같다고 생각했고 위와 같은 기능들을 참고하여 프로젝트를 진행하였습니다.

서비스 주소

Tech

  • Typescript
  • Client
    • NextJS
    • TailwindCSS
    • React-Query
  • Server
    • NestJS
    • MySQL
    • TypeORM
  • DevOps
    • Docker, Docker-Compose
    • Google Cloud platform
    • Nginx
    • Vercel

Feature summary

  • 기술스택 도입에 대한 고민
  • 개발 과정과 프로젝트 실패에 대한 회고
  • Chrome Extension을 통한 사이트 클립
    • Custom한 Webpack 설정
    • Extension API를 통한 open graph 추출
    • Hook을 통한 서버 상태 관리
  • Google OAuth를 통한 로그인 및 JWT을 통한 로그인 관리
  • Web clip data CRUD
    • REST API를 통한 CRUD 구축
    • 보안, 가독성, 생산성을 위한 ORM 구축(TypeORM)
    • NestJS 구조화 및 Decorator, pipe, DTO 등 디자인 패턴 적용
    • 함수형 프로그래밍 및 코드 리팩토링
  • DevOps
    • 도커를 통한 배포환경 동기화
    • 추가적인 컨테이너 관리를 위한 도커 컴포즈 구축
    • Custom한 NGINX 설정
    • DNS 설정 및 인스턴스 구축

Trouble shooting & Review

Review

Trouble shooting

How to run

디렉토리 별 Readmme 참조

Run Example

Login 화면 기록 2023-04-30 오전 9 28 13

Clip 화면 기록 2023-04-30 오전 9 13 08

Delete 화면 기록 2023-04-30 오전 9 20 38

About

사이트를 클립하고 쉽게 관리할 수 있도록 도와주는 생산성 도구입니다


Languages

Language:TypeScript 90.7%Language:SCSS 4.6%Language:JavaScript 3.7%Language:Dockerfile 0.3%Language:CSS 0.3%Language:HTML 0.3%