React Shopping Cart FirebaseReact Shopping Cart Firebase
E-commerce built using React and FirebaseReact Shopping Cart Firebase
E-commerce built using React and FirebaseOverview
React Shop | E-commerce react app
Simple ecommerce react js app with firebase.
Live demo
Run Locally
1. Install Dependencies
<code class="lang-sh">$ npm <span class="hljs-keyword">install</span> </code>
2. Create a new firebase project
Login to your google account and create a new firebase project here
Create an env
file - Set filename.env.prod
file for production and .env.dev
for development and save it in the root of your project folder
and add the following configuration details. You can either use the same configuration details for both development and production but it's best to make separate projects. It can be found on your firebase project settings.
<code><span class="hljs-comment">// SAMPLE CONFIG .env.dev, you should put the actual config details found on your project settings</span> FIREBASE_API_KEY=AIzaKJgkjhSdfSgkjhdkKJdkjowf FIREBASE_AUTH_DOMAIN=yourauthdomin.firebaseapp.com FIREBASE_DB_URL=https:<span class="hljs-comment">//yourdburl.firebaseio.com</span> FIREBASE_PROJECT_ID=yourproject-id FIREBASE_STORAGE_BUCKET=yourstoragebucket.appspot.com FIREBASE_MSG_SENDER_ID=<span class="hljs-number">43597918523958</span> FIREBASE_APP_ID=<span class="hljs-number">234598789798798</span>fg3-<span class="hljs-number">034</span> </code>
After setting up necessary configuration, create a Database and choose Cloud Firestore and start in test mode
3. Run development server
<code class="lang-sh">$ npm <span class="hljs-keyword">run</span><span class="bash"> dev-server</span> </code>
Build the project
<code class="lang-sh">$ npm <span class="hljs-keyword">run</span><span class="bash"> build</span> </code>
How to add products or perform CRUD operations for Admin
- Navigate to your site to
/signup
- Create an account for yourself
- Go to your firestore collection
users collection
and edit the account you've just created. Change the role fromUSER
toADMIN
. - Reload or sigin again to see the changes.
Firebase Admin to be integrated soon
Features
- Admin CRUD operations
- Firebase authentication
- Firebase auth provider authentication
- Account creation and edit
Other items by this author
React App Reskin Service
Have your App reskinned to meet your needs.
|
$499 | Buy now |
Category | App Templates / React |
First release | 13 September 2020 |
Last update | 15 September 2020 |
Operating Systems | MacOS 10.14, Windows 7, Windows 8, Windows 10 |
Files included | .css, .html, Javascript .js |
Tags | ecommerce, cart, e-commerce, shop, shopping, shopping cart, firebase, react |