Inweave is hiring a Junior Front-End Developer (within 48 hours)

• Full-time / Remote / Immediate Joining
• Salary: 30K per month 
• Read the JD Here
• Location: Remote

 

Assignment

This is a pilot project to test your ability to set up a Shopify dev store, connect it with Replo, and build a responsive page based on a Figma design.

 

Summary

You will:

1. Set up a Shopify development store from scratch
2. Add products and a sample product (The Magic Box) with metafields
3. Connect your store to Replo
4. Build a short Replo page following our Figma design

 

Step 1: Shopify Development Store

1. Create a Shopify Partner account if you do not already have one.
2. Open a development store. Development stores are free and password-protected by default.
3. Name your store in this format: {firstname}-{lastname}-inweave-builder
   Example: john-smith-inweave-builder.myshopify.com
4. Add a fake product called The Magic Box with:
   • Title and description
   • Fake images (from Figma)
   • Shopify metafields

Sample Product Data: [Link Placeholder]

Product Images: Download PNGs from Figma (1 per variant: red, white, blue).

Helpful reference: Shopify Variants Guide.

 

Step 2: Connect Store with Replo

1. Log into Replo Dashboard.
2. Connect your Shopify development store.
3. Create a new page using this naming format: {YYYY}-{MM}-{DD}-inweave-test
   Example: 2025-08-26-inweave-test

 

Step 3: Build the Replo Page

• Open this Figma design.
• Recreate the design in Replo exactly pixel perfect.
• Focus on:
  • Responsiveness (desktop, tablet, mobile, and large screens)
  • Clean structure (container naming, auto-layout usage)
  • Correct product linking and dynamic data (not hardcoded text)
  • Smooth interactions

 

ChecklistStart Requirements

• Must have both desktop and mobile designs before starting.

General

• Export images at the correct resolution. Do not use blurry assets.
• If images in Figma are blurry or missing, message for replacements instead of using bad assets.
• Ensure full responsiveness across all device sizes, including very large screens (2500px).
• Use Replo’s canvas resizing tool to test responsiveness.
• Check tablet view even if no tablet design is provided.
• Keep font sizes, margins, and padding values consistent.

Containers

• Name containers clearly (for example, Hero Section, Benefits Section).
• Avoid unnecessary nested containers.
• Do not use empty containers for spacing. Use gap, margin, or padding instead.

Products

• Use the correct products, not placeholders.
• Use dynamic data for product titles, descriptions, and prices.
• Place products inside product containers.

Layouts

• Use Auto Layout instead of grids where possible.
• Avoid fixed widths unless absolutely necessary.
• Avoid negative margin or padding unless required for overlaps.
• Remove unnecessary spacing or convert to Auto Layout gaps.
• Avoid unnecessary min/max widths or heights.

Reuse

• You may reuse components from previous projects, but update all copy and images.
• You may use the Replo section library, but make sure styling and content match the design.

 

Resources

• Replo Editor Best Practices
• Replo Learn
• Replo Dynamic Data Guide
• Replo Support Center

 

Submission

Please provide:

1. A Replo preview link of your finished page

---