Webアプリ・管理画面をReactで実装します 公開運用中のReact画面と同じ作り方で|3状態まで実装 イメージ1
1/1

Webアプリ・管理画面をReactで実装します

公開運用中のReact画面と同じ作り方で|3状態まで実装

評価
-
販売実績
0
残り
5枠 / お願い中:0
Webアプリ・管理画面をReactで実装します 公開運用中のReact画面と同じ作り方で|3状態まで実装 イメージ1
Webアプリ・管理画面をReactで実装します 公開運用中のReact画面と同じ作り方で|3状態まで実装 イメージ1
基本対応範囲
設計 / フロントエンド開発 / テスト
お届け日数
3日(予定)
言語

サービス内容

Webアプリの画面側を React / TypeScript で実装します。管理画面・ダッシュボード・ログイン周りが対象です。 ■ こんな方へ ・APIやDBはあるが、操作する画面がない ・納品後に自分で直せる形で管理画面が欲しい ■ プラン(画面数で範囲を固定) 【ベーシック 35,000円】 画面3つまで。React / TypeScript で実装し、APIとの接続(取得・送信・エラー表示・読み込み中表示)まで含みます。 【スタンダード 70,000円】 画面6つまで。上記に加えてログイン・新規登録・パスワード再設定の画面と、トークンによる認証状態の保持を実装します。 【プレミアム 130,000円】 画面10まで。上記に加えて主要な操作の自動テスト(Vitest)と、OS設定に追従するダークモード対応を実装します。 ※「画面」はURLかルートが分かれる単位です。同じ画面内のモーダル・タブ・絞り込みは含めません。迷う場合は着手前にすり合わせます。 ■ 実装の方針 ・読み込み中・エラー・データ0件の3状態を、最初から画面に用意します。ここが抜けると本番で必ず困ります。 ・色はCSS変数にまとめ、後から1か所で変えられる状態に。クラス名は役割で付け、キーボード操作とARIA属性にも配慮します。 ■ 実績 ・ブラウザ拡張の画面を React 19 / TypeScript / Vite で実装し、Chrome と Edge の両ストアで公開・運用しています。TSX約3,600行・手書きCSS約1,800行で、ポップアップとフルタブの管理画面を同じコードベースで提供しています。 ・この拡張には自動テストが50ファイル725ケースあります。対象は期限解析や通知判定などのロジック層で、画面の描画テストは含みません。 ・ログイン・新規登録・パスワード再設定・マイページを実装し公開・運用しています(この4枚はReactではなく素のHTML / JavaScriptです)。トークンによる認証状態の保持と、決済ページ・顧客ポータルへの導線まで実装済みです。 ・WebSocketによる複数端末のリアルタイム同期を実装(切断時は1秒から倍々で最大30秒まで待って繋ぎ直します。非公開リポジトリのためコードは非公開)。 ■ 納品後の対応 ・修正は2回まで無償です(1回=ご指摘をまとめて反映する1往復)。3回目以降と、承認済みの画面の作り直しは別途お見積りです。 ・デザインデータが無い場合は、最初に配色と余白を1画面で決めてご承認いただき、その形を他の画面へ展開します。 ■ お受けできないこと ・フレームワーク/ライブラリの指定(Next.js・Nuxt・Astro・Vue・Svelte・Angular・Tailwind・Sass・CSS Modules・styled-components・React Router・Redux・Zustand・React Query など)。素の React と CSS で実装します。 ・デザインカンプの作成(データからの実装は承ります)/サーバー側の実装(API・DBは別途ご相談ください) ■ ご注意 ・受託の実務経験はまだありません。上記はすべて自分のサービスでの実績です。 ・接続するAPIの仕様書か動作するエンドポイントをご用意ください。 ・開発にAIツール(Claude Code)を使用。仕様の判断と最終確認は自分で行います。

購入にあたってのお願い

・接続するAPIの仕様書、または動作するエンドポイントをご用意ください。仕様が固まっていない場合は、着手前に画面ごとに「何を取得して何を送るか」を文章で確認させてください。 ・デザインデータがある場合はご提供ください。無い場合は、こちらで実装しながら決めていく形になります(凝った装飾は範囲外です)。 ・APIキーや本番のアクセストークンはお預かりしません。開発用の環境かテスト用の認証情報をご用意ください。 ・サーバー・ドメインのご用意と、本番へのデプロイ作業はお客様側でお願いします。ビルド手順はお渡しします。 ・納品はココナラのトークルームへのzip添付(生成物を除いたソース一式+ビルド手順書)で行います。GitHubやGoogleドライブはココナラの規約で使用できないため、そちらでの受け渡しには対応できません。 ・納品したソースコードは、お客様のサービスでの商用利用・改変・二次利用・第三者への改修委託を制限なくお認めします。著作権そのものの譲渡をご希望の場合は購入前にご相談ください。なお汎用的な実装パターン(フォームやAPI接続の雛形など)を、他のお客様向けの制作に再利用する場合があります。 ・画面数を超えるご要望は、事前にお見積もりのうえ対応します。着手後に範囲が広がった場合も同様です。 ・受託の実務経験はまだありません。実績はすべて自分のサービスでの開発と運用です。 ・平日夜間と土日祝の稼働です。返信が翌日になる場合があります。 ・作業には生成AIツールを使用します。いただいた情報のうち機密にあたるものをAIツールへ入力する場合は、事前にご相談し、ご承諾をいただいてから行います。

有料オプション

35,000
35,000
175ポイント (0.5%) 獲得
ココナラの安心保証
  • お支払いは取引完了までココナラがお預かり(エスクロー)。納品、解決まで出品者には渡りません。
  • 万一のトラブル時はココナラサポートが間に入って対応します。
  • サービスに重大な問題があった場合はキャンセル・返金の対象です。