Scribd
Upload
0 views

Frontend Developer Coding Challenge Updated

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
0 views

Frontend Developer Coding Challenge Updated

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
You are on page 1/ 2

Objective

Design and implement a dynamic, responsive pricing table component using Next.js 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy