
## Introduction

Easily bootstrap your landing page website or any web view that requires showing infographic displays with descriptive texts and scrolling animations.

I created a react library for other developers to quickly setup a custom scrolling animated story-like trail listing items/features for their websites.

## Major Technologies and design system used:

- ReactJS
- TailwindCSS
- Typescript

## Links

- [NPM package](https://npmjs.com/packages/scrolling-features-react)
- [GitHub](https://github.com/PeCrio/scrolling-features-react)


Easily bootstrap your landing page website or any web view that requires showing infographic displays with descriptive texts and scrolling animations.

Scrolling Features package


## Introduction

Checkout.com Fraud detection is a product that is focused on maximizing acceptance rate while mitigating/blocking fraud on payments processed for merchants. It provides custom rule builders, risk strategies, machine learning capabilities, as well as other tools for effectively accomplishing this goal.

I have been working with the Fraud detection team since 2022 in improving and adding more features to the product offering which in turn aid the successful delivery of the [Fraud detection Pro version](https://www.checkout.com/resources/featured-content/protect-revenue-and-build-frictionless-payments-flows-with-fraud-detection-pro).

## About checkout.com

Checkout.com, is an international financial technology company which processes payments for other companies. Founded as Opus Payments in 2009, it is headquartered in London, United Kingdom. It had a valuation of **$40 billion USD** in 2022, making it the most valuable European fintech startup.

### Helpful links

- [Fraud Detection product page](https://www.checkout.com/products/fraud-detection)
- [Company website](https://www.checkout.com)


Checkout.com Fraud detection is a product that is focused on maximizing acceptance rate while mitigating/blocking fraud on payments processed for merchants. It provides custom rule builders, risk strategies, machine learning capabilities, as well as other tools for effectively accomplishing this goal.

Checkout.com Fraud detection


## Introduction

DoraiUI is an accessible, unstyled, open-sourced and fully functional react component library for building design systems.

I created a starter app boilerplate that is setup with the following technologies:

## Major Technologies and design system used:

- NextJS
- TailwindCSS
- Typescript
- DoraiUI

## Links

- [DoraiUI Website](https://www.dorai-ui.com)
- [GitHub](https://github.com/watife/dorai-ui)


DoraiUI is an Accessible, unstyled, open-sourced and fully functional react component library for building design systems.

Dorai UI Starter Template


## Problem statement

- **As a merchant**: when acquiring multiple outlets or expanding to multiple other locations, managing multiple online stores across different platforms can become tidious and difficult to manage.
- **As a customer**: I may want to shop from my favorite merchant on a singular platform, track my orders and my details, get updates when a new location opens up and easily shop from there for myself or for a friend close-by.

## Solution

I have built a work-in-progress multi-store e-commerce proof of concept app that can allow a merchant manage their products/inventory, orders, accept payments, as well as other operational settings while the customer can create an account or login, manage their cart, account details and order history.

The minified version can be found on this [live link](https://chop-life-plug.vercel.app).

### Major Technologies and design system used:

- TailwindCSS
- NuxtJS
- Typescript


I built a multi store e-commerce app that can allow a user shop across multiple locations of a merchant as a proof of concept.

Multi store e-commerce app


## Introduction

This is an abstract simple one-page explainer website that talks about the business and process aimed at getting the highest possible potential customer conversions with minimum clicks or scrolls.

I designed it as an accessible slideshow presentation for the user to easily scroll, tab, or click through to quickly get the messaging and get onboard if interested.

## About PeCrio

PeCrio is a tech consultancy company that design and develop high quality websites and applications tailored to the client objectives to increase efficiency in job delivery and optimize processes.

### Links

- [PeCrio Website](https://www.dorai-ui.com)


PeCrio is a tech consultancy company that design and develop high quality websites and applications tailored to the client objectives to increase efficiency in job delivery and optimize processes.

PeCrio Consultancy Website


## Introduction

A customer feedback demo application for collecting reviews for a product after a successful purchase.

## Major Features

- View all comments/feedback/reviews from customers on a product.
- Customer can create feedback by entering their name, email, rating and comment
- Display product performance based on the reviews by showing a graphical preview in a chart format and the percentage of reviews above 2.

## Upcoming features

- Paginate records for reviews.
- Application logging with tools like [Sentry](https://sentry.io) and [Hotjar](https://hotjar.org)
- [Husky](https://husky.org) for running pre-commit tests before pushing code to SCM's like [GitHub](https://github.com)

## Preview

This applicaiton is currently deployed on [vercel](https://vercel.com), a demo preview can be seen on this [Preview Link](https://product-review-and-management-demo-app.vercel.app)

- [Website](http://product-review-and-management-demo-app.vercel.app/)
- [GitHub](https://github.com/PeCrio/product-review-and-management-demo-app)

## Tools and technologies

Below are the main tools and technologies used in this project:

- [NextJS](https://nextjs.org) - UI Framework
- [ReactJS](https://reactjs.org) - Frontend UI library
- [Cypress](https://cypress.io) - E2E, integration and unit tests
- [ChakraUI](https://chakra-ui.com) - Design system, theming and accessibility
- [ESLint](https://eslint.org) - Linting
- [TypeScript](https://typescriptlang.org) - Type checking
- [Formik](https://formik.org) - Form validation
- [Axios](https://axios-http.org) - HTTP requests
- [Chart.js](https://chartjs.org) - Data representation package (e.g. Charts, graph)
- [Mongoose](https://mongoosejs.com) - NoSQL Database
- [Google Analytics](https://analytics.google.com) - Metrics and usage
- [CircleCI](https://circleci.com) - Continous Integration
- [Docker](https://docker.com) - Containerisation

## Getting Started

1. **Setup environment variables**
   - Create a `.env` file at the root directory of the project
   - Copy the content of the `.env.example` file onto it
   - Update the values as required. e.g. `API_URL=http://localhost:3000/api`
2. **Development and Testing**

   **Notes**

   > Before proceeding with this section, kindly ensure that your terminal window is open on the root directory of the project, you can use the below helper commands to check/confirm:

   - `cd` command to change directory e.g. `cd path/to/project`
   - `pwd` command to check your "print working directory"
   - `ls` command to show the content of your current directory

   By default the `dev` script runs on port `3000`, if you have another application making use of that port on your machine, you can either terminate that process/application or use the `--port` flag where necessary to change the running port, kindly remember to update any relative script found on the project e.g. the `package.json` and `Dockerfile`.

   **Running locally**

   ```bash
   # Step 1: Install dependencies
   $ npm install

   # Step 2: Run Nextjs and cypress in interactive mode concurrently
   $ npm run develop
   ```

   **Extra notes**

   Other commands can be found on the `package.json` file in the root directory of the project.

   **Viewing test coverage**

   > Please note that you need to have run the cypress tests at least once before a report can be generated which would be located here: `coverage/lcov-report/index.html`, you can directly open it by navigating to the folder or via your terminal with the below command:

   ```bash
   $ open coverage/lcov-report/index.html
   ```

   **Using Docker**

   > Before proceeding with the below command, ensure [Docker](https://docs.docker.com/get-docker/) is installed and running on your machine.

   ```bash
   # Runs Nextjs within a docker container
   $ docker-compose up
   ```


A customer feedback demo application for collecting reviews for a product after a successful purchase.

Portfolio

Scrolling Features package

Checkout.com Fraud detection

Dorai UI Starter Template

Multi store e-commerce app

PeCrio Consultancy Website

Product Review POC Project