ZenFlux demo projects.

shop-catalog

This is a demo project for ZenFlux. It is a simple catalog of products.

shop-catalog uses both

• @zenflux/core
• @zenflux/redux

Currently, it includes:

Backend:

• PHP vanilla backend
• Require PHP 7.4

Frontend:

• React
• Redux

Live

http://inewlegend.com/zenflux/demos/shop-catalog/frontends/react-redux/build/

What inside

• Controllers:

  • Cart/Controller - To handle cart items.

  • Cart/Item/Controller - To handle cart item.

  • Catalog/Controller - To handle catalog items per page.

  • Catalog/Item/Controller - To handle catalog item details.

  • Components/Pagination/Controller - To handle pagination.

  • Layout/Sidebar/Controller - Toggle the sidebar, print cart.

• Router Controllers:

  • Pages/Controller - Mange which page to show Catalog/Checkout
  • Welcome/Controller - Determine if the backend available and to setup the database connection/show errors.

• Pure React Components:

  • Spinner.
  • Transaction.
  • Navbar.

• Components with controllers:

  • Pagination - Uses simple controller to handle user actions.
  • Catalog
  • Cart
  • Sidebar

• Components with router controllers:

  • Welcome - Use router controller to show different components depends on the needs.
    • Error component.
    • Welcome component - Setup DB.
  • Pages:
    • Catalog - Show catalog page.
    • Checkout - Show checkout page.

Installation

Get the repo:

git clone https://github.com/ZenFlux/demo-shop-catalog

Enter repo folder:

npm install

Run the backend:

npm run backends:php:vanila:start

Turn on new session & enter frontend folder:

npm run frontends:react:start

Enter the frontend:

http://localhost:3000

Setup the database connection:

• Press connect.
• Wait few seconds till the pages reloaded.

And walla, you have a working catalog: