E Angadi

A fully configurable e-commerce web application with dashboard using Firebase at backend.
Explore the docs »

View Demo · Report Bug · Request Feature

Note: Search and Payment functionalities are intentionally disabled on demo version.

Liked our work, wanna buy us a coffee?

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Steps to Deployment
3. Usage
   • All about categories
   • All about products
   • All about banners
   • All about locations
   • All about orders
4. Roadmap
5. Contributing
6. License
7. Contact

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

Built With

• React Js
• Material UI
• Firebase
• Razorpay
• Algolia
• Redux
• React Redux Firebase
• React Redux
• Node JS

Getting Started

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.

Prerequisites Steps

• Install Git and Node js
• Lanuch the terminal or powershell in admin mode and run the commands below.
• npm

  npm install npm@latest -g

• Firebase tools

  npm install -g firebase-tools

Steps to Deployment

1. Select the project location and launch the terminal / powershell. Clone the repo

   git clone https://github.com/E-Angadi/AngadiWeb.git

2. Install NPM packages

   npm install

3. Rename a file named .env.local.txt to .env.local in root directory.

4. Open firebase console with your Google account logged in and create a new project. Upgrade the project plan from spark to blaze by setting up your billing account. follow the instructions here.

5. 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.

6. Similarly, setup Authentication with Email/Password and Anonymous mode enabled. Also setup functions and storage with no changes made.

7. 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 .env.local.

    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

8. Complete the remaining changes with src/config/configs.js file like colors, title, description, etc.

9. Replace the public/imgs/logo.png with your logo and if possible public/favicon.ico with your favicon

10. Move to the terminal / powershell, run the command below. Allow the firebase CLI to access your project

    firebase login

11. 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
    • Use JavaScript as language in functions and use Eslint
    • Install firebase functions dependencies
    • Yes for Single Page Application (SPA)
    • Use build as public dist

    firebase init

    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

12. Create a Razorpay account and generate the key_id and key_secret in test mode. Follow the guide here. Paste this key_id in .env.local file. Now, copy the following command and replace "KEY ID" and "KEY SECRET" with your key_id & key_secret and run it.

      firebase functions:config:set razorpay.key_id="KEY ID" razorpay.key_secret="KEY SECRET"

13. 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.local file. 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

14. 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 title, description such 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.

15. 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.js file as value of functionsURL field.

    firebase deploy --only functions

16. 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 users in 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)

17. To test your application, run the command below in the terminal / powershell. open http://localhost:3000/ in your browser.

    npm start

18. open Sign In page from header or http://localhost:3000/signin and 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.

19. Build the application running the command below. This will create a production code in build folder

    npm run-script build

20. 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

21. Run the command below to enforce security and indexes

    firebase deploy --only firestore:rules
    firebase deploy --only firestore:indexes

22. 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.

23. 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.

24. If step 20 is successful and if your razorpay verification process is completed before, generate the key_id and key_secret in 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.

25. 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

firebase logout

and then

firebase login

Usage

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.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. 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.

License

Distributed under the GNU GPLv3 License. See LICENSE for more information.

Contact

T Bharath Chandra - [email protected]