/Codefolio

부트캠프 수강생들의 프로젝트를 체계적으로 정리하는 포트폴리오 공유 서비스

Primary LanguageTypeScript

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

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

프로젝트 소개

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

Screen Shot

Main

스크린샷 2023-03-08 오후 2 19 01

Detail

스크린샷 2023-03-08 오후 2 25 54

Post

스크린샷 2023-03-08 오후 2 24 37

MyPage

스크린샷 2023-03-08 오후 2 26 28

Profile

스크린샷 2023-03-08 오후 2 28 02

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

직접 보기

image

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