【React×Supabase】カウントダウン・メモアプリ 20.Timerをつくった

2 min read

はじめに

そんなに技術的な解説はせずにどんなのつくったかとかつくるまでの過程とかを書いてます。筆者は現在大学4回生ではじめて個人で開発しデプロイしたくらいのひよこです。開発途中だけど最低限の機能はできたしとりあえずデプロイしました。

20.Timerとは

たいていのことは20時間学習したら習得できるという20時間の法則を実践することを支援するシンプルなカウントダウンタイマー+メモアプリです。
デプロイしててゲストログインもできるので、ちょっと触ってみて感想くれたらうれしいです。

https://twenty-hours-timer.com/

つくった理由

先日卒業したCODEGYM Academyというスクールの代表がほしいって言ってたのでつくりました。
それから20時間の法則のことを少し調べてると、20時間っていうゴールがあれば新しいことを始めるハードルも下がるし計画的に頑張ることができるメリットがあると思いました。
ぼくはデザインとかポーカーとか色々したいことあるけど、なかなかできないので自分でも使いたかったです。
個人で利用が完結し実際に使いたい人がいるのと自分でも使ってみたいことはモチベーションになりました。

CODEGYM Academyの感想文書いてるんで暇な人はみてね。少し言うとC言語から勉強してチーム開発した感じ。

https://note.com/tsux_ssbu/n/n928789179257

おもな使用技術

色々学びたいと思い最終的に以下の技術を使って開発しました。

  • Next.js(ほぼReact)
  • Supabase
  • Chakra UI
  • react-simplemde-editor
  • Vercel

Next.js(ほぼReact)

Next.jsはReactだけ利用してた時と比べてルーティングがとにかく楽でした。つくったものはほぼReactなので、SSR,SSGのようなNext.jsのコアな機能とかも試せればと思っています。
最初にデプロイした時に開発環境じゃ動いてるのにエラーでデプロイできなくて泣いてたんですが、Next.js関連でエラーしてたのでもっと学んでから利用すればよかったとは思いました。

Zero Config, File-system Routingあたりしか恩恵をうけてない気がします。

https://nextjs.org/

Chakra UI

ドキュメントがよみやすかったのでとてもよかったです。あとNARUTOが好きなんでたまにテンションがあがることがありました。

react-simplemde-editor

メモはマークダウンで書きたいって思っていたのでreact-simplemde-editorでかけるようにしました。ゆくゆくはZennみたいなエディターでかけるようにしたい。

Supabase

はじめはDjango REST frameworkで開発し無料のherokuにデプロイしたんですが、スリープ?するからか実際に使う人がいるならあまりよくないなと思いました。
そんな中以下の記事を見かけて使いたくなったのでSupabaseを利用しました。

https://dev.classmethod.jp/articles/tried-using-supabase/
実際に使ってみてDjangoの時に苦労した認証関係が簡単に実装できたり、つくったアプリを利用してみてイマイチと思うことがなかったのでとてもよかったです。

Vercel

デプロイめっちゃ簡単でした。デプロイした時の紙吹雪みたいなやつほんとすき。

がんばりポイント

シンプルな機能なのでUIを綺麗でわかりやすいようにしようと心がけました。
こちら側が細かくなにを書いてほしいかみたいな感じで複雑にすると使いづらいかもって思ったのでメモ機能も使い方はユーザーに任せるようにシンプルにしてます。できるようになったこと、学んでいる内容、計画表とか色々使い方はあると思うので、この辺を1つ1つ実装したら複雑になると思いました。
特にがんばったポイントはこの記事で使った技術は全部独学+チーム開発しながらだったから無限プログラミング生活してたこと!

苦労したこと

Django REST frameworkで開発してた時は認証とデプロイに苦労しました。JWTで認証してたんですが認証関連を調べてるとLocal Storageに保存してはいけない!だったり有効時間がどうこうだったり、このままじゃ一生デプロイできない!ってなってました。認証の方法など色々調べられたので勉強にはなりました。

React関連だとレンダリング関係で苦労しました。メモ投稿したらタイマーがリセットされたり... そこでも色々調べてレンダリングの最適化など学べました。

終わりに

つくりきってデプロイまでしたのは初めてだったので大変でしたがつくるのは楽しかったです。
まだ細かいところを修正できてないので今後も開発は進めようと思っています。
またモバイルアプリも作ってみたいのでReact Native学んでつくる予定です。
つくる過程で学んだことが多かったです。

追記
つかってみて学習系のメモはNotionとか他の媒体にしたい問題あった.......

Discussion

ログインするとコメントできます