Git Product home page Git Product logo

gpt-noting's Introduction

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

gpt-noting

gpt-noting's People

Contributors

jaewoong2 avatar hot-ttu avatar

Watchers

avatar

gpt-noting's Issues

[✨ Docs]

기능명세

Flow

  1. Chrome 익스텐션을 다운로드 받는다.
  2. 다운로드 받으면 ChatGpt에 아래와 같은 저장하기 버튼이 생성된다.
  • image
  1. 저장하기 버튼을 누르면 backend 서버로 요청이 간다.
  2. 확인하기 버튼이 생기면서, 저장한 응답을 볼 수 있는 서비스로 갈 수 있게 된다.
  3. 저장한 응답을 본다.

목표 (MVP)

  1. 개인 아카이빙
  • 공개/비공개
  • 제목설정
  1. 퍼블릭 아카이빙 (피드)

목표

  1. 개인아카이빙
  • 폴더/태그 분류 해서 모아볼 수 있도록
  1. 답변에 대한 기능
  • 메모 / 좋야요
  1. 유저에 대한 기능
  • 팔로우
  • 유저 검색

[📄 Document] Noting 사용 방법

서론

ChatGPT 를 사용 하면서 기록이 쌓아가기만 하는걸 보신 경험이 있으실 겁니다..

겁나 싸여가는 대화들...

저 또한, 엄청난 대화 기록들이 쌓여있는데유.. 이 대화들 안 에서도 또한, 수 많은 인사이트를 얻었던 수 많은 GPT의 응답이 있었죠...

근데, 또 물어보고 또 대답받고 또 지나치는게 너무 아깝다고 생각해서, GPT 응답 기록을 저장할 수 있는 서비스가 무엇이 있을까

또, 내가 답변받은 인사이트를 얻은 응답 뿐 아니라 다른 사람들이 받은 응답 또한 볼 수 있으면 정말 좋겠다 라는 생각이 들었습니다..

즉 제 pain point는

    1. GPT의 응답을 저장 할 수 있으면 좋겠다
    1. 내가 저장한 것 뿐 아니라, 남이 저장한 것 또한 보면서 배움을 넓히고 싶다

이 2가지 였습니다.

아무리 웹서핑을 하더라도 1번째 고민만 해결 해 줄뿐, 공유 하고 하나의 플랫폼이 되어 있는 서비스가 없더라구요..

그래서 직접 만들어야겠다고 생각 했습니다.

Noting 을 개발하다

image

먼저, Noting | Chorme Extension 다운로드 링크 링크에 접속하여, Chrome에 추가를 누릅니다.

image

추가 버튼을 누르면, 아래와 같이 저장하기 버튼이 생기고 해당 버튼을 클릭하면,

image

저장 된 내역을 확인 할 수 있는 링크가 나옵니다. 이 링크를 타고 가면, 응답이 저장되었음을 확인 할 수 있습니다.

image

그 외에도, 좋아요 및 검색 메인 페이지에서 다른 사람들이 저장한 것들을 보면서 인사이트를 얻어 갈 수 있습니다.

[✨ Feat] 2. 좋아요 기능 구현 (좋아요 눌렀을때 Optimistic Update / UI)

@Hot-ttu

✨어떤 기능인가요?

좋아요 기능 구현 (좋아요 눌렀을때 Optimistic Update / UI)

image

📋 작업 상세 내용 (Required)

  • 1. 좋아요 클릭시 낙천적 업데이트 Optimistic Update 구현하기
  • 2. 좋아요 취소시 낙천적 업데이트 Optimistic Update 구현하기

🗞️ 참고할만한 자료 (Optional)

[✨ Feat] 1. 검색 기능 구현 - 성능 최적화

✨어떤 기능인가요?

검색 기능 구현 (Navigation Bar 에 있는 돋보기 아이콘 클릭 시 검색 Dialog을 통한 검색 기능 구현)

📋 작업 상세 내용 (Required)

  • 1. 돋보기 아이콘 클릭시 Dialog Open / (배경 클릭 및 취소 버튼 클릭 시 Close)
�NavBar Dialog 예시

  • 2. Debounce 를 통한 검색 구현 하기 (API 요청 횟수 감소 / 리렌더링 회수 줄이기)

  • 3. <Input /> 을 통한 검색 뿐 아니라 검색 창 아래에 결과화면 까지 구현 할 것

🗞️ 참고할만한 자료 (Optional)

[✨ Feat] 3. UX 최적화 (스켈레톤 UI + Suspense 구현 / NextJS Loading, Error 및 각종 페이지 화면 최적화 방법 사용)

✨어떤 기능인가요?

UX 최적화 (스켈레톤 UI + Suspense 구현 및 각종 페이지 화면 최적화 방법 사용)

📋 작업 상세 내용 (Required)

  • 메인 페이지 최초 접속시 1~3초 간 (API 요청 동안) 스켈레톤 이미지 구현하기
  • 각종 API 요청시 안보이는 UI/UX 스켈레톤 이미지 구현하기
  • Cloud Front 를 이용해서 Static 파일 캐싱 하기

🗞️ 참고할만한 자료 (Optional)

[✨ Feat] 5. CSR 방법으로 API사용 해서 그리는 것 일부 SSR로 변경

✨어떤 기능인가요?

현재 메인페이지 접속시, CSR 을 통해서 API를 요청후 결과 값에 따라 API 요청 하고 있음 -> 최초 10개만 SSR로 요청하고 그 후부터는 CSR 사용하기

  • 메인 페이지 이외에 최초 접속시 보여져야 하는 값들은 SSR 처리하기

📋 작업 상세 내용 (Required)

  • Main Page 작업하기
  • User Page 작업하기
  • API 호출 공통 컴포너트 작업하기

[✨ Feat] 4. 인피니티 스크롤 구현 - (Intersection Observer 패턴 사용)

@Hot-ttu

✨어떤 기능인가요?

인피니티 스크롤 구현 마무리 (Intersection Observer 패턴 사용)

📋 작업 상세 내용 (Required)

  • 맨 마지막 DOM이 화면에 보였을 때, 다음 페이지 요청하기 (Intersection Observer 사용)
  • React Query UseInfiniteQuery 정리해서 문서화 하기 (Issues 및 주석 으로)

🗞️ 참고할만한 자료 (Optional)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.