Objective
The goal of this project was to learn modern JavaScript technologies such as ES7, React and TypeScript and combine it with Pega Constellation
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.
Main page
Main page of React website for Sweet Life company
Products
Page with grid of products (sourced from Pega)
Incident form
Incident form allowing user to create
Releated Projects