Skip to content

Latest commit

 

History

History
93 lines (60 loc) · 5.23 KB

README.md

File metadata and controls

93 lines (60 loc) · 5.23 KB

quintuple


실행 방법

  • Quintuple Team 5 포트폴리오 프로젝트

팀 멤버

  • 이윤재
  • 김주은
  • 이정우
  • 장정윤
  • 성훈 (팀장)

개요

이 프로젝트는 Quintuple 5조가 만든 포트폴리오 관리 애플리케이션입니다. 사용자가 자신의 전문 포트폴리오를 효율적으로 관리할 수 있는 플랫폼을 만드는 것을 목표로 하였으며, 커뮤니티 상호작용, 포트폴리오 템플릿, 현대적인 사용자 인터페이스 등의 기능을 포함하고 있습니다. 주요 기술로는 React, Firebase, Material-UI (MUI)를 사용했습니다.

주요 기능

  • 포트폴리오 생성: 사용자가 손쉽게 포트폴리오를 생성하고 관리할 수 있습니다.
  • 사용자 관리: 회원 가입, 로그인, 개인정보 수정 기능을 포함합니다.
  • 커뮤니티 상호작용: 사용자가 게시물, 댓글, 좋아요를 통해 상호작용할 수 있습니다.
  • 커스터마이징 가능한 템플릿: 포트폴리오 템플릿을 통해 사용자의 성과를 시각적으로 매력적으로 표현할 수 있습니다.
  • PDF 내보내기: 사용자가 자신의 포트폴리오를 PDF 문서로 저장할 수 있습니다.

고유 장점

  • Firebase 통합: Firebase를 인증 및 백엔드 서비스로 활용하여 실시간 데이터베이스 및 호스팅 기능을 구현했습니다.
  • MUI를 활용한 UI 개선: Material-UI를 사용하여 사용자가 친숙하고 시각적으로 매력적인 인터페이스를 만들었습니다.
  • 커뮤니티 기능: 커뮤니티 기능을 통해 사용자가 상호작용할 수 있어 플랫폼이 더 동적입니다.

주요 화면

  • 인트로 페이지: 플랫폼 소개와 탐색 애니메이션을 포함합니다. image

  • 로그인 및 회원가입 페이지: 사용자가 계정에 로그인하거나 회원가입할 수 있으며, 관련 화면으로의 원활한 이동을 제공합니다. image

  • 메인 페이지: 포트폴리오와 커뮤니티 기능(좋아요, 댓글)을 표시합니다. image image

  • 마이 페이지: 사용자가 개인정보를 수정하고 커뮤니티 활동을 확인하며 자신의 포트폴리오를 관리할 수 있습니다. image

  • 포트폴리오 템플릿 페이지: 사용자가 다양한 템플릿을 사용해 포트폴리오를 만들고 PDF로 내보낼 수 있습니다. image image

사용한 라이브러리 및 도구

  • Firebase: 사용자 인증 및 데이터 관리에 사용했습니다.
  • Material-UI (MUI): 반응형이고 현대적인 사용자 인터페이스 컴포넌트를 디자인하는 데 사용했습니다.
  • html2canvas&jsPDF: PDF 저장 시에 사용했습니다.
  • React: 사용자 인터페이스를 구축하는 데 사용한 주요 JavaScript 라이브러리입니다.

진행 상황 및 성과

  • 달성한 부분: 사용자 등록, 로그인, 포트폴리오 생성, 커뮤니티 기능, PDF 내보내기를 성공적으로 구현했습니다.
  • 달성하지 못한 부분: 포트폴리오 북마크 기능과 마이 페이지에서 표시한 게시물을 보는 기능 등은 완전히 구현되지 않았습니다.

배운 점

각 팀원은 이 프로젝트를 진행하면서 다양한 경험을 공유했습니다. 주요 배운 점으로는 효율적인 협업의 중요성, React와 JavaScript 개념을 효과적으로 적용하는 방법, Firebase 및 MUI와 같은 서드파티 라이브러리를 통합하는 법을 배웠습니다. 전체적으로 팀은 프론트엔드 개발에 대해 더 깊이 이해하게 되었으며, 특히 사용자와 상호작용하는 인터페이스를 만드는 데 있어 많은 것을 배웠습니다.

향후 개선 사항

  • 북마크 기능: 사용자가 포트폴리오를 북마크하여 쉽게 참조할 수 있도록 하는 기능을 추가할 예정입니다.
  • 마이 페이지 개선: 마이 페이지 기능을 개선하여 사용자가 자신이 표시한 게시물과 활동을 더 효과적으로 볼 수 있도록 할 예정입니다.

감사 인사

이 프로젝트의 개발 동안 지도해 주신 교수님과 학우들에게 감사의 말씀을 드립니다.

프로젝트 실행 방법

  1. Yarn 설치: npm install -g yarn
  2. 저장소를 클론합니다.
  3. 의존성 모듈 설치: yarn install
  4. 개발 서버 실행: yarn start
  5. 브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인합니다.

연락처

질문이 있거나 기여하고 싶다면 팀원 중 누구에게든지 연락해 주세요.

github repo https://github.com/quintuple-hansung/quintuple-project