와플카드 시연영상 - 회원 관련 기능
와플카드 시연영상 - 카드 관련 기능
와플카드는 해시태그와 카드를 활용한 익명의 관심사 소통 서비스입니다.
서비스 : waffle-card.com
(서버가 잠들었다 깨서 초기 로딩 속도가 느릴수 있습니다. )
) 깃허브 : github.com/waffle-card
갤러리 보기
Search
와플 카드 둘러보기
•
•
•
협업
테스용 계정
id: guest@test.com
password: 123456789
회원가입이 번거롭거나 문제가 있다면 테스트용 계정을 사용해주세요.
비밀번호 수정은 하지 말아주세요.
사용한 기술 스택
프론트엔드
•
Javascript, Typescript, React
•
Context, Recoil, Axios
•
Storybook, Emotion, Mui
•
ESLint, Prettier, Netlify
백엔드
•
Javascript, NodeJS, Express
•
MongoDB, Mongoose
•
Heroku
담당한 파트
FE개발, BE개발, 기획, 디자인 담당
프론트엔드
•
유저관련 페이지(회원가입, 로그인, 마이페이지)
•
와플카드 리스트를 보여주는 홈페이지
•
카드를 생성/수정 모달 컴포넌트
•
채팅 카드 모달 컴포넌트
•
Context를 활용한 유저, 모달 전역 상태 관리
•
Axios의 인터셉터, 인스턴스를 활용하여 네트워크 요청 모듈화
백엔드
•
REST API 설계
•
MVC 디자인 패턴 개발
•
유저, JWT 토큰 인증
•
와플카드, 댓글 CRUD 구현
•
와플카드 좋아요 생성 및 삭제 구현
