SE Internship Task

You will complete each one task following one or two or three of the following tasks.

...

Task 01: Frontend Focused – Implement Figma

Design into a Next.js Website
Figma Design link -
https://www.figma.com/design/jYfp25Sua2Kg44QPIoa2Wa/InterviewTask?node-id=0-
1&t=qDWHcZr9OyTIuytM-1

Figma Prototype Link -

https://www.figma.com/proto/jYfp25Sua2Kg44QPIoa2Wa/InterviewTask?page-
id=0%3A1&node-id=1-379&node-
type=canvas&viewport=592%2C288%2C0.19&t=BtClVkX6sYeGkJC1-1&scaling=min-
zoom&content-scaling=fixed

Your task is to convert the provided Figma design into a static Next.js website. You will
focus on creating a pixel-perfect static webpage using Next.js, following the design
specifications from the provided Figma link. Responsiveness is not required for this task,
so the focus will be on replicating the design exactly as it is for desktop.

• Convert the design from the provided Figma link into a static webpage using
Next.js.
• Match the design layout, typography, colors, and all other visual elements exactly
as shown in the Figma file for desktop only (no need to make it responsive).
• Use of Tailwind CSS (Optional):
• You can use Tailwind CSS to speed up your styling process, or write your own
CSS/SCSS.
• Interactive Elements:
o Implement hover effects and any other interactive elements visible in the
design, such as buttons or links.
 Submission Guidelines for Task 01

Deadline:

7 days from the date you receive this email. Submitting earlier will be
considered an added advantage.

Deliverables:

1. GitHub Repository:
a. Push your Next.js code to a GitHub repository.
b. Make sure the repository includes:
i. All source code (pages, components, and styles).
ii. A clear README.md with instructions on how to run the project
locally.
iii. If you used Tailwind CSS, ensure all dependencies are listed in
package.json.
2. Recorded Video:
a. Record a live video showcasing:
i. The working UI based on the Figma design.
ii. A brief walkthrough of your code, explaining the structure and
key components.
3. Submit GitHub Repo Link & Recorded Video:
a. Send your submission to: emma@leadinnovationz.com
b. Subject: SE-Intern-Frontend-Task-01 - [Your Name]

...

Task 02: Backend Focused – Scrapper (Study Only)

To create a web scraper using Puppeteer integrated with an Express.js backend.
The scraper will search listings on ikman.lk based on a provided keyword and
return the scraped data as a JSON response via an API endpoint. You will also
submit the project through a GitHub repository and provide a live video
demonstrating the task.

• Task Breakdown
o Set Up Express.js Backend:
 ▪Create a GitHub repository for the project.
▪Set up an Express.js server with a /search API endpoint that accepts
a search keyword.
▪ When the API is called, it triggers the Puppeteer scraper.
o Use Puppeteer for Scraping:
▪ Use Puppeteer to navigate to ikman.lk, search for the provided
keyword, and scrape the following details from each listing:
• Title
• Price
• Location
• Listing URL
• Date Posted
o Return Data via API:
▪ The scraped data should be returned via the /search API endpoint in
JSON format.
o Run on locally
o Record a Live Video:

Submission Guidelines for Task 02

Deadline:

7 days from the date you receive this email. Submitting earlier will be
considered an added advantage.

Deliverables:

1. GitHub Repository:
2. Push your Express.js code to a GitHub repository.
3. Make sure the repository includes:A clear README.md with instructions on
how to run the project locally.
4. Recorded Video:
c. Record a live video showcasing:
4. Submit GitHub Repo Link & Recorded Video:
a. Send your submission to: emma@leadinnovationz.com
b. Subject: SE-Intern-Task-Backend-02 - [Your Name]
 ...

Task 03: ML Focused - OCR Box Model Extraction for Bank

Document

Image reference link -

https://x.com/munza14/status/1533754558630875136

Extract multiple fields from a bank document image using OCR (Optical Character
Recognition) and return the extracted data in JSON format. You will implement this
task using Python in a Jupyter Notebook and provide a live video demonstrating
the extraction process.

You are required to extract the following fields from the bank document:
• OCR Text Extraction:
o Use Tesseract OCR to extract text from the defined boxes (fields).
o Each bounding box will focus on a particular field in the document, and the
extracted text will be mapped to that field.
• Output in JSON Format:
o Convert the extracted text into a structured JSON format where each key
corresponds to the respective field.
• Live Demo Video:
o Record a live video showing:
o The process of loading and preprocessing the image.
o Defining bounding boxes around the fields and extracting text from them.
o Displaying the final output in JSON format.
• Expected Output Example (some fields only):
{
"reference_number": "BRN-123456789",
"account_number": "1234-5678-9012",
"customer_name": "John Doe",
"address": "123 Main St, Cityville, XY 12345",
"transaction_date": "2023-09-20",
"amount": "1000.50",
"currency": "USD",
"transaction_type": "Credit",
"status": "Completed"
}
1. Jupyter Notebook with:
a. Image preprocessing code (OpenCV).
b. Code to define bounding boxes for each field.
c. OCR text extraction for each field.
d. Final JSON output code.
2. Live Video showing:
a. The OCR extraction process (loading the image, defining boxes, extracting
text).
b. Output displayed as structured JSON.
3. Final JSON Output with all the fields listed above.

Submission Guidelines for Task 03

Deadline:
7 days from the date you receive this email. Submitting earlier will be
considered an added advantage.

Deliverables:

1. Jupyter Notebook:
a. Include the following components in the notebook:
i. Image preprocessing code using OpenCV (e.g., converting the
image to grayscale, applying thresholding, etc.).
ii. Code to define bounding boxes for each field in the bank
document.
iii. OCR text extraction for each defined field using Tesseract.
iv. Final JSON output code, converting the extracted data into a
structured JSON format.
2. Recorded Video:
a. Record a live video showcasing:
i. The OCR extraction process (loading the image, defining
boxes, extracting text).
ii. Displaying the final output as structured JSON.
3. Submit Jupyter Notebook, JSON Output, and Recorded Video:
a. Include the Jupyter Notebook with all the code, the final JSON output,
and the recorded video link as part of your submission.
Submission Email:
Send your submission to: emma@leadinnovationz.com
Subject: SE-Intern-Task-03-OCR - [Your Name]