Ecommerce Engine: Powering Seamless Online Stores

Table of Contents

• Introduction
• Frameworks
• UI
• Hooks and Utilities
• Code quality
• Prerequisites
• Usage
• License
• Author

Introduction

Ecommerce Engine is a standalone application designed to provide an administrative interface that enables users to efficiently manage data and configure settings for their e-commerce websites.

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Auth.js – Handle user authentication with ease with providers like Google etc.
• React Query – Efficient data fetching and state management library for React applications

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Shadcn UI – Beautifully designed components that you can copy and paste into your app.
• Lucide – Beautifully simple, pixel-perfect icons
• geist – A typeface specifically designed for developers and designers.
• next-themes – A library for adding dark mode support to Next.js applications

Hooks and Utilities

Some custom React hooks and utilities to enhance functionality and development efficiency:

• useDate: Provides current date and time information with automatic updates.
• useOnClickOutside: Listens for clicks or touch events outside a specified element and invokes a handler function.
• cn: Merges and formats CSS classes for easier class name management, particularly useful for Tailwind CSS integration.
• useAutoFocus: Sets focus automatically on a specified element.
• useCustomToast: Creates custom toast notifications for displaying messages to users.
• useMagneticism: Adds magnetic effect to a specified element based on mouse movement.
• useMounted: Tracks whether the component is mounted or not.
• useMediaQuery: Tracks the result of a specified media query.

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Zod – A powerful TypeScript-first validation and parsing library for robust data handling.
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

To do

☑ Add products feature

☑ Add description to shop model

☑ Add order feature

☑ Implement multiple image upload in products feature

☑ Make general image cleaner utility function

☑ Add logo, favicon and metadata

☑ Make layout responsive

☑ Build shop dashboard page and finish home page

☑ Deploy on vercel and test on mobile

☑ Sort product and category queries (especially getAllProducts)

☑ Enhance data consistency and optimization in feature mutations

☑ Add better error messages/toasts to category, product and shop settings-forms

☑ Address isFeatured and isArchived bug in product creation function

☐ Add filters to data-table?

☐ Add forgot password feature?

Prerequisites

Before you begin, ensure you have the following software installed:

• Node.js
• npm or Yarn

Usage

Follow these steps to set up and run ecommerce engine locally.

1. Create a new project:

   npx create-next-app --example https://github.com/joshuaedo/ecommerce-engine

2. Create a .env file in the project root and add the following variables:

NEXTAUTH_SECRET=your_next_auth_secret
NEXTAUTH_URL=your_next_auth_url
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
DATABASE_URL=your_database_url

Replace the placeholders with your actual Next Auth and Google OAuth credentials.

3. Run the development server:

npm run dev

The application should be accessible at http://localhost:3000.

License

This project is licensed under the MIT License

Author

• Joshua Edo (joshuaedo.com)