Frontend Developer – Assignment Round
Thank you for applying to Growthzi. As part of our evaluation process, we’d
like you to complete a practical assignment resembling a real-world
front-end requirement within 2 days of receiving it.
Assignment Overview:
You are required to:
● Develop any 2 specific pages from the provided Figma design using
React.js with external CSS (don't use Tailwind CSS).
● Figma design:
https://www.figma.com/design/FgsCj2he7EOWt0DEFAoP84/Hotel-Res
ort-1?node-id=0-1&t=zqpnI8VznqPIcPgZ-1
● Post designing the pages, you need to implement the following
functionalities in any one of the sections of your pages:
1. A “+ Add Button” feature that allows users to create and
customize call-to-action buttons (e.g., “Book Now”, “Call
Now”).
2. Edit feature that enables inline editing of the text of the section.
● You can refer to this video for understanding: Functionalities.mov
● For the Edit feature, you need to integrate the below API, and reflect
the changes in the console/terminal.
@app.route("/update-section", methods=["POST"])
def log_edit():
try:
data = request.get_json()
component = data.get("component")
field = data.get("field")
new_value = data.get("value")
print("FRONTEND EDIT DETECTED")
print(f"Component: {component}")
print(f"Field: {field}")
print("New Value:")
print(new_value)
print("-" * 50)
return jsonify({"message": "Edit logged successfully"}), 200
except Exception as e:
print("Error logging edit:", str(e))
return jsonify({"error": str(e)}), 500
Feature Breakdown:
“+ Add Button” Functionality
● Place a “+ Add Button” clearly on a section of the page.
● When clicked:
○ Open a simple form/modal to let the user define:
■ Button text (e.g., “Book Now”)
■ URL or action (e.g., tel:1234567890)
■ (Optional) Style customizations
○ On submission:
■ Display the new CTA button on the page.
Edit Button Functionality
● Place an “Edit Button” clearly on a section of the page.
● Clicking it should:
○ Enable inline editing of text and optional style settings.
○ Allow the user to save, triggering an API call to update the
backend
Reference Video: Functionalities.mov
Tech Stack Requirements:
● Frontend: React.js (functional components preferred)
● Styling: External CSS (avoid inline/styled-components)
Submission Instructions:
1. Build the 2 Figma pages and implement the described features.
2. Deploy your solution on Vercel, Netlify, or AWS.
3. Screen-record the flow, showcasing:
○ Page layouts matching Figma
○ “+ Add Button” creation and display
○ Inline editing with successful API updates
4. Upload:
○ Code to a public Git repository (GitHub, GitLab, etc.)
○ Screen recording to Google Drive (ensure viewing permissions
are open)
5. Email your submission to [email protected] with the subject
line:
Frontend Developer: [Your Full Name]
Include:
○ Git repo link
○ Google Drive link
○ Updated resume
6. Refrain from using ChatGPT or any other AI platform for the
assignment since it gives errors. Candidate's code found using GPT will
be disqualified immediately.
Timeline: Submit the assignment within 2 days of receiving the Figma
file and API documentation. We look forward to seeing your implementation.
Good luck!
