Note: Search and Payment functionalities are intentionally disabled on demo version.
Table of Contents
About The Project
AngadiWeb is an e-commerce application built with an intention to help small and medium businesses to deploy there own e-commerce solution within no time.
Special Features of AngadiWeb:
- All payment options( Debit card / Credit card / Many Indian wallets) are available which are powered by Razorpay
- Cash on Delivery option is also available.
- Highly Secure.
- A functional Dashboard which supports several use cases.
- Forget about the server because everything here is on Firebase.
- A full-text based search powered by Algolia.
- Completely configurable.
- Deliverable location control.
- Guest user login is also available.
- Efficiently designed to reduce the firebase billing.
- Fully Responsive Design
This is a detailed step by step instruction guide to setup your own e-commerce site running without any changes in the code ( except some changes in the config files ). Prerequisites are necessary to setup your app locally, then follow the deployment steps to deployment.
- Install Git and Node js
- Lanuch the terminal or powershell in admin mode and run the commands below.
npm install [email protected] -g
- Firebase tools
npm install -g firebase-tools
Steps to Deployment
Select the project location and launch the terminal / powershell. Clone the repo
git clone https://github.com/E-Angadi/AngadiWeb.git
Install NPM packages
Rename a file named
.env.localin root directory.
Hit on the firestore tab in the left drawer in the firebase console and create the firestore database with security rules in test mode. Follow this guide.
Similarly, setup Authentication with Email/Password and Anonymous mode enabled. Also setup functions and storage with no changes made.
Click on the web icon in project overview and create a web project with hosting enabled. and copy the Firebase SDK snippet in config mode from project settings. Copy & paste each of these configs with the dummy ones present in
REACT_APP_FIREBASE_API_KEY=your_firebase_apikey REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_authDomain REACT_APP_FIREBASE_DATABASE_URL=your_firebase_databaseUrl REACT_APP_FIREBASE_PROJECT_ID=your_firebase_projectId REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storageBucket REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messagingSenderId REACT_APP_FIREBASE_APP_ID=your_firebase_appId
Complete the remaining changes with
src/config/configs.jsfile like colors, title, description, etc.
public/imgs/logo.pngwith your logo and if possible
public/favicon.icowith your favicon
Move to the terminal / powershell, run the command below. Allow the firebase CLI to access your project
Initialize firebase, select the options
- Use existing project
- Select your project (Which you created in step 3)
- Select firestore, functions and hosting
- Don't override any files
- Install firebase functions dependencies
- Yes for Single Page Application (SPA)
buildas public dist
if you have worked with mulitple projects, specify firebase before running this command about your current project by using below command
firebase use your_project_id
Create a Razorpay account and generate the
key_secretin test mode. Follow the guide here. Paste this
.env.localfile. Now, copy the following command and replace
"KEY SECRET"with your
key_secretand run it.
firebase functions:config:set razorpay.key_id="KEY ID" razorpay.key_secret="KEY SECRET"
Create a Algolia account and create a index with name
products(Case Sensitive). Generate the API keys. Copy the app_id and search only key and paste it in the
.env.localfile. Your file should look like this with your credentials
REACT_APP_ALGOLIA_APP_ID=YOUR_APP_ID REACT_APP_ALGOLIA_SEARCH_ONLY_KEY=YOUR_SEARCH_ONLY_KEY REACT_APP_ALGOLIA_INDEX_NAME=products
Copy the following command and replace "APP ID" and "ADMIN KEY" with your algolia app id & admin key and run it.
firebase functions:config:set algolia.app_id="APP ID" algolia.admin_key="ADMIN KEY"
Go through the steps in algolia, setup your search parameters as
descriptionsuch that, user can search over these two values only. You can adjust other search terms even after adding the products. Now your products data will be in sync with algolia data.
Run the command below to deploy firebase functions which are essential for payments. copy functions url obtained after successully deploying functions. Paste that URL in
src/config/configs.jsfile as value of functionsURL field.
firebase deploy --only functions
Create your Admin Account
- Open the Authentication tab in your firebase console and click on the Add user button. Enter your admin email and password and hit on Add user button.
- You can witness a user added in the list, copy the User UID of the account you just created from the list.
- Open the Firestore tab in your console and click on Start Collection button, enter
usersin the Collection ID field and click on next.
- Paste the UID of the user you just created as Document ID, add the feilds below with exact name, type and values. and hit the save button.
- isAdmin - boolean - true
- isGuest - boolean - false
- pincode - number - 0
- cart - string - (leave empty)
- delivery - string - (leave empty)
- name - string - (your name)
- pNum - string - (your phone number)
To test your application, run the command below in the terminal / powershell. open
http://localhost:3000/in your browser.
open Sign In page from header or
http://localhost:3000/signinand enter your admin email address and password to signin. Open your dashboard at
http://localhost:3000/dashboard. Open the Locations tab in the dashboard and add few deliverable locations pincode. Now open the home page and check the colors and logo.
Build the application running the command below. This will create a production code in
npm run-script build
Run the command below to host your site. you will obtain the hosted site URL after successfully hosting site. You can get the same link in the hosting tab of your firebase console.
firebase deploy --only hosting
Run the command below to enforce security and indexes
firebase deploy --only firestore:rules firebase deploy --only firestore:indexes
Open the hosted site after 10-15 mins, signin with your admin email address and password. Add few categories and products as explained in the Usage Section.
Now test the application by placing an order by adding few products into the cart with admin account and normal account. You should see those placed orders in your dashboard. You should also see payment received in your razorpay dashboard.
If step 20 is successful and if your razorpay verification process is completed before, generate the
key_secretin live mode and replace those with test mode keys which we placed in step 7. Also setup the payment capturing setting in your razorpay dashboard if need for your bussiness.
Now build the project again as explained in step 16 and host it as explained in step 17. Your Deployment is successful.
NOTE: some common errors which we encounter while firebase deployment can be resolved by logging out and logging in again by using below commands
All about Categories
Steps to add a category
- Enter the category name and description in the title and description fields
- Click the Add Image button to add a category image, recommended size of 200 px X 200 px. similarly, add a banner image with the size shown the in the default image (1000 X 200).
- Hit on the submit button to create the category, a notification will show up after successfully creating a category.
Edit Category Listing
- Search and view all the categories details and title, description, images placed and products count in that category.
- To edit title and description, click on the edit icon beside title and to change the images, click on the image icon at bottom left of images.
- Add new units and use the respective toggle button to change the state of all the products in that category using that unit.
- By visibility, we mean in stock or not. So, if the product visibility is false then it will be shown as Out of Stock in the frontend.
All about Products
Steps to add a product
- Check ON the Product Visibility switch to make that product visible (In Stock) in the website.
- Check ON the Special Offer switch to make that product visible in top deals swiper in the home page.
- Enter the product title, description, select the category, select the units and enter the value, price, discount percentage, add multiple taxes in percentage / amount form by clicking on add new tax button.
- Add a product image of size 420 px X 420 px by clicking on add image button. After filling all the details about the product, hit the submit button. You will receive a notification about product creation in top right corner.
Update/Delete a Product
- Search product by its name or product id
- Edit the product details by clicking on the edit icon. Edit the the product iage by clciking on the image icon the table row. Same with the delete icon.
All about Banners
Steps to add a banner
- Paste the link to which user has to be navigated, when clicked on the banner
- Add banners with size shown in the placeholder images in the form.
Delete a Banner
- Hit the delete icon to delete banner.
All about Locations
Steps to add/remove a location
- Enter the deliverable pincode in the pincode field and hit add pincode.
- Remove the pincode by clicking the cross button.
All about Orders
Manage your orders
- Search the order by it's order id or delivery pincode.
- You will receive all the orders placed in the table. Click on the view button the view all details of the order placed.
- Click on the tick icon after delivery or click on the cross ison to cancel the order.
- If the order is Cash on delivey type it will be displayed in payment type field.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature)
- Commit your Changes (
git commit -m 'Add some AmazingFeature')
- Push to the Branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
Scope of improvement
- Converting into SSR.
- Improving the search without using algolia.
- Multiple UI options which should be configurable.
- Support for other payment gateways
- Support for SMS or Email providers
- Adding tests and automating it
- Custom Backend.
Distributed under the GNU GPLv3 License. See
LICENSE for more information.
T Bharath Chandra - firstname.lastname@example.org