e-commerce-shop
eCommerce
TypeScript
E-commerce Shop
<p>
Its fully fuctional ecommerce shop using React and <a rel="nofollow noopener" target="_blank" href="https://firebase.google.com/">FireBase</a>, and you can log in to your account easily by google/phone and buy fake product !
</p>
<p>
this is part of my personal practice, ⭐ please give this repo star ⭐
</p>
<blockquote>
<p>
<strong>NOTE :</strong> this project build for personal practice and its not real business
</p>
</blockquote>
<p>
<a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/ec322c2a7a8f205eb8e453243f93037331f9b5082421ab2559a55c0e14d3b71d/68747470733a2f2f6c68332e676f6f676c6575736572636f6e74656e742e636f6d2f554e346b73716b6f425376584f516d4f59316a345875456854647362494d306949434c4f736257383270504745442d4b476c3971496958375250386a32755f2d75796d6d50676f4b654e776d2d796b74597167644b66696b55415449655166467562546469496661316e5357596e30442d4b4c724f2d6b436a474e654f7473726f7555744f567277696745506554724162396d32504433416b55376a66774c31627a4945346b446c703743626168633236377a4a38354c5a307770396646446a5150796b4f6338744862416362747361784a4959626f646c65457a734e776873774e67367a354355754164796d63486b475a7a467565706c516731686d6252695343394962745a474d384b363453766936496575455756594f3556794f7358562d6f4f46547542744971435257554f6836552d54444841754d757655314876594b32776d6a5a546c4e764e51596f454e3341354e4271613758655233716e557146325867426b4b4449306e59474d33635f61506f72326757583444776e42615679323737514d5539614e654733644a66775a71744d3177336f78583577356c4c4441554a41554854694a724d79755378496832527446614e7551793250424130366b553071447a705045782d4e7657416872516d486b6d4b6a5a65736e62576b45545f5f4d31474363757832334b69636a2d755561326953784d78474d54596f314570595373573054306831675042786b70566d583152676a6b674d555f45794a447259636776495a337846466646464650485a764a3555687057793953696b355a4336466d5f4d4d6c3656784d655972304e6f7a5a44615f502d624e6e7246364f3365657450594a50526d31755151796d6c695f676b6c6666353376456233726c79686a414d7549515969466e6639426c6e46345176686233614c564f62624d72666d70627162776e32683469514e4d6255425f6f4a7931334f67465253365341635743724c37655f7a52414861704951306337665936512d656844355675446d716d4e6670723164765f38783045374f562d334b4f615434794277504e443679434271354476344e5175306c7571714b71793361347244735f624e7750364239633d77313237382d683731302d6e6f3f61757468757365723d30"></a>
</p>
<h4 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-i-use-" class="anchor" aria-hidden="true" href="#i-use-"></a>I use :
</h4>
<blockquote>
<p>
react , react router , framer motion , context and reducer for state manageing ,
</p>
</blockquote>
<blockquote>
<p>
firebase as main backend service (auth , database)
</p>
</blockquote>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--features" class="anchor" aria-hidden="true" href="#-features"></a>✔ Features
</h2>
<ul dir="auto">
<li>
authentication with phone number / google auth
</li>
<li>
privet route
</li>
<li>
fully responsive
</li>
<li>
shoping cart (save in local storage)
</li>
<li>
buy product (not actual product)
</li>
<li>
order history (show orders of each user)
</li>
<li>
discount copon system (editable in data/copon.json)
</li>
<li>
edit profile, email , name
</li>
<li>
log out and delete acount
</li>
<li>
custom hook for handling form, toast, local, intersection observer, storage, authorization
</li>
<li>
infinite scroll for products
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--upcomming-features" class="anchor" aria-hidden="true" href="#-upcomming-features"></a>✨ upcomming features
</h2>
<ul class="contains-task-list">
<li class="task-list-item">
quick product review
</li>
<li class="task-list-item">
open each order
</li>
<li class="task-list-item">
add product to favourite list
</li>
<li class="task-list-item">
compare two product together
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--directory-tree" class="anchor" aria-hidden="true" href="#-directory-tree"></a>🌴 Directory tree
</h2>
<pre>|-- public
|– src | |– Layout | |– assets | | |– image | | |– svg | |– components | |– config | |– context | |– data | |– hook | |– page | |– routes | |– style | |– types
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-getting-started" class="anchor" aria-hidden="true" href="#getting-started"></a>🚀Getting Started
</h2>
<ol dir="auto">
<li>
Clone the project
</li>
</ol>
<pre>git clone https://github.com/mostafa-kheibary/e-commerce-shop</pre>
<ol start="2" dir="auto">
<li>
Install project dependencies
</li>
</ol>
<pre>npm install
#or yarn add
<ol start="3" dir="auto">
<li>
run the project
</li>
</ol>
<pre>npm start
#or yarn start
<ol start="4" dir="auto">
<li>
opne localhost:3000 to see the project
</li>
</ol>