Skip to main content
  1. All Posts/

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>