[Porifo] 포트폴리오를 작성하고, 작성된 포트폴리오를 피드백 받을 수 있는 서비스

배포 주소
프로젝트 기간
2024/03/26 → 2024/05/01
시연영상
유저피드백결과지
테스트 ID / PW
ID: porifo24@gmail.com/ PW: !kk35353535
개발자 전용 포트폴리오 생성, 피드백 서비스 Porifo
다른 사람의 포트폴리오를 자유롭게 구경하고 싶어
나의 포트폴리오를 피드백받고 싶은데, 어떻게 받을 수 있을까?
개발자 전용 포트폴리오를 간편하게 작성하고 pdf를 다운받고 싶어
 이러한 생각을 통해서 포트폴리오라는 주제를 잡고 개발한 포리포 라는 웹 서비스입니다
포리포 라는 웹 서비스는 단순히 포트폴리오를 제작할 수 있을 뿐만이 아닌,
사용자 자신이 피드백을 해줄 수 있고 또는, 피드백을 받을 수 있는 자유로운 공간을 제공하고 싶었습니다.
그리하여 저희는 개발자라는 직업을 가졌거나 희망하는 사람들끼리 모여
어떤 커리어어떤 프로젝트 경험이 있는지 소통을 나누며 함께 성장  할 수 있는
개발자 전용 포트폴리오 웹 서비스 포리포 를 제작하게 되었습니다
앞으로 더욱 더 발전될 포리포 에 많은 관심부탁드립니다

 아키텍쳐

 주요 기능

로그인/회원가입 페이지

 이메일 인증 기능

회원가입을 원하는 유저들이 이메일과 비밀번호를 기입하고, 인증번호 받기 버튼을 누르면 작성한 이메일 주소로 인증 번호가 전송됩니다. 유저는 받은 번호를 이용하여 회원가입을 완료할 수 있습니다.

 비밀번호 찾기 기능

회원가입한 이메일로 비밀번호 재설정 링크를 보내고 재설정이 가능합니다.

 비밀번호 유효성 검사

유저 보호를 위해 비밀번호 유효성 검사를 추가하여 8~20자, 숫자, 영어, 특수문자가 포함이 되어야만 회원가입이 될 수 있도록 하였습니다. 또한, 유저가 비밀번호 입력 요건을 충족하였는지 확인을 시켜주기 위해 완료된 입력값에 따라 초록색으로 표시를 해주었습니다.

마이 페이지

 비로그인에서도 작성가능한 포트폴리오

비로그인시에 포트폴리오를 작성할 수 있으며, 작성한 포트폴리오를 PDF 다운로드 받을 수 있습니다.

 다양한 포트폴리오 템플릿 선택 기능

총 4가지 포트폴리오 템플릿을 제공하여 사용자가 원하는 템플릿을 선택하여 사용할 수 있습니다. 템플릿은 마이페이지에서 변경할 수 있으며, 사용자가 기입한 내용을 받아옵니다.

 포트폴리오 미리보기 기능

미리보기 기능을 제공하여, 작성하는 내용을 미리 볼 수 있습니다.(필수 입력사항을 전부 입력해야 작동합니다.) 작성한 내용을 미리보면서 템플릿에 어떻게 나오는 지 확인할 수 있습니다.

  포트폴리오 URL 기능

PDF 다운로드 외에 URL을 제공해서 포토폴리오를 URL로 제출할 수 있게 만들어 두었습니다.

커뮤니티 페이지

 커뮤니티에 포트폴리오 업로드 기능

커뮤니티에 작성한 포트폴리오를 업로드 할 수 있으며, 피드에 올리기를 누르면 작성한 내용을 기반으로 피드에 올라가게 됩니다.

  피드백 기능

로그인 후 포트폴리오 작성 후 공유하기를 누르게 되면 자동으로 커뮤니티에 올라가게 되며, 포트폴리오의 개선사항을 알고 싶다면, 커뮤니티 페이지에서 확인할 수 있습니다. 유저는 자신의 포트폴리오에 작성된 피드백을 확인하며, 자신의 부족한 점을 확인하고 이를 개선해나갈 수 있습니다.

공통

 반응형

반응형 구현

 기술적 의사결정

Next.js
TypeScript
Zustand
Supabase
React-Qurey
Tailwind-CSS
react-to-pdf

 트러블 슈팅

SMTP 적용
React-Query Prefetch
infinity-query
반응형 UI

 회고

이지은
약 한 달간의 기간동안 ‘포리포’라는 프로젝트를 진행하며, 많은 것을 느낀 것 같습니다.
힘들고 어떻게 해야할지 모를 때 팀원들과 같이 알아보며 이 프로젝트를 개선하는 것에 즐거움이 느껴졌고,
소통에 대한 중요성을 깨닫게 된 것 같습니다.
이번 프로젝트를 통해서 많은 것을 얻어갈 수 있어서 뜻깊은 경험이었습니다.
정해준
처음으로 해본 한달정도의 프로젝트로 생각보다 재밌었고, 여러가지 경험을 해보게 된거 같습니다.
prefetch를 적용하면서 느낀 처음 코드를 짤 때의 중요성과 이야기들을 알게 되었던 거 같습니다.
코드를 짜면서 생각보다 많은 것들을 고려해야 한다는 것을 알았고,
생각보다 많은 것들을 얻어갈 수 있다는 것도 알게 되는 것 같습니다.
금상호
솔로 탈출 원합니다
한은범
기획 부터 디자인 까지 하나의 프로덕트를 만들기 위해 필요한 과정들을 작게나마 경험 할 수 있어서 좋았고,
지금까지 배운 기술들을 적용 해볼 수 있어 다시 한번 상기할 수 있는 의미 있는 시간이었습니다.

 팀원

팀 노션
개인 포트폴리오
이지은
정해준
금상호
한은범