Scribd
Upload
6 views4 pages

Technical Assignment For React Developer Position

The technical assignment for a React Developer position requires the creation of a webpage using Next.js based on a Figma design prototype. The developer must ensure clean, maintainable code, optimize for speed, integrate data from a specified GraphQL API, and deploy the site on Vercel, sharing the deployment link and repository for review. Key tasks include using Tailwind CSS for styling and adhering to best practices throughout the development process.

Uploaded by

BHAVIK PANCHAL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

Technical Assignment For React Developer Position

The technical assignment for a React Developer position requires the creation of a webpage using Next.js based on a Figma design prototype. The developer must ensure clean, maintainable code, optimize for speed, integrate data from a specified GraphQL API, and deploy the site on Vercel, sharing the deployment link and repository for review. Key tasks include using Tailwind CSS for styling and adhering to best practices throughout the development process.

Uploaded by

BHAVIK PANCHAL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Technical Assignment for React Developer Position

Objective:

The goal of this assignment is to assess your ability to create a webpage using Next.js.

Tasks:

1. Design Reference: You can find the design prototype in Figma using the following link:
Figma Design

2. Development:
a. Develop the webpage as per the design shared above using Next.js.
b. Follow best practices to ensure the code is clean, maintainable, and scalable.
c. Optimize the webpage for speed and adhere to core web vitals.
d. Using Tailwind CSS for styling will be a plus.

3. API Integration: Pull data from the specified API and integrate it into the webpage.

4. Deployment:
a. Deploy the site to Vercel.
b. Share the deployment link along with the GitHub/GitLab repository for the project
to review the code.

We look forward to reviewing your work. Good luck!

API Details

API type - GraphQL


Endpoint - https://astralpaints.kwebmakerdigitalagency.com/graphql
Query -

{
pages(where: {name: "Homepage"}) {
nodes {
homepage {
banners {
bannerImage {
node {
sourceUrl
}
}
bannersTitle
bannerDescription
bannerButton {
title
url
target
}
}
homeAboutTitle
homeAboutSubtitle
homeAboutButton {
target
title
url
}
homeAboutVideoImage {
node {
sourceUrl
}
}
homeAboutVideoUrl
homeAboutDescription
homeCategoryTitle
homeCategorySubtitle
homeServicesTitle
homeServicesSubtitle
homeColoursTitle
homeColoursSubtitle
homeColoursButton {
target
title
url
}
homeJoinBackgroundImage {
node {
sourceUrl
}
}
homeJoinTitle
homeJoinSubtitle
homeJoinButton {
target
title
url
}
homeJoinDescription
blogTitle
blogSubtitle
categories {
link
title
image {
node {
sourceUrl
}
}
}
}
seo {
canonical
metaKeywords
metaDesc
title
opengraphType
opengraphSiteName
opengraphTitle
opengraphDescription
opengraphUrl
schema {
raw
}
opengraphImage {
mediaItemUrl
}
}
}
}

allColourCategory(where: {slug: "popular"}) {


nodes {
name
colours {
nodes {
title
slug
colourInfo {
selectColor
colourRgb
}
}
}
}
}
blogs {
nodes {
featuredImage {
node {
sourceUrl
slug
}
}
slug
title
date
}
}
}

You might also like