HI QR

Introducing a Seamless Point Of Sale System: Revolutionizing the Dining Experience

In an age where convenience is paramount, diners are no longer content with traditional ordering processes. With the rise of digital technology, the way we experience dining needs an upgrade. Enter our new Point Of Sale System, designed to blend convenience with efficiency.

You can see the websiteS below

QR ORDER WEBSITE -> Visit Website

Store For Order (QR)

Admin DashBoard for Store (Example)

Admin DashBoard for the store above

Stacks

  • Next.js
  • Node.js
  • Typescript
  • MySQL
  • Prismadb
  • Framer Motion
  • GSAP
  • Zustand

How does it work?

Smart QR Ordering

Each table is equipped with its unique QR code. Customers can simply scan the code to view the menu and place orders instantly. No waiting, no fuss.

Our Store: Designed for the Mobile User

In today's fast-paced world, we understand the importance of being able to access, browse, and make purchases on the go. Our store has been meticulously designed with the mobile user in mind.

  1. Mobile-Friendly Design: Our design is not just responsive—it's mobile-optimized. That means every element, from the navigation menus to the product displays, is tailored for a seamless mobile experience. The intuitive layout ensures that you can find what you're looking for with ease and speed.

  1. Incorporated Shopping Cart: To make your shopping experience as convenient as possible, our mobile store features easy-to-use shopping carts. Whether you're picking out your favorite foods or browsing our diverse range of products, adding items to your cart is just a tap away.

You can preview the product and add it by a click

  1. Effortless Ordering: Why wait in line when you can place your order directly from your phone? Our platform allows you to browse, select, and finalize your purchase in just a few taps. It's shopping made simple.

  1. Access to Order History: Keeping track of your past purchases is no longer a chore. With our mobile interface, you can quickly access your order history, making it easy to repurchase your favorite items or keep tabs on your spending.

Experience the future of shopping with our mobile-friendly store, where convenience meets sleek design. Shop with us today and enjoy a shopping experience like no other.

Real-time Order Management (Socket.io)

On the backend, administrators and staff have immediate visibility of incoming orders. Whether it's a single café or a chain of restaurants, all orders funnel into a real-time system. This ensures timely preparation and delivery of meals, enhancing customer satisfaction.

[Socket.io is on process]!

You can check the full orders that came from multiple tables

You can see the orders by each Tables that you made

You can see the detail of the each order

Multi-Store Operation

Have multiple outlets? No problem! With our system, you can manage orders, menus, and operations across multiple stores from a single account.

Instantaneous Statistics

With an intuitive dashboard, gain insights into your sales and order statistics. This provides a pivotal advantage in understanding customer preferences and optimizing the menu accordingly.

Will add more statistic about stocks

Easy Setup and Management

Setting up an online storefront has never been this easy. Within 10 minutes, one can establish a sleek and user-friendly store interface. The system also permits hassle-free product updates. Adding new tables? Our automatic QR code generator will handle that for you.

And you can add, edit, delete any properties Easily

Connectivity with Minimal Internet

Recognizing the challenges posed by weak internet connectivity in certain regions, we've optimized our system to function smoothly with minimal internet access.

How I optimized the store that users see

Advanced Cart State Management in the Project

  • The backend and frontend are hosted on separate servers. >- The frontend manages the cart, item quantity, and emptying the cart. >- The global state is managed using a map that takes dynamic queries of storeId and tableId as keys. These are then linked to PersistStorage, thereby minimizing internet usage. >- The only query executed when customers scan a QR code and choose a menu is one that fetches products for each category. Code Overview:

Interfaces

  • CartItem: Represents an item in the cart with its product details and quantity.
  • CartStore: Represents the entire cart, and has functions to add, remove, change item quantity, and clear the cart.
  • Caching Mechanism: A map named storeCache is utilized to cache the cart states, making retrieval faster.

useCart Function

  • This is a zustand-based hook to manage the cart state.

  • It takes storeId and tableId as parameters to create a unique storeKey.
  • If the cart state for a particular storeKey exists in the cache, it returns it >directly.
  • If not, it creates a new state with create and persist, allowing the cart items to >be added, removed, and modified.
  • The cart state is stored in the browser's local storage with a unique name, cart-storage-${storeId}-${tableId}, ensuring each table at a store has its own cart state.
  • Notifications are sent using toast.success whenever items are added or removed. This zustand code effectively manages the cart's state, leveraging caching and persistent storage to enhance user experience.

Database Architecture Highlights

The database's heart is the Store table, around which all other entities revolve. Each store can have multiple Billboards, Categories, and Tables, representing various promotional displays, menu categories, and seating arrangements, respectively.

Products, the essence of any store, reside within the Product table and are associated with specific categories. Each product can have multiple images, allowing for a visually rich menu. As orders pour in, they're tracked in the Order and OrderItem tables, facilitating real-time updates for the kitchen and administrative staff.

In conclusion, this Point Of Sale System isn't just a digital tool—it's a transformative experience for both diners and restaurateurs. In the digital age, it bridges the gap between traditional dining and modern-day convenience, ensuring a seamless dining journey for all.

The flow of the admin and store

aa

1. Store Management:

Store Table:

  • Represents individual stores or restaurants.
  • Each Store is uniquely identified by an id.
  • Has a name to represent the name of the store.
  • Each store is associated with a userId, indicating which user manages or owns that store.

2. Product and Category Management:

Category Table:

  • Represents the various categories of products (like "Appetizers", "Main Course", etc.).
  • Each Category is associated with a particular Store through storeId.
  • Each category can also be associated with a Billboard (which seems to be an advertisement or featured display for that category) using billboardId.

Product Table:

  • Represents the individual items or dishes available for order in a store.
  • Each Product is associated with a particular Category through categoryId.
  • Products have various attributes like name, price, description, and flags to indicate if they are isFeatured or isArchived.

Image Table:

  • Represents images of individual products.
  • Each image is linked to a Product via the productId.
  • Contains a URL (url) pointing to the actual image file.

3. Table Management and Ordering:

Table Table (a bit of a tongue-twister):

  • Represents the physical tables inside a store.
  • Each table is associated with a particular Store through storeId.
  • Tables have an isPaid flag to indicate if the current orders on that table have been paid or not.

Order Table:

  • Represents orders placed by customers.
  • Each order is linked to a Store via the storeId.
  • Orders have different states, represented by the orderState enum. It can be "NOTREADY", "IN_PROGRESS", "READY", or "PAID".
  • The isPaid flag indicates if the order has been paid for or not.
  • Each order is associated with a table through tableId, indicating where the order is placed.

OrderItem Table:

  • Represents individual items within an order.
  • Each OrderItem is linked to a specific order using orderId and to a specific product using productId.
  • The count represents the quantity of that product in the order.

4. Billboard Management:

Billboard Table:

  • Represents billboards or advertisements for specific categories or promotional events.
  • Each billboard is associated with a specific Store through storeId.
  • Has attributes like label and imageUrl to display the content of the billboard.

[TOTAL ORDER TABLE WILL BE ADDED!]

Relationships:

  • A user can manage multiple stores, but each store is associated with only one user.
  • Each store can have multiple tables, categories, products, billboards, and orders.
  • A category belongs to one store and can be associated with one billboard.
  • A product belongs to one category and one store.
  • Each product can have multiple images.
  • An order is associated with one store and one table and can have multiple order items.
  • An order item is linked to one product and one order.
  • Each billboard is associated with one store.