top of page

Cookingtopia

이 프로젝트는 Next.js를 사용하여 Google 로그인을 한 후,  Text Prompt의 생성, 읽기, 수정, 삭제(CRUD) 기능을 제공합니다. 사용자는 웹 인터페이스를 통해 텍스트를 생성하고 관리할 수 있습니다.

Demo website

https://cookingtopia-iey1jf5s4-stephfees-projects.vercel.app/

Github

https://github.com/hurabono/img-generator

Technologies Used

  • 프론트엔드 프레임워크: Next.js

  • 백엔드: Next.js, GoogleAuth

  • 데이터베이스: MongoDB

  • 기타 도구: Tailwind CSS

9.png

Project Features

  • Text Prompt 생성: 사용자는 특정 주제 또는 키워드로 텍스트를 생성할 수 있습니다.

  • Text Prompt 조회: 생성된 텍스트 목록을 보여주고, 다른사람들과 함께 생성된 Prompt 를 공유할 수 있습니다.

  • Text Prompt 수정: 텍스트 작성자는 본인의 페이지에서 기존의 Text Prompt를 수정할 수 있습니다.

  • Text Prompt 삭제: 더 이상 필요하지 않은 Text Prompt를 삭제할 수 있습니다.

  • 보안 및 데이터 저장: 사용자의 Text Prompt 데이터를 안전하게 저장하기 위해 데이터베이스 및 보안 프로토콜을 구현했습니다.

  • 응답성 및 성능: Next.js의 장점을 활용하여 빠르고 반응성 있는 웹 애플리케이션을 구축했습니다.

  • 태그 기능: 태그를 클릭하면 자동으로 필더링 되며 태그를 통한 검색도 가능합니다.

11.png

Challenges & Results

  1. 상태 관리: 최신 Next.js 로 'use client' 구성요소가 추가됨으로써 서버와 클라이언트 구성 요소 모듈 간의 경계를 선언하는 데 사용됩니다. 이러한 기능을 통해 FullStack 개발이 더욱 빠르고 간편해졌습니다.

  2. 백엔드 연동: Google 로그인 인증과, Mongo DB에 데이터를 통해 Collection 창에 정보를 띄우는데 조금 헷갈리고 힘이드는 부분이 있었습니다. 본인이 Google Login API 를 처음 이용했을 뿐더러 Next.js 백앤드 활용이 조금 미숙한 점도 있었습니다.

  3. 성공적인 CRUD 기능 구현: 사용자는 Text Prompt를 생성, 조회, 수정, 삭제하는 기능을 성공적으로 사용할 수 있습니다. 뿐만 아니라 키워드를 통해여 간편한 검색기능도 추가하였습니다.

  4. 간편한 구글 로그인 기능: Google OAuth을 Next.js 백앤드에 적용시키는것을 성공하였으며 각자 다른사용자들이 로그인을 하여 text prompt 사용이 가능해졌습니다.

12.png

Conclusion

이 프로젝트는 Next.js를 사용하여 Text Prompt의 CRUD 기능을 제공함으로써 사용자가 효과적으로 텍스트를 관리하고 작성할 수 있는 웹 애플리케이션을 제공했습니다. 또한 조금 더 신뢰성과 안정성을 위해 Google OAuth API 를 이용하여 꼭 구글에서 로그인을 해야 사용자들이 text Prompt 를 공유하도록 만들었습니다. 사용자 중심의 기능과 간결한 디자인으로 사용자들이 다른사람들이 공유한 요리동영상을 간편하게 검색을 하고 키워드를 통해서 조금 더 직감적으로 디자인하였습니다.

bottom of page