Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/xamarsia/sellify

A demo of a e-commerce web platform microservice project.
https://github.com/xamarsia/sellify

cassandra devcontainers docker-compose express mongodb nextjs postgresql redis tailwindcss turborepo typescript

Last synced: 3 months ago
JSON representation

A demo of a e-commerce web platform microservice project.

Awesome Lists containing this project

README 

          


Sellify




Sellify is a microservice demo of an e-commerce web platform.



## Table Of Content



- [Description](#description)

- [Project Status](#project-status)

- [Project's Services](#projects-services)

  - [Frontend](#frontend)

  - [Backend](#backend)

  - [Examples](#examples)

- [Project Packages](#project-packages)

- [Project Databases](#project-databases)

- [Development Stack](#development-stack)

- [Project Features](#project-features)

- [Architecture Diagram](#architecture-diagram)

- [Environment Setup](#environment-setup)

- [Build & Run](#build--run)

- [Useful Commands](#useful-commands)

- [UI Prototype](#ui-prototype)

- [License](#license)



## Description



Sellify is a microservice demo of an e-commerce web platform.



The online store consists of two main web applications: one for administrators and another for customers.

The admin application provides tools for product management, order processing, and overseeing customer interactions, as well as inventory management.

The customer application allows users to browse products, manage their shopping carts and track their orders.



The project is set up as a multi-package workspace (monorepo).



## Project Status



Current Status: **Active Development**



## Project's Services



### Frontend



- [`customer-frontend`](https://github.com/Xamarsia/sellify/tree/main/services/customer-frontend/README.md) - a Next.js web application that provides customer UI.

- [`admin-frontend`](https://github.com/Xamarsia/sellify/tree/main/services/admin-frontend/README.md) - a Next.js web application that functions as a admin panel.



### Backend



- TODO: `customer-api` - a server dedicated to customer management.

- TODO: `admin-api` - a server for managing admin functionalities.

- TODO: `catalog-api` - a server for handling product catalog.

- TODO: `basket-api` - a server for managing shopping basket operations.

- TODO: `order-api` - a server for order processing.

- TODO: `cache-api` - a server that enhances performance through data caching.

- TODO: `logging-api` - a server that captures logs for monitoring and analytics.



### Examples



The following examples illustrate the practical use of custom React component libraries from various packages:



- [`common-ui-components-example`](https://github.com/Xamarsia/sellify/tree/main/examples/common-ui-components-example/README.md) - demonstrates component integration from the [`@sellify/common-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/common-ui-components/README.md) package.

- [`admin-ui-components-example`](https://github.com/Xamarsia/sellify/tree/main/examples/admin-ui-components-example/README.md) - demonstrates component integration from the [`@sellify/admin-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/admin-ui-components/README.md) package.

- [`customer-ui-components-example`](https://github.com/Xamarsia/sellify/tree/main/examples/customer-ui-components-example/README.md) - demonstrates component integration from the [`@sellify/customer-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/customer-ui-components/README.md) package.



## Project Packages



- [`@sellify/typescript-config`](https://github.com/Xamarsia/sellify/tree/main/packages/typescript-config/README.md) - tsconfig.json configuration to maintain consistency throughout the monorepo.

- [`@sellify/tailwind-config`](https://github.com/Xamarsia/sellify/tree/main/packages/tailwind-config/README.md) - tailwindcss presets and shared-styles.

- [`@sellify/eslint-config`](https://github.com/Xamarsia/sellify/tree/main/packages//README.md) - ESLint presets.

- [`@sellify/common-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/common-ui-components/README.md) - common UI components.

- [`@sellify/customer-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/customer-ui-components/README.md) - customer UI components.

- [`@sellify/admin-ui-components`](https://github.com/Xamarsia/sellify/tree/main/packages/admin-ui-components/README.md) - admin UI components.

- [`@sellify/common-icons`](https://github.com/Xamarsia/sellify/tree/main/packages/common-icons/README.md) - common UI icons components.

- [`@sellify/logger`](https://github.com/Xamarsia/sellify/tree/main/packages/logger/README.md) - log service with Cassandra.



## Project Databases



- `shopping-cart-db` - Redis (NoSQL - Key-Value, **AP** by CAP Theorem). Used by **basket-api** service for real-time shopping cart data.

- `session-cache-db` - Redis (NoSQL - Key-Value, **AP** by CAP Theorem). Used by **cache-api** service for quick access to user session data.

- `orders-db` - MongoDB (NoSQL - Document, **CP** by CAP Theorem). Used by **order-api** service to store customer order details.

- `catalog-db` - MongoDB (NoSQL - Document, **CP** by CAP Theorem). Used by **catalog-api** service for product details and inventory management.

- `logs-db` - Cassandra (NoSQL - Wide-Column, **AP** by CAP Theorem). Used by **logging-api** service.

- `admins-db` - PostgreSQL (SQL, **CP** by CAP Theorem). Used by **admin-api** service.

- `customers-db` - PostgreSQL (SQL, **CP** by CAP Theorem). Used by **customer-api** service.



## Development Stack



- `Next.js` ( React ) - for client and server rendering, advanced routing, nested layouts, data fetching.

- `Express` - for building RESTful APIs with Node.js.

- `TypeScript` - for static type checking.

- `Tailwind CSS` - for simplified CSS styling.

- `ESLint` - for code linting.

- `Zod` - for frontend forms validation.

- `Docker` - for isolated development environment and deployment.

- `Turborepo`- for scaling monorepo and make workflow in single-package workspace faster.

- `MongoDB` - for storing orders data.

- `Redis`- for storing inventory and basket data.

- `Cassandra`- for storing logs.

- `PostgreSQL` - for storing user and catalog data.

- `Selenium` - for automated testing of web applications by simulating user interactions across various browsers.



## Project Features



- [ ] `Authentication` - sign in, sign up, and sign out functionalities, including password reset option.

  - Use OAuth 2.0 for implementation.

- [ ] `Skeleton` - display loading skeleton before UI component uploads.

- [ ] `Notifications System` - notification system integrated.

- [ ] `Payment System` - payment system integrated.

- [ ] `Logging System` - logging mechanism for tracking events.

- [ ] `Testing` - automated tests.

- [ ] `DDoS Protection` - system is not vulnerable to DDoS attacks.

- [ ] `Implement customer service features`:

  - [ ] `Authentication` - support authentication via email and password or external identity provider ( Google ).

  - [ ] `Product Viewing` - display product details, including images, descriptions, prices, and availability.

  - [ ] `Shopping Cart` - view and edit personal shopping cart content functionalities.

    - Calculate the total price, including taxes and shipping.

  - [ ] `Order History and Tracking` - display order history.

    - Provide tracking information for orders.

  - [ ] `Product Search` - search for products by name.

  - [ ] `Product Filtering` - filter products by options (e.g., price range, category).

  - [ ] `Wishlist Feature` - wishlist to save items of interest.

  - [ ] `Input Validation` - server-side validation for user inputs and data integrity.

    - Display validation errors on the input fields when validation fails.

  - [ ] `Device Compatibility` - compatible with various devices to provide a smooth user experience.

    - Web platform with responsive design that adapts the layout and content to various screen sizes.

  - [ ] `Responsive design` - adaptive user interfaces that adjust seamlessly from smartphone to laptop screen sizes.

    - The UI adapts on smartphone views for screens with widths ranging from 320px (20rem) to 448px (28rem).

    - The UI adapts on laptop views for screens wider than 448px (28rem).

- [ ] `Implement admin service features`:

  - [ ] `Authentication` - support authentication via email and password.

    - Ensure that only authorized users are permitted.

  - [ ] `Statistic Dashboard`- general statistics visualization.

  - [ ] `Order Processing` - view and manage customer orders.

  - [ ] `Product Management` - add, edit, and delete products functionalities.

  - [ ] `Category Management` - add and delete categories functionalities.

  - [ ] `Inventory Management` - add quantities to products functionality.

  - [ ] `Customer Management` - display list of customers, their profile information and statistics; add archive customers option.

  - [ ] `Role Management` - create, edit, and delete roles functionalities for the super admin.

  - [ ] `Role-Based Access Control` - restricts system access to authorized users based on their assigned roles.

    - Users can be assigned to a single role.

  - [ ] `Admin User Management` - create and delete admins functionalities for the super admin.

  - [ ] `Form Validation` - server-side validation for user inputs and data integrity.



## Architecture Diagram



```mermaid



flowchart TD



    subgraph Data_Layer

        Redis[(Redis Shopping Cart Storage)]

        SessionCache[(Redis Session Cache)]

        MongoDBOrders[(MongoDB Orders Storage)]

        MongoDBCatalog[(MongoDB Catalog Storage)]

        CassandraDatabase[(Cassandra Database)]

        AdminDB[(PostgreSQL Database for Admins)]

        CustomerDB[(PostgreSQL Database for Customers)]

    end



    subgraph Business_Logic_Layer

        Catalog[Catalog Service]

        ShoppingCart[Shopping Cart Service]

        CacheService[Cache Service]

        Order[Order Service]

        LoggingService[Logging Service]

    end



    subgraph User_Management_Layer

        Admins[Admin Management Service]

        Customers[Customer Management Service]

    end



    subgraph UI_Layer

        AdminWeb[Admin Web Application]

        CustomerWeb[Customer Web Application]

    end



    subgraph External_Authorization_Layer

        CustomerAuthService[Customer Authorization Service]

        AdminAuthService[Admin Authorization Service]

    end



    %% Define Relationships

    AdminAuthService --> Admins

    CustomerAuthService --> Customers

    UI_Layer --> Business_Logic_Layer

    UI_Layer --> User_Management_Layer



    Catalog -- Mongoose --> MongoDBCatalog

    ShoppingCart --> Redis

    CacheService --> SessionCache

    Order -- Mongoose --> MongoDBOrders



    LoggingService --> CassandraDatabase



    Admins -- TypeORM --> AdminDB

    Customers -- TypeORM --> CustomerDB



```



## Environment Setup



1. Install Visual Studio Code (`ms-vscode-remote.remote-containers` extension).

2. Install Docker Engine [Install Docker Engine on Ubuntu](https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository) and [Linux post-installation steps for Docker Engine](https://docs.docker.com/engine/install/linux-postinstall/).

3. Clone project.

4. [Install turbo](https://turborepo.com/docs/getting-started/installation) by executing the following command:



   ```bash

   pnpm add turbo --save-dev

   ```



## Build & Run



1. Open project in VS Code.

2. [Reopen project in Dev Container](https://code.visualstudio.com/docs/devcontainers/containers).

3. To run project, open the terminal in the root directory and execute the following command:



   ```bash

   pnpm turbo dev

   ```



   This command will start the service on the development server.



4. Open  in a browser to see the customer web app or admin web on 3001 port.



## UI Prototype



This project has been designed in Figma prior to development; based on [SEL Prototype V1.0](https://www.figma.com/design/AO5rA915a6xdGOhtnVNobW/SEL-Prototype-1.0?node-id=2003-5147&t=0EzElkWsprYyA0pO-1).



The design process ensured that the layout, color schemes, typography, and overall aesthetics aligned with the project goals.



  

    Admin Home

    Customer Home

  

  

    

      

        Home

       

    

    

      

        News

      

    

  



## Useful Commands



These commands should be executed in the root directory of the `sellify` project.



- `pnpm install` - installs all dependencies for the project.

- `pnpm turbo dev` - starts the development server.

- `pnpm turbo build` - builds the project for production.

- `pnpm turbo start` - starts the production server.

- `pnpm turbo check-types` - runs type checking.

- `pnpm turbo e2e-tests` - runs e2e tests.

- `pnpm lint` - runs ESLint.

- `pnpm format` - formats every .ts, .tsx or .md file with Prettier.

- `pnpm store prune` - removes unreferenced packages from the store.

- `pnpm clean` - removes .pnpm-store and node_modules folders; run `pnpm install` afterward.



[Filtering](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters) by package is a simple way to only run tasks for the selected packages.



Add `package-name#` after `pnpm turbo` to apply the command for a specific package only.



```bash

pnpm turbo package-name#build

```



To apply the command to all directory, include `--filter="./directory-name/*"` at the end.



```bash

pnpm turbo build --filter="./directory-name/*"

```



## License



Licensed under the GNU GPL v3.0 License. See [LICENSE](./LICENSE) file for more details.