React×Stripe×Firebase×ExpressでAmazonクローンを作った

## 概要

Reactのバックエンド処理と、決済処理機能を爆速で実装できると話題のStripeを習得するために実装しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438597/db5f0e47-4243-f990-7fa3-97b935af4208.png)

![23e93b8f-041d-4a0d-bc3c-49a53783d725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438597/bb6fb123-7db2-b9b6-35fd-5bc2274b9512.png)

![ac8e8acc-390f-4fd4-8d24-52db20e8a103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438597/1650b3c8-0d98-6378-948c-7c0167a23a49.png)

[Site Demo](https://clone-react-9f042.web.app/)
[Github](https://github.com/newt0/amazon-clone-react)

ReactでのStripe実装の参考になれば。
また、Reactの最新の書き方に則ったコードを心掛けているので、Reactを勉強中の方にはGithubレポジトリが参考になると思います。



## 使用技術

- React
- JavaScript(ES6)
- Hooks
- Functional Component
- Context API
- Redux
- firebase(Hosting, Function)
- Stripe
- Express
- Material UI
- BEM

フロントはReact,バックエンドはExpressとFirebase Function、決済処理はStripeを使用しています。
状態管理はRedux、ContextAPI、HOOKsをフル活用しています。
スタイリングはMaterial UI、及びBEMに基づくCSSで行っています。


## 参考

[React開発効率を3倍にするVS Code拡張機能&環境設定](https://qiita.com/newt0/items/b7810fb38c339ec5e4a7)
[React初案件獲得までの流れ(学習・案件探し・面接・契約まで)](https://qiita.com/newt0/items/975a379de904858dd0f9)

[The Complete React Developer Course (w/ Hooks and Redux)](https://www.udemy.com/course/react-2nd-edition/)
[Universal React with Next.js - The Ultimate Guide](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Funiversal-react-with-nextjs-the-ultimate-guide%2F)
[React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-native-first-step%2F)
[React.js & Next.js超入門](https://amzn.to/2WwaXwQ)
[実践Firestore](https://amzn.to/3auotcD)
[初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発](https://amzn.to/3h0S7aJ)

<a href="https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=0b5b3306ff6ecee8f89a30f15b492aa9&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07X7DHZ9F&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B07X7DHZ9F" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/dp/B0851BGDQG/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=fedb0f3b6f6cc9bbc2a5b25b79509ef5&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0851BGDQG&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B0851BGDQG" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEJavaScript-%E7%AC%AC3%E7%89%88-%E2%80%95ES2015%E4%BB%A5%E9%99%8D%E3%81%AE%E6%9C%80%E6%96%B0%E3%82%A6%E3%82%A7%E3%83%96%E9%96%8B%E7%99%BA-Ethan-Brown/dp/4873117836/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=298855TL8IQBA&dchild=1&keywords=javascript&qid=1608361534&sprefix=JavSc,aps,270&sr=8-18&linkCode=li2&tag=fden02-22&linkId=9eb63941ebf502c87942606420c6108a&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4873117836&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=4873117836" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />