Giter Club home page Giter Club logo

kimis-app's Introduction

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

kimis-app's People

Contributors

kimitashoichi avatar

Watchers

 avatar

kimis-app's Issues

【詳細ページ】アイディア詳細表示ページ設計

ワイヤーフレームを元にアイディア詳細表示ページの設計

ワイヤーフレーム

デザインワイヤーフレーム_-_Google_ドライブ-2

【コンポーネントの切り分け方】

  • ユーザー情報表示・フォローなどユーザーに関わる部分
  • 投稿したアイディアの表示
  • 各種SNSシェアボタン(アイディア下部)
  • 画面左端の各種SNSシェアボタン(固定表示)
  • コメント一覧表示
  • コメント投稿

ディレクトリに関して

以下のディレクトリ構成で実装していく

./src/
├── actions // アクション
├── apis // Firebaseとの通信処理
├── components // Reduxと関わりのないコンポーネント群
├── constants // 定数(主にAction Typeの定数)
├── containers // ReduxからPropsを受け取るコンポーネント群
├── images // 画像ファイル
├── models // State及びAction オブジェクトの定義ファイル
├── reducers /リデューサー
├── sagas // redux-sagaのタスク群
└── utils // ユーティリティ

【投稿一覧表示】検索機能の実装

検索機能を実装する

検索結果表示画面はすでにあるコンポーネントを使い回す方針で

【機能要件】

  • タイトルの文字列を検索対象にする
  • 文字列は部分一致していれば結果として表示する

【投稿・編集ページ】全体レイアウト設計・実装

全体レイアウト設計・実装する

デザインワイヤーフレーム_-_Google_ドライブ

タグの投稿機能と画像の投稿機能に関してはいったんスキップしておく
→ 後々必ず実装する

テキストの部分だけではあるが投稿、編集ページの全体レイアウトページを作成しておく

【npm】redux-devtools-extensionの追加

redux-devtools-extensionを開発で使用するために追加する
Stateの状態変化、送られているアクションタイプなどミスが発生しやすいところを視覚的に表示してくれるデバックツール

ER図の作成

定義したテーブル同士をどのようにつなげるかを設計する

【ヘッダー】ログイン機能を修正する

現在だと最初にログインしている状態になってしまっているので、ボタンを押したらログインするように切り替える

ログイン時にヘッダーに表示するデータがfirestoreから取得するようになっていないのでそこも修正する

【詳細ページ】コメント一覧表示

デザインワイヤーフレーム_-_Google_ドライブ-5

【実装する機能】

  • 1つのコメント表示機能
  • 投稿したユーザー情報の表示機能

Firebaseにダミーデータを入れてテストしながら開発する

【実装方針】
ユーザープロフィールとコメント内容で1コンポーネントとし、
コメントの数だけそのコンポーネントを表示させる

ここで実装すべきは、コメント1行の表示コンポーネント
一覧に関してはコメント部分で新たにコンポーネントを作成しそこで行う

【アイディア操作】アイディアの削除、編集機能を実装する

表題の通り

アイディアの削除と編集機能を実装する

【機能要件】
・編集、削除は投稿したユーザーしかできないようにする
・編集は下書きに戻す、または下書きを投稿することができるようにする
・削除は論理削除にする(別のDBに移す)

【コメント投稿】DB構造と投稿処理を変更する

・投稿に紐づいたコメント投稿にする
・詳細ページで表示する際には特定のコメントに紐づいたコメントのみを表示する
・UIDが一致している場合はコメント削除ボタンを表示し、削除できるようにする

【投稿・編集画面】画面レイアウト設計

デザインワイヤーフレーム_-_Google_ドライブ

これを作るが、以下の機能に関しては一旦スキップする

・タグ機能(何やらnpmがあるそう)
・画像投稿機能(ひと勉強また必要になりそうだから、今はとりあえずゴリゴリ実装したい)

それ以外の部分をレイアウト含めて実装する
UIはMaterial-UIを使用する

テーブル定義

DBの各テーブルにどんなデータを持たせるのかを設計する

アイディア投稿機能の実装

アイディア投稿機能をまずは実装する

FIrestoreに関してはテスト用のものを使用し、そこにデータが保存されるかを確かめる

【フッター】フッターメニューの実装

全てのページで使用するフッターメニューを実装する
メニューは固定ページへの遷移リンクを設置する
デザインレイアウトに関しては以下の画像の通り
デザインワイヤーフレーム_-_Google_ドライブ-4

#2 - 機能設計

簡単にどんな状態のユーザーがどんなことを行えるのかを箇条書きでいいので洗い出す

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.