Frontend Developer

Intro

We’re Roboto Studio, the Sanity & Next.js experts. We move extremely fast and build websites and applications using bleeding edge tech. If there’s a new feature in Next.js, Sanity, Vercel — we want to be using it right this second.

Who we are looking for

We are looking for an experienced Frontend developer, who is creative and fun to work with, understands the pace and culture of Roboto studio, and pays attention to details.

We are a boutique development house – we care about the craft, not just making profit. Therefore, the person in the team would be expected to work with the same mind-set. Instead of bulk fixing and shabby editing, the focus is always on creating a truly unique web solutions for the clients.

Essential Skills

• Next.js/React knowledge
• Tailwindcss
• Familiar with UI libraries (Shadcn/ui, Radix, etc)
• Knowledge of CSS
• Git branching strategies
• Being able to use Figma dev mode
• Understand design patterns

Skills that would be great

• Headless CMS experience
• Management of functional design system
• Knowledge of an animation library
  • Framer Motion
  • GSAP
  • Motion One
  • Rive App
  • React Spring
• Knowledge of AI & use of Cursor AI/v0 or similar tools

Why Join Roboto Studio?

• Fully-remote work with flexibility of working the ususal 9-5 from your local time
• One of the best teams in the headless CMS industry
• Incredibly driven and forward thnking work environment to grow your skills
• Access to the latest and niche technologies to help you progress in the field
• Receptive team, that takes onboard new technologies and opinions
• Competitive salary with progression
• Flexible meeting hours with no restrictions
• Support for hardware/software setup and purchases
• Support with training from industry leading consultants & encouragement to pursue certifications
• National holidays, 21 days of annual leave and any emergency leave
• Latest Macbook (After work trial period)

The nature of your contract

We believe in finding only the very best fit for our business. We are an incredibly tight-knit, agile team, and because of this every member must either be at the ‘top of their game’, or be willing to put in the blood sweat and tears it takes to achieve that.

Therefore, we want to ensure you’re the right fit for us, and we’re the right fit for you. We offer a 6-month fixed-contract period, paid work trials that allow candidates to engage in real projects reflective of our startup environment. This method not only tests the crucial skills and attributes necessary for success in our dynamic setting but also ensures a mutual fit for both parties involved.

At the end of the 6 month contract, if you feel as though you would like to continue with our team, and the feeling is mutual, we will be able to offer a permanent position for this role.

Technical Test

Congratulations on being selected for this tech test. This repository contains a tech test with three distinct implementation tasks designed to showcase your backend development skills with Next.js, Sanity CMS, and external API integrations.

Time Expectation: We estimate this test will take approximately 8-16 hours to complete, depending on your familiarity with the technologies involved.

AI Usage Policy: We encourage the use of AI tools (ChatGPT, Claude, Copilot, etc.) to assist with your development process. However, please be prepared to explain and walk through any code you submit, as we'll discuss your implementation choices and reasoning during the technical interview.

Please complete all three tasks to demonstrate your technical capabilities.

Task 1: Algolia Search Integration

(https://github.com/robotostudio/turbo-start-sanity/tree/backend-test#task-1-algolia-search-integration)

Objective: Implement a search engine for blog posts using Algolia's free tier.

Requirements:

• Search Interface: Add a search component at the top of the /blog page
• Content Indexing: Index all blog posts from Sanity CMS into Algolia
• Real-time Search: Provide instant search results as users type
• Search Results: Display matching blog posts with titles, excerpts, and links
• Free Tier Usage: Use Algolia's free plan (10,000 records, 10,000 operations/month)
• Bonus Feature: Implement caching to speed up repeat searches for the same query

Expected Deliverables:

• Algolia account setup and configuration
• Blog post indexing script or automation
• Search UI component on the blog page
• Search results display with proper styling
• Optional: Query result caching mechanism

Task 2: Category System Implementation

(https://github.com/robotostudio/turbo-start-sanity/tree/backend-test#task-2-category-system-implementation)

Objective: Create a category-based navigation system similar to Roboto Studio's blog categorization.

Requirements:

• Category Schema: Add category fields to blog post documents in Sanity
• Category Routes: Implement dynamic routes like /blog/[category] (e.g., /blog/sanity, /blog/nextjs)
• Category Pages: Display filtered blog posts by category with proper pagination
• Navigation: Add category filters or navigation to the blog index page
• URL Structure: Clean, SEO-friendly URLs matching the pattern shown in the example
• Reference Implementation: Study and replicate the category system from robotostudio.com/blog/sanity (https://robotostudio.com/blog/sanity)
• Bonus Feature: Create categories as separate Sanity documents with custom SEO title/description overrides

Expected Deliverables:

• Updated Sanity schema with category support
• Dynamic category route implementation
• Category filtering functionality
• Category navigation UI
• SEO-optimized category pages

Task 3: Pokemon Async Component

(https://github.com/robotostudio/turbo-start-sanity/tree/backend-test#task-3-pokemon-async-component)

Objective: Create a custom Sanity field type with async Pokemon search functionality using PokeAPI.

Requirements:

• Custom Sanity Schema: Create a Pokemon object type for storing Pokemon data
• Studio Component: Build an async Pokemon selector with debounced search (300ms)
• API Integration: Real-time calls to PokeAPI (https://pokeapi.co/) (https://pokeapi.co/api/v2/pokemon/{name})
• Data Storage: Store Pokemon ID, name, types, sprite URL in Sanity documents
• Frontend Display: Show selected Pokemon data on the /blog page for testing
• Loading States: Proper loading and error handling in Studio interface

Expected Deliverables:

• Custom Sanity schema with Pokemon field type
• Async Studio component for Pokemon search and selection
• Frontend Pokemon display component on blog page
• PokeAPI integration with proper error handling
• TypeScript typing for Pokemon data structure

Submission Requirements

(https://github.com/robotostudio/turbo-start-sanity/tree/backend-test#submission-requirements)

⏰ Expected Completion: Friday, July 25th

(https://github.com/robotostudio/turbo-start-sanity/tree/backend-test#-expected-completion-friday-july-25th)

Once you've completed all three tasks, please provide the following:

• Live Demo: Deploy your solution to Vercel and share the live URL
• Source Code: Share your GitHub repository link with all implemented features
• Schedule Interview: Book your technical interview to discuss your implementation at cal.com/roboto/interview (https://cal.com/roboto/interview)