Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/b13o/microcms-blog

🐞 A simple blog app. jsmstack by Next.js and microCSM.
https://github.com/b13o/microcms-blog

jamstack microcms msw mvp nextjs real-world testing-library-react typescript vitest

Last synced: about 5 hours ago
JSON representation

🐞 A simple blog app. jsmstack by Next.js and microCSM.

Awesome Lists containing this project

README 

        
app-banner



# JAMstack ブログアプリ



## 概要



このプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。



ビルド時に静的 HTML を生成することで、従来の Web サイトより表示速度を向上させた JAMstack ブログです。



## 学習目標



Next.js と microCMS を用いた、JAMstack ブログの実装を学びます。



合わせて、Vitest を使用した React の自動テストについても、挑戦してください。



### 推奨技術



このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。



- Next.js App Router でのプロジェクト構築

- TypeScript による型チェック

- Tailwind CSS を用いたスタイリング

- shadcn/ui によるコンポーネントの導入

- microCMS によるコンテンツの管理

- Vitest/ Testing Library React によるテストの実装

- MSW による API モック



---



## 🎯 お題



- 「ユーザーストーリー」を全て満たす、アプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。

- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。



### 必須機能



1. **未読記事のランダム表示：**

   - TOP ページのヒーロセクションには、未読の記事を大きく表示する

2. **記事一覧表示**：

   - microCMS から取得した記事を一覧表示

   - グリッドレイアウトで表示する

3. **記事詳細表示**：

   - 記事の詳細ページを実装する

   - 詳細ページの URL は、`domain.com/posts/[slug]`という形式にする

4. **その他：**

   - ビルド時に静的サイト生成を行う

   - microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドを行う



### **追加情報**



今回推奨する ブログコンテンツの管理方法は、「[**microCMSr**](https://microcms.io)」の使用です。



- microCMS では、管理画面からコンテンツを作成できます

- データ取得には、開発者向けの API を使用できます

- ユーザー登録が必要ですが、個人の小規模なプロジェクトでは無料枠の範囲で使用できます



## ユーザーストーリー



- **TOP ページ：**

  - [ ] ユーザーがサイトにアクセスすると、H1 タグでサイトのコピーが表示されている

  - [ ] ヒーロセクションの下には、未読記事が 1 つランダムで大きく表示されている

  - [ ] 全ての記事が既読の場合は、全ての中からランダムに 1 つを表示する

  - [ ] 未読記事のカードには、背景に画像を表示し、その上にタイトル、タグ、導入文を表示する

  - [ ] 導入文は、記事本文から最初の 80 文字のテキストを表示し、それ以降は（`…`）と表示する

  - [ ] 記事一覧がグリッドレイアウトで表示されている

  - [ ] 各記事カードには、タイトル、タグ、サムネイル画像、投稿時刻が表示される

  - [ ] 投稿時刻は、直近６ヶ月以内の投稿を相対的な時刻で表示する(ex: 10 分前, 3 日前, 6 ヶ月前)

  - [ ] 記事カードをクリックすると、詳細ページに遷移する

- **詳細ページ：**

  - [ ] 詳細ページの URL は、`domain.com/posts/[slug]`という形式になっている

  - [ ] 詳細ページには、記事の全文が表示される

- **その他**：

  - [ ] 全ての必須機能に対して、適切なテストが実装されている

  - [ ] アプリケーションがデプロイされており、誰でもアクセス可能である

  - [ ] microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドが行われる