<aside> 🚀 XcelPros Coding Challenge • Meal Calorie Count Generator Frontend Assignment for Next.js Candidates • 72-Hour Submission Window

</aside>

Table of Contents

Overview

This assignment evaluates your ability to build a production-quality frontend for a pre-built backend API. You are not building the backend — it is already deployed and documented in the API Reference section below. Your job is to consume it, handle all edge cases gracefully, and deliver a polished, well-architected Next.js application.

The backend API exposes three core endpoints: user registration, login, and a calorie lookup powered by the USDA FoodData Central database. Your frontend must integrate all three — with proper authentication state, guarded routes, responsive UI, and thoughtful error handling.

Important Guidelines

<aside> 🤖 AI-Generated Code Policy — Read carefully before starting.

You may use AI tools to help with system design, architecture planning, and algorithmic logic. You may NOT generate actual code — components, routes, hooks, utils, stores, or pages — using generative AI. All submissions are run through an AI similarity checker. If your code is found to be primarily AI-generated, your submission will be disqualified without feedback.

</aside>

Part I — Backend (Already Deployed)

<aside> ✅ The backend API is live and fully implemented — you do not need to build it. Your task is to build the frontend that integrates with it.

Base URL: https://xcelpros-calorie-api.onrender.com

</aside>

Backend Tech Stack

Component Technology
Runtime Node.js 20 + TypeScript
Framework Express.js
Database PostgreSQL (Drizzle ORM)
Caching Redis — USDA food data cache (TTL: 1h, versioned prefix, fire-and-forget write)
Authentication JWT (7-day tokens), bcrypt password hashing
External API USDA FoodData Central (fuzzy best-match selection)
Logging / Alerts Winston — server errors forwarded to Slack
Rate Limiting Required — Redis sliding window; /auth routes: 5 req/5min, /get-calories: 15 req/5min, global: 100 req/5min

Architecture Diagram

Client (Next.js)
     │
     │  HTTPS JSON
     ▼
┌─────────────────────────────────────────────┐
│              Express API Server              │
│                                              │
│  ┌──────────────────────────────────────┐   │
│  │   Redis Rate Limiter           │   │
│  │   /auth/*        → 5 req / 5 min     │   │
│  │   /api/get-calories  → 15 req / 5 min    │   │
│  │   global         → 100 req / 5 min   │   │
│  └──────────────────────────────────────┘   │
│                                              │
│  ┌──────────────────────────────────────┐   │
│  │  JWT Auth Middleware                  │   │
│  │   verify token → DB user lookup      │   │
│  └──────────────────────────────────────┘   │
│                                              │
│  ┌──────────────────────────────────────┐   │
│  │  USDA Service                         │   │
│  │   Redis cache check (TTL: 1h)         │   │
│  │   → USDA API call (on miss)           │   │
│  │   → Fuzzy best-match + scoring        │   │
│  │   → Calorie + macro calculation       │   │
│  └──────────────────────────────────────┘   │
└─────────────────────────────────────────────┘
        │                     │
        ▼                     ▼
   PostgreSQL             Redis
  (users table)    (rate limits + USDA cache)