Giter VIP home page Giter VIP logo

shokuka's Introduction

Banner

作りたいものは?

本格!手軽!中華料理のレシピ投稿アプリーー「食華(しょくか)」

  • 背景:私はグルメが大好きな**人です。5年ほど前、私は日本に来たばかりの頃、日々本格中華料理を恋しくなりました。その後、コロナ禍の影響の下で自宅で料理を作り始め、中華料理を作る習慣をつけました。日本人の友達としょっちゅう中華料理を食べたり、自分が作った中華料理をみんなに一緒にシェアしたり、いい思い出を作りました。しかし、私は自分が好きなことからいろんな問題点を見つけました。
  • 問題点1:来日**人留学生人数の増加によって、池袋や高田馬場では本格中華料理店が増えました。しかし、中華料理店の外食費は母国より高いです。
  • 問題点2:東京と比べて、地方の中華物産店と本格中華料理店が少ないので、地方住みの**人にとって母国の味を食べるのはかなり不便になります。
  • 問題点3:中華料理に興味があるが、作り方がわからない日本人もいます。自分が日本のスーパーで手軽に買える食材を買って中華料理をアレンジしたので、自分の工夫点をシェアしたいです。

そのため、日本で手軽に中華料理を食べたい、あるいは作りたい人たちの困りごとを解決したいという思いを込んでこのアプリを作りたいです。

使用している技術・ツール

使用している言語、技術とツールをここで挙げます。バージョンは全て開発時点における最新バージョンで実装します。

  • Frontend: HTML / JavaScript / Tailwind CSS
  • Backend: PHP + Laravel / MySQL(phpMyAdmin)
  • Infrastructure: Docker / AWS
  • Others: Git / Github Actions / Figma / VSCode / Lucidchart

実装したい機能は?

基本のCRUDを通して、ユーザーがレシピの作成、閲覧、更新と削除ができます。

ER図

ER Diagram

各テーブルの名前と意味は以下になります。

テーブル名 意味
Users 本アプリを使用しているユーザー
Recipes レシピの内容
Steps 料理をするためのステップ
Recipe_step レシピとステップの中間テーブル
Ingredients 料理をするための材料と分量
Recipe_Ingredient レシピと材料の中間テーブル
Followers フォロワー関連
Likes お気に入りレシピ
Comments コメント

インフラ設計図

ER Diagram

実際の画面

LP

LP1

LP2

新規登録

Register

ログイン

Login

プロフィール

Profile

ユーザー自身がお気に入りのレシピのここに載せます。

Favorite

レシピ作成

それでは、麻婆豆腐の作り方を書いてみようと思います!

実際にレシピを書くためきっと長い文章を書く必要があるでしょう。

機能を紹介するため、あくまでも適当なレシピを書きますので、ご了承ください。

Make1

レシピのカバー写真をアップロードし、タイトルと紹介文を入力します。

Make2

次は材料と分量を追加します。

素のJavaScriptで動的な入力欄を作成したので、材料の追加、削除ができます。

Make3

次は作り方ステップも追加します。必要な場合であれば写真のアップロードも可能です。

Make4

最後に、このレシピを作るための注意点も一筆で書きましょう。

ちなみに、麻婆豆腐を作るなら絹豆腐の方がお美味しいでしょうね。

いざ、投稿へ!

レシピ投稿

やっと、レシピを投稿しましたー!!

Recipe1

Recipe2

Recipe3

先ほど適当に書いたレシピをちゃんと反映されました。

レシピの中に何か追加したい内容があれば、もちろん再編集して、更新できます。

もっと詳しく知りたい...?

もっとたくさんの裏話を知りたい?→完全版記事

私の経歴を知りたい?→Wantedly

Let's connect!→Twitter(X)

お読みいただき、ありがとうございます!

shokuka's People

Contributors

francinehuang avatar

Watchers

 avatar

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.