CardPicker is a web-based platform designed to assist consumers in making economically efficient decisions by selecting the appropriate credit card for each transaction. This service enables users to maximize cashback rewards by analyzing and comparing current offers from various banks and financial institutions.
- Technologies: Node.js, Nest.js, Cheerio, Axios
- Job Queueing: Redis with Nest.js BullMQ for managing background scrapping tasks of new cashback offers. UPD: Check Note for judges
- Technologies: React with Vite.js
- UI Components: @shadcn/ui for customizable UI elements.
- Real-Time Cashback Comparisons: Provides up-to-date cashback rates from multiple banks to ensure optimal savings.
- Personalized Recommendations: Offers suggestions based on the user’s own cards and spending habits.
- User-Friendly Interface: Simplifies the user experience to facilitate quick and effective decision-making.
- Clone Repository:
git clone https://github.com/effuone/card-picker. - Install Dependencies: Run
yarn installin both API and Web directories. - Environment Configuration: Rename
.env.exampleto.envand update it with your development settings. - Prepare databases: Run
docker-compose -f docker-compose.dev.yml up -dto run Docker container with NGINX web server, PostgreSQL and Redis databases. - Migrate database: Execute
npx prisma db pushin API directory to create PostgreSQL tables using Prisma - Populate database: Execute
yarn seedin API directory to populate the database with existing banks from Kazakhstan and their popular card types. - Start application: Run
yarn run start:devin API directory andyarn devin web directory
Our data was gathered from private APIs (BCC, Halyk) and parsed using scrapping techniques from inaccessible or server-driven ones (Forte). Unfortunately, we hadn't time to connect BullMq workers for weekly synchronization strategy, but here is the sample approach:
import axios from 'axios';
import * as fs from 'fs/promises';
//clean strings from html tags
function extractPlainText(html: string): string {
if (!html) {
return '';
}
if (html.trim().length == 0) {
return html;
}
let text = html.replace(/<[^>]*>/g, '');
const htmlEntities: { [key: string]: string } = {
'–': '–',
'—': '—',
'"': '"',
''': "'",
'&': '&',
'<': '<',
'>': '>',
' ': '',
'«': '"',
'»': '"',
};
for (const key in htmlEntities) {
const entity = new RegExp(key, 'g');
text = text.replace(entity, htmlEntities[key]);
}
text = text.replace(/\r?\n|\r/g, ' ');
text = text.replace(/\s+/g, ' ').trim();
return text;
}
// get all partners of iron card type of bank center credit
const getIronCardPartners = async (pageId: number) => {
const res = await axios.get('https://partners.org.kz/api/getpartner', {
params: {
card: 'ironcard',
page: 1,
city_id: 21,
},
headers: {
Accept: 'application/json, text/plain, */*',
'Accept-Language': 'ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7',
'Sec-CH-UA':
'"Chromium";v="122", "Not(A:Brand";v="24", "Google Chrome";v="122"',
'Sec-CH-UA-Mobile': '?0',
'Sec-CH-UA-Platform': '"Linux"',
'Sec-Fetch-Dest': 'empty',
'Sec-Fetch-Mode': 'cors',
'Sec-Fetch-Site': 'cross-site',
Referer: 'https://club.bcc.kz/',
'Referrer-Policy': 'strict-origin-when-cross-origin',
},
});
const arr: any[] = res.data.data;
const partners = [];
for (const partner of arr) {
const detail = {
partnerName: partner.title,
discountPercent: Number(partner.discount),
cardPartner: partner.card_partner,
category: Number(partner.category),
description: extractPlainText(partner.description),
};
partners.push(detail);
}
return partners;
};
//save it and access it from backend
const savePartners = async (partners: any, fileName: string) => {
await fs.writeFile('ironCard.json', JSON.stringify(partners), {
encoding: 'utf-8',
});
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent