Payment App

Description

This is a payment application built using React and TypeScript, with Vite frontend tooling for fast development, Redux for state management and Redux-persist to save data to the localStorage, Tailwind CSS for styling since is Mobile First Oriented and the freedom to use almost pure CSS such as Flex and Grid, Material UI for small UI components such as Buttons, Drawer and Modal, React-Icons for iconography due to the low bundle size, and Jest with Testing Library for unit testing.

Payment App is fully responsive and is focus on mobile first and images maintain the aspect ratio. UX Design was created under own consideration and criteria using a light theme with white, black and green as a palette colors. User can recover the progress made in case of refresh and works across Chrome, Safari and Mozilla.

Finally the app is hosted (Temporary) in AWS S3 and CloudFront. Live Demo. Cache is disabled to see changes instantly

Overview

The app allows users to make payments using a credit card. It validates whether the entered card details are valid or not using the luhn algorithm, and checking the issuer of the card as well. Users can add the product to their cart and proceed to pay. Upon payment completion, the app provides a summary of the transaction.

Example Credit Cards Numbers

Credit Card Type	Credit Card Number
American Express	371449635398431
MasterCard	5555555555554444
Visa	4111111111111111

Features

• React
• TypeScript
• Vite
• Redux
• Redux Persist
• Material UI
• Tailwind CSS
• React Icons
• Fetch-Mock
• Jest
• Testing Library

Installation

1. Clone the repository:

git clone https://github.com/CesarAFC/frontend-test.git

2. Navigate into the project directory:

cd test-frontend

3. Install dependencies:

pnpm install

Usage

• Development Mode: Run the development server:

pnpm run dev

This will start the development server. Open http://localhost:5173/ to view it in the browser.

• Production Build: Build the app for production:

pnpm run build

• Testing: Run tests using Jest:

pnpm run test

Tests runs

jest --watchAll=false --coverage --CI=true

PASS src/test/utils/expirationDateFormat.test.ts PASS src/test/CartReducer.test.ts PASS src/test/PrimaryButton.test.tsx PASS src/test/Input.test.tsx PASS src/test/ProductInCart.test.tsx PASS src/test/DeleteFromCartButton.test.tsx PASS src/test/utils/formatCurrency.test.ts PASS src/test/App.test.tsx PASS src/test/utils/luhnvalidation.test.ts PASS src/test/utils/CardFormatter.test.ts PASS src/test/utils/getCartTotal.test.ts PASS src/test/CreditCardInput.test.tsx PASS src/test/EmptyState.test.tsx PASS src/test/Navbar.test.tsx

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	72.9	68.96	61.7	75.55
UI	35.29	50	33.33	33.33
CartDrawer.tsx	85.71	50	66.66	83.33	20
FinalStatus.tsx	0	100	0	0	11-21
actions	57.14	100	14.28	100
index.ts	57.14	100	14.28	100
components	58.33	46.15	70.58	57.77
CartOverview.tsx	32.14	12.5	33.33	28	15-22,35-59,63-69
CreditCardInput.tsx	100	100	100	100
DeleteFromCartButton.tsx	100	100	100	100
EmptyState.tsx	100	100	100	100
Input.tsx	100	100	100	100
Label.tsx	100	100	100	100
Navbar.tsx	100	100	100	100
PrimaryButton.tsx	100	100	100	100
ProductInCart.tsx	75	100	50	75	22
hooks	100	100	100	100
useTypedSelector.tsx	100	100	100	100
reducers	80.95	64.7	57.14	85
CartReducer.ts	80	64.7	57.14	84.21	68,94,125
index.ts	100	100	100	100
store	100	100	100	100
index.ts	100	100	100	100
types	100	100	100	100
index.ts	100	100	100	100
utils	97.5	84.61	100	97.05
utils.tsx	97.5	84.61	100	97.05	33

Test Suites: 14 passed, 14 total Tests: 22 passed, 22 total Snapshots: 0 total Time: 2.695 s