Sweet life
Kamil Janeczek
August 5, 2024 Pega Web dev React TypeScript
Objective
The goal of this project was to learn modern JavaScript technologies such as ES7, React and TypeScript and combine it with Pega Constellation
Tools & Technologies
React JavaScript Tailwind CSS TypeScript Constellation Constellation SDKs ShadCN Pega Constellation Constellation SDKs
Social share
Links
Challenge
Features of the React frontend:
- Responsive Design: Ensures the site works well on all devices.
- Dark Theme
- Mobile-First Approach: Prioritizes mobile usability from the start.
- Clean and Modern Look & Feel: Offers an aesthetically pleasing user experience.
- Home page with carousel component showing featured products. Product data comes from Pega
- Poducts page with list of products. Product data comes from Pega
- Support page with ability to create Incident case that is processed by Pega
- Contac page that allows user to create Inquire case that is later handled by backoffice workers in Pega
Tech stack:
- React - https://react.dev
- TypeScript - https://www.typescriptlang.org
- Tailwind CSS - https://tailwindcss.com
- Shadcn - https://ui.shadcn.com
- Pega Infinity 24.1 - https://docs.pega.com/bundle/platform/page/platform/release-notes/platform-release-notes.html
- Constellation SDKs - https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/constellation-sdks.html
Take a look on a demo to see how it works.
To know more about Pega Constellation visit Constellation Hands-on post Technical details and design choices are described in a series of posts called Constellation Flexible UI. To know more about moder JavaScript and web tech stack visit Learning modern JS post.
