1"use strict";(self.webpackChunkredis_developer_hub=self.webpackChunkredis_developer_hub||[]).push([[4386],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>h});var n=r(67294);function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r,n,s={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(s[r]=e[r]);return s}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(s[r]=e[r])}return s}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},l=n.forwardRef((function(e,t){var r=e.components,s=e.mdxType,o=e.originalType,c=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),l=p(r),h=s,f=l["".concat(c,".").concat(h)]||l[h]||m[h]||o;return r?n.createElement(f,i(i({ref:t},d),{},{components:r})):n.createElement(f,i({ref:t},d))}));function h(e,t){var r=arguments,s=t&&t.mdxType;if("string"==typeof e||s){var o=r.length,i=new Array(o);i[0]=l;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a.mdxType="string"==typeof e?e:s,i[1]=a;for(var p=2;p<o;p++)i[p]=r[p];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}l.displayName="MDXCreateElement"},23174:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>a,toc:()=>p});var n=r(87462),s=(r(67294),r(3905));const o={},i=void 0,a={unversionedId:"howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf",id:"howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf",title:"microservices-ecommerce-tf",description:"The e-commerce microservices application consists of a frontend, built using Next.js with TailwindCSS. The application backend uses Node.js. The data is stored in Redis and either MongoDB or PostgreSQL, using Prisma. Below are screenshots showcasing the frontend of the e-commerce app.",source:"@site/docs/howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf.mdx",sourceDirName:"howtos/solutions/triggers-and-functions/common-tf",slug:"/howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf",permalink:"/howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf",draft:!1,editUrl:"https://github.com/redis-developer/redis-developer/edit/master/docs/howtos/solutions/triggers-and-functions/common-tf/microservices-ecommerce-tf.mdx",tags:[],version:"current",lastUpdatedAt:1706108466,formattedLastUpdatedAt:"Jan 24, 2024",frontMatter:{}},c={},p=[],d={toc:p};
1function m(e){let{components:t,...o}=e;return(0,s.kt)("wrapper",(0,n.Z)({},d,o,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"The e-commerce microservices application consists of a frontend, built using ",(0,s.kt)("a",{parentName:"p",href:"https://nextjs.org/"},"Next.js")," with ",(0,s.kt)("a",{parentName:"p",href:"https://tailwindcss.com/"},"TailwindCSS"),". The application backend uses ",(0,s.kt)("a",{parentName:"p",href:"https://nodejs.org"},"Node.js"),". The data is stored in ",(0,s.kt)("a",{parentName:"p",href:"https://redis.com/try-free/"},"Redis")," and either MongoDB or PostgreSQL, using ",(0,s.kt)("a",{parentName:"p",href:"https://www.prisma.io/docs/reference/database-reference/supported-databases"},"Prisma"),". Below are screenshots showcasing the frontend of the e-commerce app."),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Dashboard:")," Displays a list of products with different search functionalities, configurable in the settings page.\n",(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Products Page",src:r(91031).Z,width:"1920",height:"895"})),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Settings:")," Accessible by clicking the gear icon at the top right of the dashboard. Control the search bar, chatbot visibility, and other features here.\n",(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Settings Page",src:r(62589).Z,width:"1782",height:"1206"})),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Dashboard (Semantic Text Search):"),' Configured for semantic text search, the search bar enables natural language queries. Example: "pure cotton blue shirts."\n',(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Semantic Text Search",src:r(69954).Z,width:"1920",height:"896"})),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Shopping Cart:"),' Add products to the cart and check out using the "Buy Now" button.\n',(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Shopping Cart",src:r(6308).Z,width:"1920",height:"906"})),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Order History:")," Post-purchase, the 'Orders' link in the top navigation bar shows the order status and history.\n",(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Order History Page",src:r(29563).Z,width:"1920",height:"673"})),(0,s.kt)("p",null,(0,s.kt)("strong",{parentName:"p"},"Admin Panel:")," Accessible via the 'admin' link in the top navigation. Displays purchase statistics and trending products.\n",(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Admin Page",src:r(72424).Z,width:"2604",height:"1230"}),"\n",(0,s.kt)("img",{alt:"Redis Microservices E-commerce App Frontend - Admin Page",src:r(77346).Z,width:"1920",height:"632"})))}m.isMDXComponent=!0},69954:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/01-dashboard-semantic-text-618dc077815f445370489a7565ff921c.png"},91031:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/01-dashboard-8b5c5e5140e2f858e7b6db9ae497fdff.png"},6308:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/02-cart-a68efee93e1dc1984c63409e215e409d.png"},29563:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/05-order-history-66ed99ccc2662d6da70de42fcb54f1ec.png"},72424:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/06-admin-charts-5ae00e6182be0b4ada06049f5d18d0aa.png"},77346:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/07-admin-top-trending-a15bf705d2226f6e2582b4fe35bd86ae.png"},62589:(e,t,r)=>{r.d(t,{Z:()=>n});const n=r.p+"assets/images/08-settings-a9b87114f97c78b157a8b163a2f610f2.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.