Full-Stack E-Commerce Project: ShopNext

This project is a full-stack e-commerce platform designed to provide a modern and efficient online shopping experience. Built with a clear separation between backend and frontend, the system offers rich functionality for both users and administrators.

ShopNext E-commerce Platform - Homepage

This project is a full-stack e-commerce platform designed to provide a modern and efficient online shopping experience. Built with a clear separation between backend and frontend, the system offers rich functionality for both users and administrators.

Key Features:

  • Product Management: Dynamic product catalog with support for categories, tags, search, and filtering. Admins can manage product details, stock, and images.
  • Authentication & User Roles: Secure registration and login system for customers and administrators, using Laravel Sanctum for API authentication and Spatie/laravel-permission for role management (e.g., customer and admin).
  • Shopping Cart: Intuitive shopping cart functionality, allowing users to add, update quantities, and remove items.
  • Order Processing: Order flow including shipping address selection and payment method (basic payment system in place). Users can view their order history.
  • Admin Dashboard: Dedicated interface for administrators to manage products, categories, tags, and monitor store activity. (Currently displays category, tag, and product data).
  • Wishlist: Users can save products they are interested in to a wishlist.

Application Screenshots

ShopNext - Product Page
Product Detail Page
ShopNext - Shopping Cart
Shopping Cart

Technologies Used:

Backend (API):

  • Framework: Laravel (PHP)
  • API Design: RESTful API
  • Authentication: Laravel Sanctum
  • Database: MySQL / MariaDB
  • Role & Permission Management: Spatie/laravel-permission
  • Other: Data seeders for development and testing.

Frontend:

  • Framework: Next.js (React)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: Shadcn/UI
  • State Management & API Calls: React Hooks (useState, useEffect), Axios (via service layer)
  • Icons: Lucide Icons

Project Objective:

To develop a scalable and manageable e-commerce application that provides an excellent user experience by leveraging modern backend and frontend technologies. This project demonstrates the ability to build complex systems with a microservice-ready (API-first) architecture.