🤖

TheHackチーム開発第2回チーム3

2023/02/18に公開

Next.js

何を作ったか？

エンジニア向けの学習管理ツールを作りました。
発案者 N氏

デザイン

条件

Next.js でフロントを実装
Ruby on Rails をAPIとして利用する
RSpecを用いたテストを書く
Asanaを利用したプロジェクト管理
ログインがあり、ログインした人のみが投稿できる（何を投稿するサイトかはチームで考えてください！）
/my-profile のパスで自分の情報が見れる

開発環境について

6人の開発環境を揃えるためにdockerを採用しました。
フロントエンドにNodeコンテナ
バックエンドにRails
データベースにはPostgresqlを採用しました。

仕様について

フロントエンド Next.js

Node: 18.13.0
NextJs: 13.1.1
React: 18.2.0
TypeScript: 4.9.4

CSSはTailwindを利用

バックエンド Ruby on Rails

Ruby: 3.2.0
Rails: 7.0.x
PostgreSQL: 13.8

使用したライブラリ

Rails

RidgePole: schemaを単一のSchemaファイルで一括管理する
Jbuilder: view ファイルとしてJSON形式のデータを簡単に形成できる
dot-env: .env ファイルを環境変数として扱える
RuboCop: Rubyのコードを静的解析する
rails-erd: Rails のモデルからER図を生成する
RSpec: Rails のテストライブラリ

Next.js

Orval: OpenAPI 定義ファイルからコードを自動生成するツール
date-fns: 日付処理を簡単に行う
jotai: 軽量な状態管理ライブラリ
js-cookie: クッキー操作を簡単に行うライブラリ
lodash: 配列処理を簡単に行うライブラリ
react-icons: コンポーネントとして各種アイコンを扱える
react-tabs: タブコンポーネントを簡単に生成する
tailwind: CSSライブラリ
tslint: TypeScript の静的コード解析
pritter: コード整形ツール