• edited

96% Matched Product details section with Next.Js App Router, Tailwind, React

Challenge brief

Product Details SectionBuild a responsive and dynamic product details section for displaying product information

Back to all submissions

• edited

96% Matched Product details section with Next.Js App Router, Tailwind, React

132

Challenge brief

Product Details SectionBuild a responsive and dynamic product details section for displaying product information

Erick Martinez Jr.@E-Rick

Full Stack Software Engineer

6 YOE

3.47k Reputation

Preview solution

View code

Full implementation using Next.Js app router, React, RadixUI, Tailwind, and Tanstack Query. Uses url params as state for image index, quantity, color, and size.

Submission vs Design

https://gfe-ecommerce-three.vercel.app/product-details/voyager-hoodie

Implementation details

Tech stack

HTML

Basics

Semantics

Images

Forms

CSS

Basics

Positioning

Layout

Responsive Design

Transforms and Transitions

Architecture

JavaScript

DOM Events

DOM Manipulation

Fetch

Storage

React

Basics

Components

List Rendering

Event Handling

Form Handling

Effects

Package Managers

Basics

Build Tools

Typechecking

Linting & Formatting

React

Next.js

Tailwind

React Query

Code

Discussions