🍅 Tasting Table

서비스 소개

"오늘은 뭘 해먹지?" 라는 고민을 가진 사용자들이 각자 공유하고 싶은 레시피를 사진과 글을 통해 공유하고 원하는 레시피를 쉽고 편리하게 찾을수 있는 서비스를 제공합니다.

핵심기능

• 종류별 레시피 카테고리와 최신순, 난이도순, 조리 시간순 정렬 기능을 이용해 편리하게 검색하여 원하는 레시피를 제공합니다.
• 검색창을 통해 레시피를 찾아볼 수 있습니다.
• 회원가입 및 로그인을 통해서 프로필을 생성하고 프로필 / 개인 정보를 편집할 수 있습니다.
• 공유하고 싶은 레시피를 사진과 글을 통해 올릴 수 있습니다.
• 사용자가 올렸던 레시피를 한눈에 확인하고 삭제하거나 편집할 수 있습니다.
• 책갈피/북마크 기능을 통해 다시 보고 싶은 레시피를 저장하고 관리할 수 있습니다.
• 공유된 레시피들의 자세한 정보를 볼 수 있으며 작성자의 다른 레시피들이나 비슷한 종류 레시피들을 추천받을 수 있습니다.
• 원하는 레시피에 댓글과 사진을 달고 점수를 매길 수 있습니다.
• 깔끔한 디자인과 소소한 애니매이션을 통해 보다 쉽게 레시피를 올리고 공유할 수 있습니다.

개발 환경

• FE : JavaScript, TypeScript, ReactJS, SCSS
• BE : NodeJS, Express, Mongoose
• DB : Amazon S3, MongoDB
• Deployment : Render, Netlify
• Others : framer-motion, date-fns, clsx, react-images-uploading, react-toastify

🚀 Demo

https://tasting-table.netlify.app/

홈페이지

내 레시피 & 검색 페이지 :

레시피 디테일 페이지 :

Framer Motion을 이용한 애니매이션 :

Framer-motion.mov