Firebase×React로 포트폴리오 사이트 만들기

Hatena 블로그와 Qiita를 더하여 2로 나눈 사이트를 만들었습니다.

화면

ARTICLES: 기사 목록

Qiita, Qrunch, Hatena 블로그 등 외부 사이트에 게시 한 기사 목록을 함께 볼 수 있습니다.

블로그처럼 직접 기사를 게시 할 수도 있습니다

기사에 태그를 붙일 수 있습니다

기사 목록에서 태그 필터를 적용 할 수 있습니다

기사 페이지

Qiita처럼 오른쪽에 목차가 나옵니다

기사는 Markdown 형식으로 작성한 내용을 표시합니다

PRODUCTS:제작물 일람

개인 개발로 작성한 WEB 앱 등의 목록이 표시됩니다

제작물 페이지

제작물에 관한 시리즈물의 기사를 볼 수 있습니다

오른쪽에 표시되는 기사의 목차와 시리즈 기사의 링크가 표시됩니다.

위의 그림은 개요 페이지를 열었으며 개요 페이지의 목차를 보여주는 이미지입니다.

요구 사항 정의와 같은 페이지 링크도 표시됩니다.

특징

자신의 기사를 정리할 수 있다

하테나 블로그이거나 Qiita이거나 Qrunch이거나, 여러가지 사이트에 기사를 투고하고 있는 사람은 알겠다고 생각합니다만, 그 기사 어디에 투고했는가? ? 라고 잊어버리는 것이 많이 있었습니다.

자신의 기사를 일람으로 확인할 수 있으므로, 어디에 투고했는지를 알고 편리합니다!

포엠이 게시할 수 있음

기술적인 기사는 Qiita에서 LGTM을 원했지만 포엠은 규약적으로 투고할 수 없기 때문에 하테나 블로그 등 다른 사이트에서 투고했습니다.
그러면 앞에서 설명한 것처럼 자신의 기사가 여러 곳에 분산되어 버리는 원인이 되어 버립니다.

자신의 사이트이므로 당연히 포엠을 투고할 수 있고, 기술적인 기사는 Qiita의 링크를 떼는 것으로 LGTM도 (잘하면) 겟트 할 수 있습니다!

시리즈물의 기사를 간단히 정리할 수 있다

블로그나 Qiita에서 시리즈물의 기사를 만들려고 하면, 각 페이지의 링크를 붙인 정리 기사를 작성하거나, 기사마다 이전 기사와 뒤의 기사의 링크를 붙여야 합니다. 이것은 솔직히 너무 귀찮습니다.

시리즈물의 기사 링크는 이른바 레퍼런스 사이트와 같이 목차와 함께 자동 생성되므로, 쓰는 사람도 편하고 독자도 편하고 일거 양득이 됩니다!

구성

Firebase

Hosting

Authentication : 관리자 페이지 인증

Firestore: DB

Storage: 이미지 저장용

React

Redux 미사용

TypeScript

Material UI

상세

디자인: h tps : // 야키 ぁ b. 푹 푹 빠져서 p. 코 m / P 로즈 ct / 야키 ぁ b / 및 p
URL : h tps : // 야키 ぁ b. 푹 푹 빠져서 p. 코m/
소스 코드 : htps : // 기주 b. 코 m / 야키 푸큘 g / 야키 ぁ b