Next Shop Application

E-commerce web app with public store, user profile, and admin panel

1 / 6

Links

Demo

This project is a production-ready e-commerce web application consisting of a public shopping interface, a user profile area, and a dedicated admin panel. An advanced analytics dashboard has also been added to the admin panel, covering revenue analysis, user growth, best-selling products, category sales share, and conversion funnel across configurable time ranges. The overall architecture includes a backend built with Node.js and Express and a frontend developed using Next.js. The frontend communicates with the backend through RESTful APIs. Authentication (JWT & OTP) and business logic are implemented on the backend, while access to protected areas such as the admin panel is controlled in the UI based on user roles (ADMIN / SUPER_ADMIN). My primary focus on the frontend was server-state management, stable API integration, role-based UI access control, performance optimization, and maintaining a reliable user experience in complex flows such as cart management and checkout.

Technologies

Next.js 16React 19Ant DesignTailwind CSSTanStack React Query (v4)Axiosreact-hot-toastreact-iconsquery-stringreact-otp-inputreact-multi-date-pickerreact-selectreact-tag-input-component

Features

User: Registration and login, OTP-based mobile verification (UI integration), Profile completion and editing, password change, Product listing with search, category filter, sorting, and pagination, Product detail page by slug, Cart (add/remove, apply coupon, price calculation), Checkout synchronized with payment APIs and cart updates
User Profile: View and edit personal information, View payment history and orders
Admin Panel: Statistical dashboard from API; advanced analytics section with KPI cards, revenue trend charts (daily/weekly/monthly), user growth, best-selling products, sales by category and conversion funnel, with time-range filter (Persian calendar) and CSV/JSON export; Category management (CRUD), Product management with search and pagination, Coupon management, User management with search and pagination, Payment list and details, Role-based UI rendering and access control

My Role in Project

Front-End Developer (Next.js / React) Responsible for frontend architecture design, full UI implementation, API integration, server-state management, admin dashboard development, role-based UI control, and client-side performance optimization. The backend (API, database, authentication logic, payment processing, inventory management) was implemented by a backend developer. My focus was entirely on frontend architecture and building a robust, scalable interface that interacts reliably with the APIs.

Challenges & Focus

Managing cartcouponand checkout synchronization at the UI levelCoordinating client-side caching with mutation-heavy workflowsImplementing precise cache invalidation strategiesRole-based UI access controlPreventing unnecessary re-renders in large product and user listsMaintaining smooth UX during highly interactive shopping flowsImplementing an analytics dashboard driven by Aggregation API with URL-synced date filters and grouping and separate cache per parameter

Technical Decisions

React Query for Server-State Management

Instead of relying on local state, TanStack Query was used to handle server data, enabling caching, automatic request deduplication, predictable loading/error states, and precise invalidation after mutations.

Structured Query Keys

Query keys were centrally structured (e.g. products, adminProducts, product(id), cart, coupons) to prevent cache duplication and allow fine-grained invalidation.

Analytics Query Keys

In the Analytics section, query keys were designed around startDate, endDate, and groupBy so that each chart has its own cache; when filters change, only the relevant data is refetched without affecting other sections.

Authenticated Requests Handling

Axios was configured with withCredentials: true to ensure secure cookie-based authentication for protected API routes, providing a stable experience across authenticated flows.

Separation of Logic from UI

Custom hooks (useProducts, useCart, useCoupons, useCategories, useAuth, etc.) were implemented to isolate data logic from presentational components, improving readability and maintainability.

Optimizations & Solutions

Targeted cache invalidation after related mutations
Clear handling of loading and empty states
Memoization strategies in large lists
Scalable component architecture
Reliable synchronization between cart state and payment API responses
Lazy loading of charts to reduce initial page load
Skeleton loaders and Error Boundary for a stable UX in the analytics section

Trade-offs & Engineering Considerations

The complexity of server-state management was intentionally embraced to ensure stability in real-world shopping scenarios.
Maintainability, scalability, and predictable data flow were prioritized over quick or shortcut-based implementations.

Outcome

This project demonstrates that my capabilities extend beyond building simple UIs and include designing frontend architecture for real-world, production-ready e-commerce systems. Managing complex flows such as cart, coupons, payment, and role-based access control reflects my command of stable client–API coordination and server-state management. Adding a data analytics layer and building an analytics dashboard powered by real sales data has elevated this system from a CRUD-focused admin panel to a data-driven platform, and clearly showcases my ability to design scalable, performant frontends aligned with business analytics needs.

Back