FigmaデザインからReactまたはNext.jsのフロントエンドを構築し、APIに接続します

デザインは完了し、APIは準備ができていますが、ユーザーが見る画面はまだ存在しません。私はフロントエンドのみを構築します。バックエンド、認証プロバイダー、ホスティングはそのまま維持され、コードはあなたのリポジトリに格納されます。納品後14日間、合意したとおりに動作しないものは無料で修正します。

Starterでは、Figmaファイルから1つの画面またはページを、レスポンシブで型付けされた状態で取得できます。データはAPIから、またはエンドポイントが存在するまではモックから取得されます。Standardでは、最大5つの画面がAPIに接続され、読み込み中、空、エラーの状態、および検証付きのフォームが含まれます。Advancedでは、最大12の画面が可能になり、認証プロバイダーと連携するログイン画面、アプリ全体で使用される共有コンポーネント、および主要なフローのテストが追加されます。

デザインに忠実に従います。スペーシング、タイプスケール、色はFigmaファイルから取得します。画面にモバイル版がない場合は、推測するのではなく、構築前に提案します。App Routerを備えたNext.jsがデフォルトですが、サーバーレンダリングが不要な場合はViteを使用したプレーンなReactでも問題ありません。スタイリングには、プロジェクトにすでに存在するTailwind CSSまたはCSS Modulesを使用します。

デスクトップではChrome、Firefox、Edgeで、実際のAndroidスマートフォンではChromeで結果を確認します。

私のフロントエンド作品の公開例はポートフォリオに2つあります。フィルター、カート、チェックアウトを備えたNext.jsのストアフロントと、私自身のバイリンガルサイトです。

私は会議なしで、書面のみで作業します。開始前に画面とそれらの背後にあるエンドポイントがリストされ、プレビューリンクで作業の進捗状況が示され、毎営業日チャットで簡単な進捗メモが送られます。

プロジェクトを完了するための手順
1. 画面リスト - FigmaファイルとAPIドキュメントを確認し、各画面、その状態、および呼び出すエンドポイントを書き出します。コード作成の前にリストを確認していただきます。
2. ベースと共有部分 - プロジェクトのセットアップまたは既存のリポジトリ、Figmaからの色とタイプ、およびすべての画面で再利用されるレイアウトとコンポーネント。
3. 画面とデータ - 各画面はデザインに合わせて構築され、APIに接続され、読み込み中、空、エラーの状態に対応します。不足しているエンドポイントには、簡単に交換できるモックが提供されます。
4. プレビューリンクでのレビューラウンド - クリックして確認し、修正点を1つのリストで送信してください。修正後、同じリンクを再度表示します。
5. 引き渡し - リポジトリ内のコード、構造と実行方法に関する簡単なメモ、およびAdvancedでは、各リリース前に実行できるテスト。