profiu.me解説

ポートフォリオ

概要

• サイトURL: Profiu.me
  　個人用のページを作れるWebアプリです。

類似サービスにlinkTr.ee、lit.linkさん等のサイトがありますが、これらのサイトでは作り込める余地が少ない(複数ページやテキストや画像以外のバラエティに富んだコンテンツ作成が難しい)ため、よりクリエイティブに作成できるページ(サイト)作成サービスを作ろうと考えました...が現状ではMVPリリース(よく言えば?)のため、まだまだ機能は少ないです。

• レポジトリ: GitHub※本番環境はプライベートレポジトリからデプロイしており、就活用に一部ファイル(.env、その他)を省き公開しているためlocalで再現はできません。

機能紹介

テキスト編集

テキストの編集(色、太字、アンダーバー等)

背景機能

背景を単色と画像から選択し設定できます。

ヘッダー機能

ヘッダーテキストとヘッダー背景の編集

記事(ブログ)投稿機能

記事のタイトルとコンテンツを投稿できます。

公開画面確認

公開ページに遷移、公開URLコピーができます。

ER図

PK:主キー
FK:外部キー
usersのid(外部キーとして)がuser_idとidで混同していますが(反省)とりあえず現状でアップロード

バックエンド

Go
フレームワーク: gin
ORM: gorm

フロントエンド

Typescript
ライブラリ:React
redux(状態管理)
slate.js(リッチテキストエディターライブラリ)
他

インフラ

なるべくコストを抑えつつ、実務でも使われるサービス中心に構成することを意識しました。

cloudflare: fronendのデプロイ,ドメイン取得
awsよりもコストが安い(この規模だと無料)かつ、CDN連隊のしやすさ、実務でも使われることが多い(総通信トラフィックの15~25%はcloudflareが使われているらしい)

ACM: TLS証明
ALB: アプリケーションロードバランサー

DB:RDS: MySQL(aws)

画像保管: R2(cloudflare)
S3(aws)と互換性があり安価(この規模だと無料)のため

改善/反省点

ソルト未実装
テスト未実装
メールアドレス認証/パスワード更新未実装
ヘッダーの中央揃え左揃えがうまく動作してない
背景画像にCDNを適用してないため読み込みが遅い

記事画面の背景未実装
特にフロントエンドのファイル構成が汚い(型ファイルも分けられてない)->例えば、bulletproof-reactをデザイン設計として採用するなど検討