32 |
43 | `;
44 | break;
45 |
46 | case Notification.CHANGE_OF_STOCK:
47 | subject = `${shortenedTitle} is now back in stock!`;
48 | body = `
49 | Welcome to PriceTracker 🚀
33 |You are now tracking ${product.title}.
34 |Here's an example of how you'll receive updates:
35 |
36 | 
40 |
41 | ${product.title} is back in stock!
37 |We're excited to let you know that ${product.title} is now back in stock.
38 |Don't miss out - buy it now!
39 |
40 | Stay tuned for more updates on ${product.title} and other products you're tracking.
42 |
50 |
53 | `;
54 | break;
55 |
56 | case Notification.LOWEST_PRICE:
57 | subject = `Lowest Price Alert for ${shortenedTitle}`;
58 | body = `
59 | Hey, ${product.title} is now restocked! Grab yours before they run out again!
51 |See the product here.
52 |
60 |
63 | `;
64 | break;
65 |
66 | case Notification.THRESHOLD_MET:
67 | subject = `Discount Alert for ${shortenedTitle}`;
68 | body = `
69 | Hey, ${product.title} has reached its lowest price ever!!
61 |Grab the product here now.
62 |
70 |
73 | `;
74 | break;
75 |
76 | default:
77 | throw new Error("Invalid notification type.");
78 | }
79 |
80 | return { subject, body };
81 | }
82 |
83 | const transporter = nodemailer.createTransport({
84 | pool: true,
85 | service: "hotmail",
86 | port: 2525,
87 | auth: {
88 | user: "ancientsoftwaredeveloper@outlook.com",
89 | pass: process.env.EMAIL_PASSWORD,
90 | },
91 | maxConnections: 1,
92 | });
93 |
94 | export const sendEmail = async (
95 | emailContent: EmailContent,
96 | sendTo: string[]
97 | ) => {
98 | const mailOptions = {
99 | from: "ancientsoftwaredeveloper@outlook.com",
100 | to: sendTo,
101 | html: emailContent.body,
102 | subject: emailContent.subject,
103 | };
104 |
105 | transporter.sendMail(mailOptions, (error: any, info: any) => {
106 | if (error) return console.log(error);
107 |
108 | console.log("Email sent: ", info);
109 | });
110 | };
111 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | * {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | scroll-behavior: smooth;
10 | }
11 |
12 | @layer base {
13 | body {
14 | @apply font-inter;
15 | }
16 | }
17 |
18 | @layer utilities {
19 | .btn {
20 | @apply py-4 px-4 bg-secondary hover:bg-opacity-70 rounded-[30px] text-white text-lg font-semibold;
21 | }
22 |
23 | .head-text {
24 | @apply mt-4 text-6xl leading-[72px] font-bold tracking-[-1.2px] text-gray-900;
25 | }
26 |
27 | .section-text {
28 | @apply text-secondary text-[32px] font-semibold;
29 | }
30 |
31 | .small-text {
32 | @apply flex gap-2 text-sm font-medium text-primary;
33 | }
34 |
35 | .paragraph-text {
36 | @apply text-xl leading-[30px] text-gray-600;
37 | }
38 |
39 | .hero-carousel {
40 | @apply relative sm:px-10 py-5 sm:pt-20 pb-5 max-w-[560px] h-[700px] w-full bg-[#F2F4F7] rounded-[30px] sm:mx-auto;
41 | }
42 |
43 | .carousel {
44 | @apply flex flex-col-reverse h-[700px];
45 | }
46 |
47 | .carousel .control-dots {
48 | @apply static !important;
49 | }
50 |
51 | .carousel .control-dots .dot {
52 | @apply w-[10px] h-[10px] bg-[#D9D9D9] rounded-full bottom-0 !important;
53 | }
54 |
55 | .carousel .control-dots .dot.selected {
56 | @apply bg-[#475467] !important;
57 | }
58 |
59 | .trending-section {
60 | @apply flex flex-col gap-10 px-6 md:px-20 py-24;
61 | }
62 |
63 | /* PRODUCT DETAILS PAGE STYLES */
64 | .product-container {
65 | @apply flex flex-col gap-16 flex-wrap px-6 md:px-20 py-24;
66 | }
67 |
68 | .product-image {
69 | @apply flex-grow xl:max-w-[50%] max-w-full py-16 border border-[#CDDBFF] rounded-[17px];
70 | }
71 |
72 | .product-info {
73 | @apply flex items-center flex-wrap gap-10 py-6 border-y border-y-[#E4E4E4];
74 | }
75 |
76 | .product-hearts {
77 | @apply flex items-center gap-2 px-3 py-2 bg-[#FFF0F0] rounded-10;
78 | }
79 |
80 | .product-stars {
81 | @apply flex items-center gap-2 px-3 py-2 bg-[#FBF3EA] rounded-[27px];
82 | }
83 |
84 | .product-reviews {
85 | @apply flex items-center gap-2 px-3 py-2 bg-white-200 rounded-[27px];
86 | }
87 |
88 | /* MODAL */
89 | .dialog-container {
90 | @apply fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-60;
91 | }
92 |
93 | .dialog-content {
94 | @apply p-6 bg-white inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform shadow-xl rounded-2xl;
95 | }
96 |
97 | .dialog-head_text {
98 | @apply text-secondary text-lg leading-[24px] font-semibold mt-4;
99 | }
100 |
101 | .dialog-input_container {
102 | @apply px-5 py-3 mt-3 flex items-center gap-2 border border-gray-300 rounded-[27px];
103 | }
104 |
105 | .dialog-input {
106 | @apply flex-1 pl-1 border-none text-gray-500 text-base focus:outline-none border border-gray-300 rounded-[27px] shadow-xs;
107 | }
108 |
109 | .dialog-btn {
110 | @apply px-5 py-3 text-white text-base font-semibold border border-secondary bg-secondary rounded-lg mt-8;
111 | }
112 |
113 | /* NAVBAR */
114 | .nav {
115 | @apply flex justify-between items-center px-6 md:px-20 py-4;
116 | }
117 |
118 | .nav-logo {
119 | @apply font-spaceGrotesk text-[21px] text-secondary font-bold;
120 | }
121 |
122 | /* PRICE INFO */
123 | .price-info_card {
124 | @apply flex-1 min-w-[200px] flex flex-col gap-2 border-l-[3px] rounded-10 bg-white-100 px-5 py-4;
125 | }
126 |
127 | /* PRODUCT CARD */
128 | .product-card {
129 | @apply sm:w-[292px] sm:max-w-[292px] w-full flex-1 flex flex-col gap-4 rounded-md;
130 | }
131 |
132 | .product-card_img-container {
133 | @apply flex-1 relative flex flex-col gap-5 p-4 rounded-md;
134 | }
135 |
136 | .product-card_img {
137 | @apply max-h-[250px] object-contain w-full h-full bg-transparent;
138 | }
139 |
140 | .product-title {
141 | @apply text-secondary text-xl leading-6 font-semibold truncate;
142 | }
143 |
144 | /* SEARCHBAR INPUT */
145 | .searchbar-input {
146 | @apply flex-1 min-w-[200px] w-full p-3 border border-gray-300 rounded-lg shadow-xs text-base text-gray-500 focus:outline-none;
147 | }
148 |
149 | .searchbar-btn {
150 | @apply bg-gray-900 border border-gray-900 rounded-lg shadow-xs px-5 py-3 text-white text-base font-semibold hover:opacity-90 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40;
151 | }
152 | }
--------------------------------------------------------------------------------
/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { FormEvent, Fragment, useState } from "react";
4 | import { Dialog, Transition } from "@headlessui/react";
5 | import Image from "next/image";
6 | import { addUserEmailToProduct } from '@/lib/actions'
7 |
8 | interface Props {
9 | productId: string;
10 | }
11 |
12 | const Modal = ({ productId }: Props) => {
13 | let [isOpen, setIsOpen] = useState(true);
14 | const [isSubmitting, setIsSubmitting] = useState(false);
15 | const [email, setEmail] = useState('');
16 |
17 | const handleSubmit = async (e: FormEventHey, ${product.title} is now available at a discount more than ${THRESHOLD_PERCENTAGE}%!
71 |Grab it right away from here.
72 |
24 |
203 | );
204 | };
205 |
206 | export default ProductDetails
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
25 |
165 |
166 |
26 |
34 |
35 |
36 |
164 |
37 |
84 |
85 |
38 |
50 |
51 | 39 | {product.title} 40 |
41 | 42 | 47 | Visit Product 48 | 49 |
52 |
83 |
53 |
64 |
65 | 61 | {product.reviewsCount} 62 |
63 |
66 |
73 |
74 |
75 |
82 |
86 |
128 |
129 |
87 |
94 |
95 | 88 | {product.currency} {formatNumber(product.currentPrice)} 89 |
90 |91 | {product.currency} {formatNumber(product.originalPrice)} 92 |
93 |
96 |
127 |
97 |
121 |
122 |
98 |
108 |
109 | 105 | {product.stars || "25"} 106 |
107 |
110 |
120 | 117 | {product.reviewsCount} Reviews 118 |
119 |123 | 93% {" "} 124 | of buyers have recommeded this. 125 |
126 |
130 |
161 |
162 |
131 |
160 |
167 |
190 |
191 | {similarProducts && similarProducts?.length > 0 && (
192 |
168 |
176 |
177 |
189 | 169 | Product Description 170 |
171 | 172 |
173 | {product?.description?.split("\n")}
174 |
175 |
193 |
201 | )}
202 | Similar Products
194 | 195 |
196 | {similarProducts.map((product) => (
197 |
200 |
2 |
3 | 4 |
5 |
6 |
7 | 8 |
21 |
22 | ## 📋 Table of Contents
23 |
24 | 1. 🤖 [Introduction](#introduction)
25 | 2. ⚙️ [Tech Stack](#tech-stack)
26 | 3. 🔋 [Features](#features)
27 | 4. 🤸 [Quick Start](#quick-start)
28 | 5. 🕸️ [Snippets](#snippets)
29 | 6. 🔗 [Links](#links)
30 |
31 | ## 🚨 Tutorial
32 |
33 | This repository contains the code that corresponds to building an app from scratch.
34 | .
35 |
36 | If you prefer to learn from the doc, this is the perfect resource for you. Follow along to learn how to create projects like these step by step in a beginner-friendly way!
37 |
38 | ## 🤖 Introduction
39 |
40 | Developed using Next.js and Bright Data's webunlocker, this e-commerce product scraping site is designed to assist users in making informed decisions. It notifies users when a product drops in price and helps competitors by alerting them when the product is out of stock, all managed through cron jobs.
41 |
42 | If you are just starting out and need help, or if you encounter any bugs, you can ask. This is a place where people help each other.
43 |
44 | ## ⚙️ Tech Stack
45 |
46 | - Next.js
47 | - Bright Data
48 | - Cheerio
49 | - Nodemailer
50 | - MongoDB
51 | - Headless UI
52 | - Tailwind CSS
53 |
54 | ## 🔋 Features
55 |
56 | 👉 **Header with Carousel**: Visually appealing header with a carousel showcasing key features and benefits
57 |
58 | 👉 **Product Scraping**: A search bar allowing users to input Amazon product links for scraping.
59 |
60 | 👉 **Scraped Projects**: Displays the details of products scraped so far, offering insights into tracked items.
61 |
62 | 👉 **Scraped Product Details**: Showcase the product image, title, pricing, details, and other relevant information scraped from the original website
63 |
64 | 👉 **Track Option**: Modal for users to provide email addresses and opt-in for tracking.
65 |
66 | 👉 **Email Notifications**: Send emails product alert emails for various scenarios, e.g., back in stock alerts or lowest price notifications.
67 |
68 | 👉 **Automated Cron Jobs**: Utilize cron jobs to automate periodic scraping, ensuring data is up-to-date.
69 |
70 | and many more, including code architecture and reusability
71 |
72 | ## 🤸 Quick Start
73 |
74 | Follow these steps to set up the project locally on your machine.
75 |
76 | **Prerequisites**
77 |
78 | Make sure you have the following installed on your machine:
79 |
80 | - [Git](https://git-scm.com/)
81 | - [Node.js](https://nodejs.org/en)
82 | - [npm](https://www.npmjs.com/) (Node Package Manager)
83 |
84 | **Cloning the Repository**
85 |
86 | ```bash
87 | git clone https://github.com/emredkyc/price_tracker.git
88 | cd price_tracker
89 | ```
90 |
91 | **Installation**
92 |
93 | Install the project dependencies using npm:
94 |
95 | ```bash
96 | npm install
97 | ```
98 |
99 | **Set Up Environment Variables**
100 |
101 | Create a new file named `.env` in the root of your project and add the following content:
102 |
103 | ```env
104 | #SCRAPER
105 | BRIGHT_DATA_USERNAME=
106 | BRIGHT_DATA_PASSWORD=
107 |
108 | #DB
109 | MONGODB_URI=
110 |
111 | #OUTLOOK
112 | EMAIL_USER=
113 | EMAIL_PASS=
114 | ```
115 |
116 | Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on these specific websites from [BrightData](https://brightdata.com/), [MongoDB](https://www.mongodb.com/), and [Node Mailer](https://nodemailer.com/)
117 |
118 | **Running the Project**
119 |
120 | ```bash
121 | npm run dev
122 | ```
123 |
124 | Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
125 |
126 | ## 🕸️ Snippets
127 |
128 | 3 | 4 |
5 |
6 | 7 | 8 |
9 | 
10 | 
11 | 
12 | 
13 |
14 |
15 |
10 |
11 |
12 |
13 | A Ecom Price Tracking Application
16 | 17 |
18 | Build this project step by step with our detailed.
19 |
20 |
129 |
130 |
131 | ```typescript
132 | import { NextResponse } from "next/server";
133 |
134 | import { getLowestPrice, getHighestPrice, getAveragePrice, getEmailNotifType } from "@/lib/utils";
135 | import { connectToDB } from "@/lib/mongoose";
136 | import Product from "@/lib/models/product.model";
137 | import { scrapeAmazonProduct } from "@/lib/scraper";
138 | import { generateEmailBody, sendEmail } from "@/lib/nodemailer";
139 |
140 | export const maxDuration = 300; // This function can run for a maximum of 300 seconds
141 | export const dynamic = "force-dynamic";
142 | export const revalidate = 0;
143 |
144 | export async function GET(request: Request) {
145 | try {
146 | connectToDB();
147 |
148 | const products = await Product.find({});
149 |
150 | if (!products) throw new Error("No product fetched");
151 |
152 | // ======================== 1 SCRAPE LATEST PRODUCT DETAILS & UPDATE DB
153 | const updatedProducts = await Promise.all(
154 | products.map(async (currentProduct) => {
155 | // Scrape product
156 | const scrapedProduct = await scrapeAmazonProduct(currentProduct.url);
157 |
158 | if (!scrapedProduct) return;
159 |
160 | const updatedPriceHistory = [
161 | ...currentProduct.priceHistory,
162 | {
163 | price: scrapedProduct.currentPrice,
164 | },
165 | ];
166 |
167 | const product = {
168 | ...scrapedProduct,
169 | priceHistory: updatedPriceHistory,
170 | lowestPrice: getLowestPrice(updatedPriceHistory),
171 | highestPrice: getHighestPrice(updatedPriceHistory),
172 | averagePrice: getAveragePrice(updatedPriceHistory),
173 | };
174 |
175 | // Update Products in DB
176 | const updatedProduct = await Product.findOneAndUpdate(
177 | {
178 | url: product.url,
179 | },
180 | product
181 | );
182 |
183 | // ======================== 2 CHECK EACH PRODUCT'S STATUS & SEND EMAIL ACCORDINGLY
184 | const emailNotifType = getEmailNotifType(
185 | scrapedProduct,
186 | currentProduct
187 | );
188 |
189 | if (emailNotifType && updatedProduct.users.length > 0) {
190 | const productInfo = {
191 | title: updatedProduct.title,
192 | url: updatedProduct.url,
193 | };
194 | // Construct emailContent
195 | const emailContent = await generateEmailBody(productInfo, emailNotifType);
196 | // Get array of user emails
197 | const userEmails = updatedProduct.users.map((user: any) => user.email);
198 | // Send email notification
199 | await sendEmail(emailContent, userEmails);
200 | }
201 |
202 | return updatedProduct;
203 | })
204 | );
205 |
206 | return NextResponse.json({
207 | message: "Ok",
208 | data: updatedProducts,
209 | });
210 | } catch (error: any) {
211 | throw new Error(`Failed to get all products: ${error.message}`);
212 | }
213 | }
214 | ```
215 |
216 |
217 |
218 | cron.route.ts
130 |
131 | ```typescript
132 | import { NextResponse } from "next/server";
133 |
134 | import { getLowestPrice, getHighestPrice, getAveragePrice, getEmailNotifType } from "@/lib/utils";
135 | import { connectToDB } from "@/lib/mongoose";
136 | import Product from "@/lib/models/product.model";
137 | import { scrapeAmazonProduct } from "@/lib/scraper";
138 | import { generateEmailBody, sendEmail } from "@/lib/nodemailer";
139 |
140 | export const maxDuration = 300; // This function can run for a maximum of 300 seconds
141 | export const dynamic = "force-dynamic";
142 | export const revalidate = 0;
143 |
144 | export async function GET(request: Request) {
145 | try {
146 | connectToDB();
147 |
148 | const products = await Product.find({});
149 |
150 | if (!products) throw new Error("No product fetched");
151 |
152 | // ======================== 1 SCRAPE LATEST PRODUCT DETAILS & UPDATE DB
153 | const updatedProducts = await Promise.all(
154 | products.map(async (currentProduct) => {
155 | // Scrape product
156 | const scrapedProduct = await scrapeAmazonProduct(currentProduct.url);
157 |
158 | if (!scrapedProduct) return;
159 |
160 | const updatedPriceHistory = [
161 | ...currentProduct.priceHistory,
162 | {
163 | price: scrapedProduct.currentPrice,
164 | },
165 | ];
166 |
167 | const product = {
168 | ...scrapedProduct,
169 | priceHistory: updatedPriceHistory,
170 | lowestPrice: getLowestPrice(updatedPriceHistory),
171 | highestPrice: getHighestPrice(updatedPriceHistory),
172 | averagePrice: getAveragePrice(updatedPriceHistory),
173 | };
174 |
175 | // Update Products in DB
176 | const updatedProduct = await Product.findOneAndUpdate(
177 | {
178 | url: product.url,
179 | },
180 | product
181 | );
182 |
183 | // ======================== 2 CHECK EACH PRODUCT'S STATUS & SEND EMAIL ACCORDINGLY
184 | const emailNotifType = getEmailNotifType(
185 | scrapedProduct,
186 | currentProduct
187 | );
188 |
189 | if (emailNotifType && updatedProduct.users.length > 0) {
190 | const productInfo = {
191 | title: updatedProduct.title,
192 | url: updatedProduct.url,
193 | };
194 | // Construct emailContent
195 | const emailContent = await generateEmailBody(productInfo, emailNotifType);
196 | // Get array of user emails
197 | const userEmails = updatedProduct.users.map((user: any) => user.email);
198 | // Send email notification
199 | await sendEmail(emailContent, userEmails);
200 | }
201 |
202 | return updatedProduct;
203 | })
204 | );
205 |
206 | return NextResponse.json({
207 | message: "Ok",
208 | data: updatedProducts,
209 | });
210 | } catch (error: any) {
211 | throw new Error(`Failed to get all products: ${error.message}`);
212 | }
213 | }
214 | ```
215 |
216 |
219 |
220 |
221 | ```typescript
222 | export async function generateEmailBody(
223 | product: EmailProductInfo,
224 | type: NotificationType
225 | ) {
226 | const THRESHOLD_PERCENTAGE = 40;
227 | // Shorten the product title
228 | const shortenedTitle =
229 | product.title.length > 20
230 | ? `${product.title.substring(0, 20)}...`
231 | : product.title;
232 |
233 | let subject = "";
234 | let body = "";
235 |
236 | switch (type) {
237 | case Notification.WELCOME:
238 | subject = `Welcome to Price Tracking for ${shortenedTitle}`;
239 | body = `
240 |
294 |
295 | generateEmailBody.ts
220 |
221 | ```typescript
222 | export async function generateEmailBody(
223 | product: EmailProductInfo,
224 | type: NotificationType
225 | ) {
226 | const THRESHOLD_PERCENTAGE = 40;
227 | // Shorten the product title
228 | const shortenedTitle =
229 | product.title.length > 20
230 | ? `${product.title.substring(0, 20)}...`
231 | : product.title;
232 |
233 | let subject = "";
234 | let body = "";
235 |
236 | switch (type) {
237 | case Notification.WELCOME:
238 | subject = `Welcome to Price Tracking for ${shortenedTitle}`;
239 | body = `
240 |
241 |
252 | `;
253 | break;
254 |
255 | case Notification.CHANGE_OF_STOCK:
256 | subject = `${shortenedTitle} is now back in stock!`;
257 | body = `
258 | Welcome to PriceTracker 🚀
242 |You are now tracking ${product.title}.
243 |Here's an example of how you'll receive updates:
244 |
245 | 
249 |
250 | ${product.title} is back in stock!
246 |We're excited to let you know that ${product.title} is now back in stock.
247 |Don't miss out - buy it now!
248 |
249 | Stay tuned for more updates on ${product.title} and other products you're tracking.
251 |
259 |
262 | `;
263 | break;
264 |
265 | case Notification.LOWEST_PRICE:
266 | subject = `Lowest Price Alert for ${shortenedTitle}`;
267 | body = `
268 | Hey, ${product.title} is now restocked! Grab yours before they run out again!
260 |See the product here.
261 |
269 |
272 | `;
273 | break;
274 |
275 | case Notification.THRESHOLD_MET:
276 | subject = `Discount Alert for ${shortenedTitle}`;
277 | body = `
278 | Hey, ${product.title} has reached its lowest price ever!!
270 |Grab the product here now.
271 |
279 |
282 | `;
283 | break;
284 |
285 | default:
286 | throw new Error("Invalid notification type.");
287 | }
288 |
289 | return { subject, body };
290 | }
291 | ```
292 |
293 | Hey, ${product.title} is now available at a discount more than ${THRESHOLD_PERCENTAGE}%!
280 |Grab it right away from here.
281 |
296 |
297 |
298 | ```css
299 | @tailwind base;
300 | @tailwind components;
301 | @tailwind utilities;
302 |
303 | * {
304 | margin: 0;
305 | padding: 0;
306 | box-sizing: border-box;
307 | scroll-behavior: smooth;
308 | }
309 |
310 | @layer base {
311 | body {
312 | @apply font-inter;
313 | }
314 | }
315 |
316 | @layer utilities {
317 | .btn {
318 | @apply py-4 px-4 bg-secondary hover:bg-opacity-70 rounded-[30px] text-white text-lg font-semibold;
319 | }
320 |
321 | .head-text {
322 | @apply mt-4 text-6xl leading-[72px] font-bold tracking-[-1.2px] text-gray-900;
323 | }
324 |
325 | .section-text {
326 | @apply text-secondary text-[32px] font-semibold;
327 | }
328 |
329 | .small-text {
330 | @apply flex gap-2 text-sm font-medium text-primary;
331 | }
332 |
333 | .paragraph-text {
334 | @apply text-xl leading-[30px] text-gray-600;
335 | }
336 |
337 | .hero-carousel {
338 | @apply relative sm:px-10 py-5 sm:pt-20 pb-5 max-w-[560px] h-[700px] w-full bg-[#F2F4F7] rounded-[30px] sm:mx-auto;
339 | }
340 |
341 | .carousel {
342 | @apply flex flex-col-reverse h-[700px];
343 | }
344 |
345 | .carousel .control-dots {
346 | @apply static !important;
347 | }
348 |
349 | .carousel .control-dots .dot {
350 | @apply w-[10px] h-[10px] bg-[#D9D9D9] rounded-full bottom-0 !important;
351 | }
352 |
353 | .carousel .control-dots .dot.selected {
354 | @apply bg-[#475467] !important;
355 | }
356 |
357 | .trending-section {
358 | @apply flex flex-col gap-10 px-6 md:px-20 py-24;
359 | }
360 |
361 | /* PRODUCT DETAILS PAGE STYLES */
362 | .product-container {
363 | @apply flex flex-col gap-16 flex-wrap px-6 md:px-20 py-24;
364 | }
365 |
366 | .product-image {
367 | @apply flex-grow xl:max-w-[50%] max-w-full py-16 border border-[#CDDBFF] rounded-[17px];
368 | }
369 |
370 | .product-info {
371 | @apply flex items-center flex-wrap gap-10 py-6 border-y border-y-[#E4E4E4];
372 | }
373 |
374 | .product-hearts {
375 | @apply flex items-center gap-2 px-3 py-2 bg-[#FFF0F0] rounded-10;
376 | }
377 |
378 | .product-stars {
379 | @apply flex items-center gap-2 px-3 py-2 bg-[#FBF3EA] rounded-[27px];
380 | }
381 |
382 | .product-reviews {
383 | @apply flex items-center gap-2 px-3 py-2 bg-white-200 rounded-[27px];
384 | }
385 |
386 | /* MODAL */
387 | .dialog-container {
388 | @apply fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-60;
389 | }
390 |
391 | .dialog-content {
392 | @apply p-6 bg-white inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform shadow-xl rounded-2xl;
393 | }
394 |
395 | .dialog-head_text {
396 | @apply text-secondary text-lg leading-[24px] font-semibold mt-4;
397 | }
398 |
399 | .dialog-input_container {
400 | @apply px-5 py-3 mt-3 flex items-center gap-2 border border-gray-300 rounded-[27px];
401 | }
402 |
403 | .dialog-input {
404 | @apply flex-1 pl-1 border-none text-gray-500 text-base focus:outline-none border border-gray-300 rounded-[27px] shadow-xs;
405 | }
406 |
407 | .dialog-btn {
408 | @apply px-5 py-3 text-white text-base font-semibold border border-secondary bg-secondary rounded-lg mt-8;
409 | }
410 |
411 | /* NAVBAR */
412 | .nav {
413 | @apply flex justify-between items-center px-6 md:px-20 py-4;
414 | }
415 |
416 | .nav-logo {
417 | @apply font-spaceGrotesk text-[21px] text-secondary font-bold;
418 | }
419 |
420 | /* PRICE INFO */
421 | .price-info_card {
422 | @apply flex-1 min-w-[200px] flex flex-col gap-2 border-l-[3px] rounded-10 bg-white-100 px-5 py-4;
423 | }
424 |
425 | /* PRODUCT CARD */
426 | .product-card {
427 | @apply sm:w-[292px] sm:max-w-[292px] w-full flex-1 flex flex-col gap-4 rounded-md;
428 | }
429 |
430 | .product-card_img-container {
431 | @apply flex-1 relative flex flex-col gap-5 p-4 rounded-md;
432 | }
433 |
434 | .product-card_img {
435 | @apply max-h-[250px] object-contain w-full h-full bg-transparent;
436 | }
437 |
438 | .product-title {
439 | @apply text-secondary text-xl leading-6 font-semibold truncate;
440 | }
441 |
442 | /* SEARCHBAR INPUT */
443 | .searchbar-input {
444 | @apply flex-1 min-w-[200px] w-full p-3 border border-gray-300 rounded-lg shadow-xs text-base text-gray-500 focus:outline-none;
445 | }
446 |
447 | .searchbar-btn {
448 | @apply bg-gray-900 border border-gray-900 rounded-lg shadow-xs px-5 py-3 text-white text-base font-semibold hover:opacity-90 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40;
449 | }
450 | }
451 | ```
452 |
453 |
454 |
455 | globals.css
297 |
298 | ```css
299 | @tailwind base;
300 | @tailwind components;
301 | @tailwind utilities;
302 |
303 | * {
304 | margin: 0;
305 | padding: 0;
306 | box-sizing: border-box;
307 | scroll-behavior: smooth;
308 | }
309 |
310 | @layer base {
311 | body {
312 | @apply font-inter;
313 | }
314 | }
315 |
316 | @layer utilities {
317 | .btn {
318 | @apply py-4 px-4 bg-secondary hover:bg-opacity-70 rounded-[30px] text-white text-lg font-semibold;
319 | }
320 |
321 | .head-text {
322 | @apply mt-4 text-6xl leading-[72px] font-bold tracking-[-1.2px] text-gray-900;
323 | }
324 |
325 | .section-text {
326 | @apply text-secondary text-[32px] font-semibold;
327 | }
328 |
329 | .small-text {
330 | @apply flex gap-2 text-sm font-medium text-primary;
331 | }
332 |
333 | .paragraph-text {
334 | @apply text-xl leading-[30px] text-gray-600;
335 | }
336 |
337 | .hero-carousel {
338 | @apply relative sm:px-10 py-5 sm:pt-20 pb-5 max-w-[560px] h-[700px] w-full bg-[#F2F4F7] rounded-[30px] sm:mx-auto;
339 | }
340 |
341 | .carousel {
342 | @apply flex flex-col-reverse h-[700px];
343 | }
344 |
345 | .carousel .control-dots {
346 | @apply static !important;
347 | }
348 |
349 | .carousel .control-dots .dot {
350 | @apply w-[10px] h-[10px] bg-[#D9D9D9] rounded-full bottom-0 !important;
351 | }
352 |
353 | .carousel .control-dots .dot.selected {
354 | @apply bg-[#475467] !important;
355 | }
356 |
357 | .trending-section {
358 | @apply flex flex-col gap-10 px-6 md:px-20 py-24;
359 | }
360 |
361 | /* PRODUCT DETAILS PAGE STYLES */
362 | .product-container {
363 | @apply flex flex-col gap-16 flex-wrap px-6 md:px-20 py-24;
364 | }
365 |
366 | .product-image {
367 | @apply flex-grow xl:max-w-[50%] max-w-full py-16 border border-[#CDDBFF] rounded-[17px];
368 | }
369 |
370 | .product-info {
371 | @apply flex items-center flex-wrap gap-10 py-6 border-y border-y-[#E4E4E4];
372 | }
373 |
374 | .product-hearts {
375 | @apply flex items-center gap-2 px-3 py-2 bg-[#FFF0F0] rounded-10;
376 | }
377 |
378 | .product-stars {
379 | @apply flex items-center gap-2 px-3 py-2 bg-[#FBF3EA] rounded-[27px];
380 | }
381 |
382 | .product-reviews {
383 | @apply flex items-center gap-2 px-3 py-2 bg-white-200 rounded-[27px];
384 | }
385 |
386 | /* MODAL */
387 | .dialog-container {
388 | @apply fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-60;
389 | }
390 |
391 | .dialog-content {
392 | @apply p-6 bg-white inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform shadow-xl rounded-2xl;
393 | }
394 |
395 | .dialog-head_text {
396 | @apply text-secondary text-lg leading-[24px] font-semibold mt-4;
397 | }
398 |
399 | .dialog-input_container {
400 | @apply px-5 py-3 mt-3 flex items-center gap-2 border border-gray-300 rounded-[27px];
401 | }
402 |
403 | .dialog-input {
404 | @apply flex-1 pl-1 border-none text-gray-500 text-base focus:outline-none border border-gray-300 rounded-[27px] shadow-xs;
405 | }
406 |
407 | .dialog-btn {
408 | @apply px-5 py-3 text-white text-base font-semibold border border-secondary bg-secondary rounded-lg mt-8;
409 | }
410 |
411 | /* NAVBAR */
412 | .nav {
413 | @apply flex justify-between items-center px-6 md:px-20 py-4;
414 | }
415 |
416 | .nav-logo {
417 | @apply font-spaceGrotesk text-[21px] text-secondary font-bold;
418 | }
419 |
420 | /* PRICE INFO */
421 | .price-info_card {
422 | @apply flex-1 min-w-[200px] flex flex-col gap-2 border-l-[3px] rounded-10 bg-white-100 px-5 py-4;
423 | }
424 |
425 | /* PRODUCT CARD */
426 | .product-card {
427 | @apply sm:w-[292px] sm:max-w-[292px] w-full flex-1 flex flex-col gap-4 rounded-md;
428 | }
429 |
430 | .product-card_img-container {
431 | @apply flex-1 relative flex flex-col gap-5 p-4 rounded-md;
432 | }
433 |
434 | .product-card_img {
435 | @apply max-h-[250px] object-contain w-full h-full bg-transparent;
436 | }
437 |
438 | .product-title {
439 | @apply text-secondary text-xl leading-6 font-semibold truncate;
440 | }
441 |
442 | /* SEARCHBAR INPUT */
443 | .searchbar-input {
444 | @apply flex-1 min-w-[200px] w-full p-3 border border-gray-300 rounded-lg shadow-xs text-base text-gray-500 focus:outline-none;
445 | }
446 |
447 | .searchbar-btn {
448 | @apply bg-gray-900 border border-gray-900 rounded-lg shadow-xs px-5 py-3 text-white text-base font-semibold hover:opacity-90 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40;
449 | }
450 | }
451 | ```
452 |
453 |
456 |
457 |
458 | ```typescript
459 | "use server"
460 |
461 | import axios from 'axios';
462 | import * as cheerio from 'cheerio';
463 | import { extractCurrency, extractDescription, extractPrice } from '../utils';
464 |
465 | export async function scrapeAmazonProduct(url: string) {
466 | if(!url) return;
467 |
468 | // BrightData proxy configuration
469 | const username = String(process.env.BRIGHT_DATA_USERNAME);
470 | const password = String(process.env.BRIGHT_DATA_PASSWORD);
471 | const port = 22225;
472 | const session_id = (1000000 * Math.random()) | 0;
473 |
474 | const options = {
475 | auth: {
476 | username: `${username}-session-${session_id}`,
477 | password,
478 | },
479 | host: 'brd.superproxy.io',
480 | port,
481 | rejectUnauthorized: false,
482 | }
483 |
484 | try {
485 | // Fetch the product page
486 | const response = await axios.get(url, options);
487 | const $ = cheerio.load(response.data);
488 |
489 | // Extract the product title
490 | const title = $('#productTitle').text().trim();
491 | const currentPrice = extractPrice(
492 | $('.priceToPay span.a-price-whole'),
493 | $('.a.size.base.a-color-price'),
494 | $('.a-button-selected .a-color-base'),
495 | );
496 |
497 | const originalPrice = extractPrice(
498 | $('#priceblock_ourprice'),
499 | $('.a-price.a-text-price span.a-offscreen'),
500 | $('#listPrice'),
501 | $('#priceblock_dealprice'),
502 | $('.a-size-base.a-color-price')
503 | );
504 |
505 | const outOfStock = $('#availability span').text().trim().toLowerCase() === 'currently unavailable';
506 |
507 | const images =
508 | $('#imgBlkFront').attr('data-a-dynamic-image') ||
509 | $('#landingImage').attr('data-a-dynamic-image') ||
510 | '{}'
511 |
512 | const imageUrls = Object.keys(JSON.parse(images));
513 |
514 | const currency = extractCurrency($('.a-price-symbol'))
515 | const discountRate = $('.savingsPercentage').text().replace(/[-%]/g, "");
516 |
517 | const description = extractDescription($)
518 |
519 | // Construct data object with scraped information
520 | const data = {
521 | url,
522 | currency: currency || '$',
523 | image: imageUrls[0],
524 | title,
525 | currentPrice: Number(currentPrice) || Number(originalPrice),
526 | originalPrice: Number(originalPrice) || Number(currentPrice),
527 | priceHistory: [],
528 | discountRate: Number(discountRate),
529 | category: 'category',
530 | reviewsCount:100,
531 | stars: 4.5,
532 | isOutOfStock: outOfStock,
533 | description,
534 | lowestPrice: Number(currentPrice) || Number(originalPrice),
535 | highestPrice: Number(originalPrice) || Number(currentPrice),
536 | averagePrice: Number(currentPrice) || Number(originalPrice),
537 | }
538 |
539 | return data;
540 | } catch (error: any) {
541 | console.log(error);
542 | }
543 | }
544 | ```
545 |
546 |
547 |
548 | index.scraper.ts
457 |
458 | ```typescript
459 | "use server"
460 |
461 | import axios from 'axios';
462 | import * as cheerio from 'cheerio';
463 | import { extractCurrency, extractDescription, extractPrice } from '../utils';
464 |
465 | export async function scrapeAmazonProduct(url: string) {
466 | if(!url) return;
467 |
468 | // BrightData proxy configuration
469 | const username = String(process.env.BRIGHT_DATA_USERNAME);
470 | const password = String(process.env.BRIGHT_DATA_PASSWORD);
471 | const port = 22225;
472 | const session_id = (1000000 * Math.random()) | 0;
473 |
474 | const options = {
475 | auth: {
476 | username: `${username}-session-${session_id}`,
477 | password,
478 | },
479 | host: 'brd.superproxy.io',
480 | port,
481 | rejectUnauthorized: false,
482 | }
483 |
484 | try {
485 | // Fetch the product page
486 | const response = await axios.get(url, options);
487 | const $ = cheerio.load(response.data);
488 |
489 | // Extract the product title
490 | const title = $('#productTitle').text().trim();
491 | const currentPrice = extractPrice(
492 | $('.priceToPay span.a-price-whole'),
493 | $('.a.size.base.a-color-price'),
494 | $('.a-button-selected .a-color-base'),
495 | );
496 |
497 | const originalPrice = extractPrice(
498 | $('#priceblock_ourprice'),
499 | $('.a-price.a-text-price span.a-offscreen'),
500 | $('#listPrice'),
501 | $('#priceblock_dealprice'),
502 | $('.a-size-base.a-color-price')
503 | );
504 |
505 | const outOfStock = $('#availability span').text().trim().toLowerCase() === 'currently unavailable';
506 |
507 | const images =
508 | $('#imgBlkFront').attr('data-a-dynamic-image') ||
509 | $('#landingImage').attr('data-a-dynamic-image') ||
510 | '{}'
511 |
512 | const imageUrls = Object.keys(JSON.parse(images));
513 |
514 | const currency = extractCurrency($('.a-price-symbol'))
515 | const discountRate = $('.savingsPercentage').text().replace(/[-%]/g, "");
516 |
517 | const description = extractDescription($)
518 |
519 | // Construct data object with scraped information
520 | const data = {
521 | url,
522 | currency: currency || '$',
523 | image: imageUrls[0],
524 | title,
525 | currentPrice: Number(currentPrice) || Number(originalPrice),
526 | originalPrice: Number(originalPrice) || Number(currentPrice),
527 | priceHistory: [],
528 | discountRate: Number(discountRate),
529 | category: 'category',
530 | reviewsCount:100,
531 | stars: 4.5,
532 | isOutOfStock: outOfStock,
533 | description,
534 | lowestPrice: Number(currentPrice) || Number(originalPrice),
535 | highestPrice: Number(originalPrice) || Number(currentPrice),
536 | averagePrice: Number(currentPrice) || Number(originalPrice),
537 | }
538 |
539 | return data;
540 | } catch (error: any) {
541 | console.log(error);
542 | }
543 | }
544 | ```
545 |
546 |
549 |
550 |
551 | ```javascript
552 | /** @type {import('next').NextConfig} */
553 | const nextConfig = {
554 | experimental: {
555 | serverActions: true,
556 | serverComponentsExternalPackages: ['mongoose']
557 | },
558 | images: {
559 | domains: ['m.media-amazon.com']
560 | }
561 | }
562 |
563 | module.exports = nextConfig
564 | ```
565 |
566 |
567 |
568 | next.config.js
550 |
551 | ```javascript
552 | /** @type {import('next').NextConfig} */
553 | const nextConfig = {
554 | experimental: {
555 | serverActions: true,
556 | serverComponentsExternalPackages: ['mongoose']
557 | },
558 | images: {
559 | domains: ['m.media-amazon.com']
560 | }
561 | }
562 |
563 | module.exports = nextConfig
564 | ```
565 |
566 |
569 |
570 |
571 | ```typescript
572 | /** @type {import('tailwindcss').Config} */
573 | module.exports = {
574 | content: [
575 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
576 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
577 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
578 | ],
579 | theme: {
580 | extend: {
581 | colors: {
582 | primary: {
583 | DEFAULT: "#E43030",
584 | "orange": "#D48D3B",
585 | "green": "#3E9242"
586 | },
587 | secondary: "#282828",
588 | "gray-200": "#EAECF0",
589 | "gray-300": "D0D5DD",
590 | "gray-500": "#667085",
591 | "gray-600": "#475467",
592 | "gray-700": "#344054",
593 | "gray-900": "#101828",
594 | "white-100": "#F4F4F4",
595 | "white-200": "#EDF0F8",
596 | "black-100": "#3D4258",
597 | "neutral-black": "#23263B",
598 | },
599 | boxShadow: {
600 | xs: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
601 | },
602 | maxWidth: {
603 | "10xl": '1440px'
604 | },
605 | fontFamily: {
606 | inter: ['Inter', 'sans-serif'],
607 | spaceGrotesk: ['Space Grotesk', 'sans-serif'],
608 | },
609 | borderRadius: {
610 | 10: "10px"
611 | }
612 | },
613 | },
614 | plugins: [],
615 | };
616 | ```
617 |
618 |
619 |
620 | tailwind.config.ts
570 |
571 | ```typescript
572 | /** @type {import('tailwindcss').Config} */
573 | module.exports = {
574 | content: [
575 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
576 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
577 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
578 | ],
579 | theme: {
580 | extend: {
581 | colors: {
582 | primary: {
583 | DEFAULT: "#E43030",
584 | "orange": "#D48D3B",
585 | "green": "#3E9242"
586 | },
587 | secondary: "#282828",
588 | "gray-200": "#EAECF0",
589 | "gray-300": "D0D5DD",
590 | "gray-500": "#667085",
591 | "gray-600": "#475467",
592 | "gray-700": "#344054",
593 | "gray-900": "#101828",
594 | "white-100": "#F4F4F4",
595 | "white-200": "#EDF0F8",
596 | "black-100": "#3D4258",
597 | "neutral-black": "#23263B",
598 | },
599 | boxShadow: {
600 | xs: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
601 | },
602 | maxWidth: {
603 | "10xl": '1440px'
604 | },
605 | fontFamily: {
606 | inter: ['Inter', 'sans-serif'],
607 | spaceGrotesk: ['Space Grotesk', 'sans-serif'],
608 | },
609 | borderRadius: {
610 | 10: "10px"
611 | }
612 | },
613 | },
614 | plugins: [],
615 | };
616 | ```
617 |
618 |
621 |
622 |
623 | ```typescript
624 | export type PriceHistoryItem = {
625 | price: number;
626 | };
627 |
628 | export type User = {
629 | email: string;
630 | };
631 |
632 | export type Product = {
633 | _id?: string;
634 | url: string;
635 | currency: string;
636 | image: string;
637 | title: string;
638 | currentPrice: number;
639 | originalPrice: number;
640 | priceHistory: PriceHistoryItem[] | [];
641 | highestPrice: number;
642 | lowestPrice: number;
643 | averagePrice: number;
644 | discountRate: number;
645 | description: string;
646 | category: string;
647 | reviewsCount: number;
648 | stars: number;
649 | isOutOfStock: Boolean;
650 | users?: User[];
651 | };
652 |
653 | export type NotificationType =
654 | | "WELCOME"
655 | | "CHANGE_OF_STOCK"
656 | | "LOWEST_PRICE"
657 | | "THRESHOLD_MET";
658 |
659 | export type EmailContent = {
660 | subject: string;
661 | body: string;
662 | };
663 |
664 | export type EmailProductInfo = {
665 | title: string;
666 | url: string;
667 | };
668 | ```
669 |
670 |
671 |
672 | types.ts
622 |
623 | ```typescript
624 | export type PriceHistoryItem = {
625 | price: number;
626 | };
627 |
628 | export type User = {
629 | email: string;
630 | };
631 |
632 | export type Product = {
633 | _id?: string;
634 | url: string;
635 | currency: string;
636 | image: string;
637 | title: string;
638 | currentPrice: number;
639 | originalPrice: number;
640 | priceHistory: PriceHistoryItem[] | [];
641 | highestPrice: number;
642 | lowestPrice: number;
643 | averagePrice: number;
644 | discountRate: number;
645 | description: string;
646 | category: string;
647 | reviewsCount: number;
648 | stars: number;
649 | isOutOfStock: Boolean;
650 | users?: User[];
651 | };
652 |
653 | export type NotificationType =
654 | | "WELCOME"
655 | | "CHANGE_OF_STOCK"
656 | | "LOWEST_PRICE"
657 | | "THRESHOLD_MET";
658 |
659 | export type EmailContent = {
660 | subject: string;
661 | body: string;
662 | };
663 |
664 | export type EmailProductInfo = {
665 | title: string;
666 | url: string;
667 | };
668 | ```
669 |
670 |
673 |
674 |
675 | ```typescript
676 | import { PriceHistoryItem, Product } from "@/types";
677 |
678 | const Notification = {
679 | WELCOME: 'WELCOME',
680 | CHANGE_OF_STOCK: 'CHANGE_OF_STOCK',
681 | LOWEST_PRICE: 'LOWEST_PRICE',
682 | THRESHOLD_MET: 'THRESHOLD_MET',
683 | }
684 |
685 | const THRESHOLD_PERCENTAGE = 40;
686 |
687 | // Extracts and returns the price from a list of possible elements.
688 | export function extractPrice(...elements: any) {
689 | for (const element of elements) {
690 | const priceText = element.text().trim();
691 |
692 | if(priceText) {
693 | const cleanPrice = priceText.replace(/[^\d.]/g, '');
694 |
695 | let firstPrice;
696 |
697 | if (cleanPrice) {
698 | firstPrice = cleanPrice.match(/\d+\.\d{2}/)?.[0];
699 | }
700 |
701 | return firstPrice || cleanPrice;
702 | }
703 | }
704 |
705 | return '';
706 | }
707 |
708 | // Extracts and returns the currency symbol from an element.
709 | export function extractCurrency(element: any) {
710 | const currencyText = element.text().trim().slice(0, 1);
711 | return currencyText ? currencyText : "";
712 | }
713 |
714 | // Extracts description from two possible elements from amazon
715 | export function extractDescription($: any) {
716 | // these are possible elements holding description of the product
717 | const selectors = [
718 | ".a-unordered-list .a-list-item",
719 | ".a-expander-content p",
720 | // Add more selectors here if needed
721 | ];
722 |
723 | for (const selector of selectors) {
724 | const elements = $(selector);
725 | if (elements.length > 0) {
726 | const textContent = elements
727 | .map((_: any, element: any) => $(element).text().trim())
728 | .get()
729 | .join("\n");
730 | return textContent;
731 | }
732 | }
733 |
734 | // If no matching elements were found, return an empty string
735 | return "";
736 | }
737 |
738 | export function getHighestPrice(priceList: PriceHistoryItem[]) {
739 | let highestPrice = priceList[0];
740 |
741 | for (let i = 0; i < priceList.length; i++) {
742 | if (priceList[i].price > highestPrice.price) {
743 | highestPrice = priceList[i];
744 | }
745 | }
746 |
747 | return highestPrice.price;
748 | }
749 |
750 | export function getLowestPrice(priceList: PriceHistoryItem[]) {
751 | let lowestPrice = priceList[0];
752 |
753 | for (let i = 0; i < priceList.length; i++) {
754 | if (priceList[i].price < lowestPrice.price) {
755 | lowestPrice = priceList[i];
756 | }
757 | }
758 |
759 | return lowestPrice.price;
760 | }
761 |
762 | export function getAveragePrice(priceList: PriceHistoryItem[]) {
763 | const sumOfPrices = priceList.reduce((acc, curr) => acc + curr.price, 0);
764 | const averagePrice = sumOfPrices / priceList.length || 0;
765 |
766 | return averagePrice;
767 | }
768 |
769 | export const getEmailNotifType = (
770 | scrapedProduct: Product,
771 | currentProduct: Product
772 | ) => {
773 | const lowestPrice = getLowestPrice(currentProduct.priceHistory);
774 |
775 | if (scrapedProduct.currentPrice < lowestPrice) {
776 | return Notification.LOWEST_PRICE as keyof typeof Notification;
777 | }
778 | if (!scrapedProduct.isOutOfStock && currentProduct.isOutOfStock) {
779 | return Notification.CHANGE_OF_STOCK as keyof typeof Notification;
780 | }
781 | if (scrapedProduct.discountRate >= THRESHOLD_PERCENTAGE) {
782 | return Notification.THRESHOLD_MET as keyof typeof Notification;
783 | }
784 |
785 | return null;
786 | };
787 |
788 | export const formatNumber = (num: number = 0) => {
789 | return num.toLocaleString(undefined, {
790 | minimumFractionDigits: 0,
791 | maximumFractionDigits: 0,
792 | });
793 | };
794 | ```
795 |
796 |
797 |
798 | ## 🔗 Links
799 |
800 | Assets used in the project are [here](https://drive.google.com/file/d/1wcV5Jg42CYsF3UMQh771a8eZn1b702iy/view)
801 |
802 | #
803 |
--------------------------------------------------------------------------------