学習アウトプット

2022-12-27

ポートフォリオサイトを作りました。

https://pitang-portfolio.netlify.app/

本格的なものはもう少し後に作成します（現在、学習中）。GitHubで管理していて一部のみ公開しています。GitHubで管理していてリポジトリは一部のみ公開しています。

1. 最初の練習

翻訳のための改行調整

Webサイトの模写

模写対象

2. Node.js/MongoDBの学習

Node.jsによるWeb APIを利用した天気予報Webサイト

MongoDBを用いたタスク管理アプリ

Socket.IOを用いたチャットアプリ（開発中）

3. Reactの学習

優柔不断なあなた

GitHubFinder

PienMoji

連絡帳

広告リンクのレイアウト

4. Gatsby

ポートフォリオサイト

メディアウイルス

  • 日本の沢山あるだろう新聞会社等のメディアの一覧と、それらがある観点でまとも或いはいい加減な報道をしているのかを示すシンプルなWebページを作りたいと思い、土日で骨格を作りました。
  • データはAirtableを使用したgatsby-airtable-listingというGatsbyのスターターを利用しています。
  • 入力するデータの調査が大変で、学習に差し支えるため更新を中断しました。
  • ブログ記事：Airtableとgatsby-airtable-listingの応用 (2020-09-27)
  • デプロイ(netlify)
  • GitHub

Over 40 Web Clubのランディングページ

ピータンのお気に入りの映画

  • 2回目のぎっくり腰苦しんでいるときに、作ってみました。
  • 最初不具合があり2020-11-02に完成。
  • GitHub

Gatsby+Shopifyのオンラインストア

本ブログのヘッドレス化

ワクハラ

5. Vite

Over 40 Web Clubのメンバー専用アプリ

  • 2021-11-02公開
  • Over 40 Web Clubのランディングページ(LP)のチームメンバー情報（これを元にLPが構築される）を編集できる。勉強会情報を見ることができる。
  • Auth0でログインしたメンバー又は管理者だけができることを制御している。
  • デプロイ(Netlify)
  • Vite, Auth0, jotai, Antd, Airtable, Netlify Functions等を使用
  • GitHub

たてツイート

  • 2022-04-13公開
  • 縦書きツイートするためのアプリ。
  • デプロイ(Netlify)
  • Vite, React, TypeScript, Mantineを使用
  • GitHub

6. Next.js + TypeScript

バス時刻表

  • 2022-01-04公開
  • 会社の送迎バスの時刻表を見るアプリ。問い合わせフォーム付き。会社を退職しため運用は停止しています。
  • デプロイ(Vercel)
  • Next.js, TypeScript, Auth0, Headless UI等を使用。
  • GitHub

今日のお弁当

  • 2022-03-01公開
  • 会社のお弁当を注文するアプリ。会社を退職しため運用は停止しています。
  • デプロイ(Vercel)
  • Next.js, TypeScript, Auth0,Headless UI等を使用。
  • GitHub

7. その他

Connpassイベント

yorkshire-2014-pwa

近所のラーメン検索

  • ぐるなびAPIを使って学習中のReactで作ってみたのですが、サーバー側のコードなしでAPIキーを格納できないのですね。 諦めました。 
  • GitHub (2020-06-12公開)

オンラインコミュニティ Over 40 Web Club

  • 2020-09-28:4月くらいから温めていたSlackコミュニティに最初の１人を勧誘し、入会いただきました。
  • 2020-10-07: 18名

Posted by pitang1965