Main Site

www.edroplets.org

Dependency management

Vite is used to manage builds and development HMR/tooling. Vite has been chosen over Webpack for its simplicity, speed, and developer experience.

See vite.config.ts for the Vite config we are using.

Source code structure

cypress/       # Cypress E2E/unit tests
public/        # Static asssets and content to be served (images, favicons)
src/           # All source code
|- component/  # Components shared by different pages (navbar, footer)
|- context/    # App-wide context providers (cart information)
|- lib/        # Constants and utility functions
|- page/       # Folders corresponding to pages at URL path of site
|- router/     # Route map for React Router
|- types/      # Miscellaneous TypeScript types
|- global.css  # Global CSS styles (Tailwind and common component classes)
|- main.tsx    # Entrypoint for web app

In particular, the page directory is structured such that page/[path]/index.tsx corresponds to the page at /[path] when visiting the website. When creating new pages, please adhere to this format.

Components shared by the frontends will be in the shared UI package @edroplets/ui.

Shopify integration

We use the Shopify JavaScript Buy (JS Buy) SDK to implement checkout and payment functionalities.

In client/src/context/CartContext.tsx we use the checkout API provided by JS Buy SDK for the checkout process and order creation.

In the Shopify development store, we use webhooks to send order data to our server and store the data in our server to generate order information (the orderInfo model in server/src/models/order-info.model.ts) for order management in the eDrops website.

Shopify store dashboard:

• https://edrops-store.myshopify.com/admin

Real Time Communication

We support real time communication on this platform for order chat messaging using WebSockets. Currently we use the Pusher API, however, it is possible to migrate to host our own WebSocket endpoint using a library like socket.io.