A web application for browsing, searching, and managing a catalog of smartphones. Built with Next.js (v15.3), React, TypeScript, Tailwind, and React Context API for state management. Includes both development and production Docker configurations, plus testing with Jest.

Live Demo: Smartphone Catalog on Netlify

1. Overview
2. Features
3. Technologies
4. Project Structure
5. Installation
6. Running Locally
   • Development (Yarn)
   • Development (Docker)
   • Production (Docker)
7. Testing
8. Environment Variables
9. API Key Handling
10. Linting & Formatting
11. Deployment
12. Future Improvements

This Smartphone Catalog project demonstrates:

• Listing a grid of smartphones fetched from an external API (with x-api-key authentication).
• Real-time search field to filter phones by brand or name.
• Phone detail page (Server-Side Rendering in Next.js) showing specs, color/storage selection, price variations, and similar products.
• Shopping cart with React Context, persisted in localStorage.
• Fully responsive design using Tailwind breakpoints.
• Docker support for both development and production.

• Listing Page: Display up to 20 phones with brand/name/price.
• Search Input: Real-time search by brand or model.
• Detail Page:
  • Large phone image, spec table, color & storage pickers, “Add to Cart.”
  • “Similar Items” row for related products.
• Cart:
  • Persisted with React Context + localStorage.
  • Show item color/storage, remove items, display total.
• Testing: Basic tests with Jest and React Testing Library.
• Responsive & Accessible: Tailwind utilities, best practices for ARIA and focus.

• Node.js (v18 or v22)
• Next.js (v15.3)
• React (v19)
• TypeScript (v5)
• Tailwind CSS (v4)
• ESLint + Jest + React Testing Library
• Docker (for dev and prod images)

• src/app: Next.js App Router structure.
• PhoneListClient.tsx: Client-side search & phone listing.
• DetailClient.tsx: Interactive logic for phone detail (color/storage selection).
• CartProvider.tsx: React Context for shopping cart.
• Dockerfile.dev / Dockerfile.prod: Build images for dev or production.

1. Clone this repository.
2. Install dependencies:

   yarn install

3. Create a .env file (see Environment Variables).

   yarn dev

• Starts Next.js in dev mode (Turbopack).
• Visit http://localhost:3000

    docker-compose -f docker-compose.dev.yml up --build

• Runs a dev container with live reload
• Open http://localhost:3000

    docker-compose -f docker-compose.prod.yml up --build

• Builds an optimized production image via Dockerfile.prod.
• Runs a production container with static files served.

We use Jest + React Testing Library.

yarn test: Run tests once.

yarn test:watch: Re-run on file changes.

Tests are located in src/__tests__.

Create a .env or .env.local with:

NEXT_PUBLIC_API_BASE_URL=https://api-url.com
NEXT_PUBLIC_API_KEY=someapikey

!!! Important !!!: Do not commit real secrets. The code uses:

fetch(url, { headers: { 'x-api-key': process.env.NEXT_PUBLIC_API_KEY } })

to authenticate requests.

All phone API requests require an x-api-key. This project references NEXT_PUBLIC_API_KEY from .env, so you can easily rotate or secure your key. For purely server-side usage, define API_KEY (without NEXT_PUBLIC_) and reference it in SSR, but this code uses a public approach.

• ESLint is configured (eslint.config.mjs).

• Run yarn lint to see warnings/errors.

• Additional tools (Prettier) can be integrated if desired.

A live version is deployed on Netlify: Smartphone Catalog on Netlify

Other Options:

• Vercel: Easiest for Next.js hosting.

• Docker: Deploy the production image to any container-based host.

• Netlify: Next.js SSR is possible with minimal config.

It might not be tonight… tomorrow… or the next day, but everything is going to be okay.

Unknown