Scribd
Upload
70 views2 pages

Frontend Developer Coding Challenge Updated

The document outlines the objective of designing a dynamic pricing table component using Next.js and Tailwind CSS, focusing on frontend architecture, styling, and state management. It specifies the requirements for three pricing tiers, a billing toggle, and a feature comparison matrix, along with design expectations for responsiveness and UI elements. Candidates will be evaluated on their adherence to best practices, code organization, and the implementation of dynamic features, with submission guidelines provided for code and documentation.

Uploaded by

satya0708narayan.patra
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
70 views2 pages

Frontend Developer Coding Challenge Updated

The document outlines the objective of designing a dynamic pricing table component using Next.js and Tailwind CSS, focusing on frontend architecture, styling, and state management. It specifies the requirements for three pricing tiers, a billing toggle, and a feature comparison matrix, along with design expectations for responsiveness and UI elements. Candidates will be evaluated on their adherence to best practices, code organization, and the implementation of dynamic features, with submission guidelines provided for code and documentation.

Uploaded by

satya0708narayan.patra
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

Objective

Design and implement a dynamic, responsive pricing table component using [Link] and
Tailwind CSS. This exercise is intended to evaluate your skills in frontend component
architecture, styling precision, state management, and overall attention to detail.

Scope of Work
You are required to create a reusable pricing table component that includes:

• Three pricing tiers: Free, Pro, and Enterprise

• A Monthly/Yearly billing toggle that updates the displayed prices

• A feature comparison matrix across plans

Component Requirements
Each pricing card should contain the following elements:

• Plan name

• Price (dependent on billing toggle)

• Call-to-action button (e.g., 'Get Started' or 'Contact Sales')

• List of features (available or unavailable per plan)

Feature configuration should follow this data structure:

type Plan = {
name: string
monthly: number
yearly: number
features: string[]
}

type FeatureConfig = {
label: string
availability: {
[planName: string]: boolean
}
}
Design & UI Expectations
• Implement a toggle switch for Monthly and Yearly pricing options

• Highlight the 'Pro' plan with a badge indicating it as the recommended choice

• Use visual indicators (✔/✖) to represent feature availability per plan

• Apply subtle hover effects and responsive design using Tailwind CSS

• Ensure the layout is mobile-friendly: stacked layout on mobile, 3-column on desktop

Bonus Considerations
• Integrate Headless UI for accessible toggle components

• Support dark mode using Tailwind's `dark:` variants

• Apply smooth animations to price changes using Tailwind transitions or Framer Motion

Evaluation Criteria

Candidates will be evaluated based on the following parameters:

• Tailwind CSS best practices and semantic HTML usage


• Component modularity and code organization
• UI/UX fidelity and responsive layout quality
• Implementation of dynamic behavior (billing toggle)
• Cleanliness, readability, and maintainability of code

Submission Guidelines
Please submit the following:

• GitHub repository link containing the source code

• Optional: live deployment link (Vercel or Netlify preferred)

• Include a README file with setup instructions and relevant notes

You might also like