Skip to content

E-commerce Rental Platform written in Flask & React

License

Notifications You must be signed in to change notification settings

anantzoid/Ostrich

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

Ostrich: E-commerce rental platform

Ostrich was built as a physical book rental platform which enables users to order books to their doorstep, track the delivery status, rate, review and return books. The complete e-commerce ecosystem surrounds the core feature providing the users with an end-to-end experience via strategic and timely push notification and mailers, Google authentication, automated updation of items and inventory and user behaviour tracking to understand preferences to name a few.

The architecture follows a lightweight, intuitive design pattern inspired by the beautiful flamejam project for the backend and flux architecture for the React frontend. The platform is written in a simple and generic manner and can be customized to suit various business solutions.


Homepage


Scroll to the bottom to checkout more screenshots.



Tech Stack


Installation

The installations steps have been tested on a linux machine (Ubuntu) and might vary for other OS in terms of setting up the dependencies.

  1. Clone the repo and cd into it.

  2. Install MySQL.

    sudo apt-get install mysql-server	
    sudo apt-get install libmysqlclient-dev
    

    Create database ostrichdb. Import the sample data dump. One way to do this is:

    mysql -u root -p ostrichdb < docs/ostrichdb.sql
    
  3. Install python dependecies

    xargs -a docs/requirements.txt -n 1 pip install
    

    As opposed to pip install -r docs/requirements.txt, this method skips over errors while installation.

  4. Copy the config file.

    cp -R docs/ostrich_conf /etc/ostrich_conf
    

    Alternatively, you can change the location of the config file in app/__init__.py and app/views/v1/website.py (line 144).

  5. Make appropriate changes in the ostrich_conf/app_config.cfg.template file, removing the .template extension.

  6. Installing frontend components:

    cd app/static/js
    npm install
    npm run pack
    
  7. Install redis. Follow the steps in the link till Build and Install Redis. Then start the redis server.

    redis-server
    
  8. Start the node server

    node render_server.js
    
  9. Start the flask server

    python run.py
    

Optional Setups

The following are other things to setup that application makes use of to provide a richer experience.

  1. Elasticsearch

Prodcut Searches can be made in two different ways using the same APIs: Elasticsearch and MySQL. This switch can be controlled from the config file. The schema for ES lies in docs/search_mapping.json and items can be indexed in ES by calling the python manage.py indexer.

  1. Google Auth

Although there is a manual signup API, the web application uses Google Authentication as it's default signin technique. To enable this, get a client_id and paste it in ostrich_conf/google_client_secrete.json.

  1. Celery

Many background tasks run to perform tasks like keeping the db updated (by crawling new listings and updating the existing ones), sending notifications and mails to users for returning the book and upselling products etc. These tasks are run by Celery and can be reviewed in scheduler.py.

  1. Supervisor

To manage independenly running tasks like Celery schedulers, node servers etc., Supervisor can be setup.

  1. Mixpanel

Tracking has been setup to keep a counter of views on different activities by the user. All that needs to be done is save the Mixpanel credentials in the config file.

  1. Arbor: B2B model

Apart from serving the consumers directly, Ostrich also had a B2B business model where organizations would signup and have a stocked book rack placed in their lobby. The people working over there could access a different interface and search and borrow books from the stock free of charge. The accesspoint is /arbor but I still need to work on the other parts of the B2B ecosystem to prepare for public release.


API endpoints

The API endpoints cater to various user and admin facing features that correpond to both the web and mobile app. Relevant information is cached within API calls. The following is a non-exhaustive list highlighting some of the relevant ones:

Search

Orders

User

Admin



Bonus Goodies

SEO by rendering React pages through Flask

We know good SEO is acheived if pages are rendered via server initially. But here lies a challenge since the backend here is Flask, and only Node can render React pages from server side. Hence, with the help of Python-React, an intermediate Node server is setup that receives payload from flask depending on the url/query and renders the React template to normal string accordingly. This plain string is then passed pack to Flask which returns it to the browser. Of course, there a number of intricacies that needs to be taken care of which I've isolated in this design pattern here. Also, note that this mechanism was implemented in Spring 2016 and there might have been considerable developments done in the area since then.

Responsive

The CSS has been written in a fully responsive manner to support all kinds of media resolutions.

Responsive


Mentions

Ostrich appeared in a local lifestyle blog eons ago.

Supporting apps and dashboards

Apart from the main product codebase, Ostrich comprises of a suite of complementing tools consisting of:

  • Admin Dashboard
    • Track and update orders
    • Crawl and add items
    • Monitor user activity
    • Control homepage and app content
  • Slack app
  • Android app
  • Arbor (Business Solution)

I'm still working on refining the docs and make them easily installable on any machine. Contributions are welcome.

Product Preview

Catalog Page

Item

Order Dialog

Order

Add address Dialog

Address

Responsive Catalog Page

Catalog