Codefolio

LiveDemo

프로젝트 노션

실행방법

$ git clone https://github.com/react-challengers/Codefolio.git
$ yarn
$ yarn dev

http://localhost:3000 접속

env.local

NEXT_PUBLIC_SUPABASE_URL=SUPABASE_URL

NEXT_PUBLIC_SUPABASE_ANON_KEY=SUPABASE_KEY

목차

1. Contributer
2. 프로젝트 소개
3. Screen Shot
4. Tech Stack
5. ERD
6. Directory

Contributor

김상현	윤준호	이승효	이정익	허다은

프로젝트 소개

부트캠프 수강생들이 작업한 프로젝트를 체계적으로 정리하여 채용과 연계할 수 있 는 포트폴리오 공유 서비스

Screen Shot

Main

Detail

Post

MyPage

Profile

Tech Stack

• 프레임워크로 Next.js를 사용합니다.

• Next와 잘 어울리는 배포 시스템인 Vercel을 이용합니다.

• 빠른 백엔드 구축을 위해 BaaS 서비스인 Supabase를 사용합니다.

• 로컬 상태관리를 위해 recoil을 사용합니다.

• 서버 상태관리를 위해 react-query를 사용합니다.

• CSS in JS를 사용하기 위해 styled-components를 사용합니다.

• Text Editor는 toast/ui의 Editor를 사용합니다.

• 유틸리티를 편리하게 사용하기 위해 lodash를 사용합니다.

• Tech Stack 결정 과정 라이브러리 선정

Entity-Relationship Diagram

직접 보기

Directory

├── Components
│   ├── Common
│   ├── CreatePost
│   ├── Detail
│   ├── Layouts
│   ├── Main
│   └── MyPage
├── README.md
├── hooks
│   ├── common
│   └── query
├── lib
│   ├── recoil
│   └── supabase.ts
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── 404.tsx
│   ├── 500.tsx
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── auth
│   │   ├── login.tsx
│   │   └── signup.tsx
│   ├── create-post.tsx
│   ├── detail
│   │   └── [id].tsx
│   ├── edit-post
│   │   └── [id].tsx
│   ├── index.tsx
│   ├── on-boarding.tsx
│   ├── profile
│   │   └── [[...userId]].tsx
│   └── search.tsx
├── public
│   ├── icons
│   ├── images
│   └── logos
├── styles
├── supabase
├── tsconfig.json
├── types
├── types.d.ts
└── utils
    ├── APIs
    │   ├── socialLogin
    │   └── supabase
    ├── amplitude
    ├── card
    ├── commons
    ├── constant
    ├── detail
    └── notification