React 初心者向けの、ハンズオン形式のオンライン勉強会です👋

事前に作成した資料があるので、
それを参照しながら、ハンズオン形式で、Reactのミニアプリを構築します！

実際に手を動かして、その場で質問・相談しながら、楽しくReactを学んでいきましょうー！

❓このハンズオン勉強会についての紹介記事

今回のお題

作成するアプリ：

コンテンツ販売アプリ（EC サイト）

レベル：実践編

概要：

このプロジェクトでは、デジタルコンテンツ（記事・電子書籍）を販売するECサイトを構築します。

コンテンツサービスで有名な、note のように記事の有料・無料での公開ができたり、
Zennのように本の有料・無料での公開ができる機能を実装します。

全 2 回のシリーズについて

毎週開催している、２時間のハンズオン勉強会では、
1つの技術トピックにフォーカスして、簡単なミニアプリを構築しています。

今回は、２時間では作りきれない、より実践的なアプリを2週（2時間×2回）で、構築します！
一般に公開し、実運用していくアプリのクローンです！

日程は下記を予定しています：
（2回目から参加される方は、最初にその時点までのソースコードをクローンする形で進めます！）

• 第１回：9/7（日） 16時〜18時
• 第２回：9/14（日） 16時〜18時

この勉強会で学習する内容：

今回のテーマは、2つです！

• Auth.js を用いた認証機能の実装
• Stripe を使用した商品の購入（決済）フロー

使用技術：

• Auth.js v5 による認証(GitHub ソーシャルログイン)
• Stripe による電子決済
• Supabase を使用したデータ管理
• GitHub API によるコンテンツ取得
• Next.js 15 App Routerでのプロジェクト構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントの導入

この勉強会を通して、実際に運用していける Next.js アプリを構築することを目指します！

こんな初心者におすすめ！

• React の基本的な扱いに慣れてきた方
• EC 機能付きのアプリについて学びたい方
• Next.js における認証・決済の実装に入門したい方
• React エンジニアとしての転職/就職を目指している方
• React/ Next.js を使った簡単なプロジェクトにチャレンジしてみたい方

要件：

• Node.js 環境（v18.18.0 以上）が構築されたPCが必要です
• 開発時には、Stripe のアカウント作成が必要です
• Git/ GitHub環境（アカウント）の用意
• HTML/CSS/JavaScriptの基礎知識が必要です
• Reactの基礎（Progateレベルの内容）は理解している前提の内容となっております
• Next.jsの基礎（公式チュートリアルレベルの内容）は理解している前提の内容となっております

開催概要

➡️場所：Google Meet を予定(オンライン開催）
音声のみでOKです！

申し込みが完了すると「参加者への情報」という場所に、URLが表示されます。

なお、Google Meetへの参加は、Google アカウントが必要です！

➡️参加費
1500円 (当日 PayPay or stripeによるカード決済にて都合の良い方法で受け取ります。)

注意事項

下記を、ご確認ください：

• 実際に手を動かして、一緒に作業をするハンズオン形式のワークショップとして進行します。
• 視聴のみで参加することも、全く問題ないです！
• 主催者の画面・音声は動画収録されることがありますのでご了承ください。
• 勉強会終了後も、継続的に資料へアクセスするには、b13o.com のアカウントが必要です。
• 無断欠席・遅刻は、ご遠慮ください。
• 勧誘、迷惑行為、ハラスメント、マウンティング行為をはじめ、このイベントの趣旨にそぐわないと主催が判断した場合はご参加をお断りする場合がございます。

当日のスケジュールの流れ

ハンズオン中は、資料を見ながら一緒に作業を進めていければと思います！
（音声・チャットで、リアルタイムでリアクションや質問ができます）

その他：

• 実際は、時間内で、進めるところまでタスクを進める形になります。
• 時間内に完成しない場合でも、大まかな解説と手順を記載した資料を、配布いたします！
• なので、勉強会中は、ゆっくり・たくさん質問して頂ければと思います！！

ハンズオンの最中は、たくさんリアクションをして、盛り上げていただけるとありがたいです！
（進めるスピードなどの、進行に関するご意見も大歓迎です！）

運営情報

React で、実践的なスキルチェックができる、学習のお題まとめサイト『React Road』
のハンズオンイベントです🐾

参考キーワード

webアプリ開発, HTML, CSS, JavaScript,TypeScript, React.js, Node.js, Next.js, Github, コミュニティ, もくもく会, ハンズオンワークショップ