OneEntry next.js shop example

App Promo Page

OneEntry Plaform E-commerce Template

This project is a demo version of an e-commerce store, fully integrated with OneEntry Plaform. The primary goal of this project is to provide developers with a free, ready-to-use front-end template that demonstrates the capabilities of working with OneEntry.

Project Goals

1. Showcase OneEntry’s Capabilities: This e-commerce template gives users a clear example of how OneEntry Plaform can be used to manage content and products on an online store.

2. Simplify Development for Front-End Developers: This project serves as a foundation that developers can use to quickly set up an e-commerce store. They can use the code as-is or customize it, adapting the design and adding their own features, which significantly reduces development time.

3. Ready-to-Use Solution for Quick Start: This e-commerce template isn’t just an example—it’s a fully functional codebase that’s already integrated with OneEntry Plaform, ready to be tailored to fit specific project needs.

Key Features

• Full Control via Admin Panel: Every element of the store—from product cards to category pages—is customizable and manageable through an intuitive admin panel. This setup allows for quick content updates and store adjustments without needing code changes.

• Flexible Content Management: All content, including product descriptions, images, pricing, and promotions, is managed entirely through the OneEntry admin panel. This makes it easy to keep the store up-to-date, working exclusively through the admin interface.

• Quick Start & Easy Adaptation: Developers can hit the ground running with this ready-made template and customize it as needed to meet specific business or branding requirements.

• Scalability Support: With OneEntry Plaform, this store can easily scale, handling high traffic and growing data volumes, making it suitable for both small projects and larger stores.

Usage

This project is designed for developers using OneEntry Plaform who need a quick and flexible way to launch an e-commerce store. It serves as a starting point for creating a custom online store with minimal time and effort on front-end development.

Demo

https://oneentry-nextjs-e-commerce-demo.vercel.app/

Features

• User creation: Register users via different providers (email, phone) and customize which data to store.
• User Activation: Activate users via code, such as through email verification.
• State Management: Utilize Redux Toolkit and Server state for effective state management.
• Efficient Store Catalog: Easily manage an unlimited number of products in the catalog.
• Dynamic Catalog Updates: Reload the catalog, with direct editing capabilities in the CMS.
• Advanced Filtering: Apply a variety of filters to the product catalog for better organization and search.
• Editable Block Content: Support for user-editable block content.
• Product Recommendations: Display various selections of products.
• Feedback Forms: Include customizable feedback forms with captcha protection to prevent spam.
• Order Creation and Purchases: Complete transactions using [Stripe] for secure, seamless payments.
• Order History: View past purchases and maintain a record of all transactions.
• Event Notifications: Leverage events to notify users of updates, offers, or important news in real-time.
• TypeScript Integration: The project is beginner-friendly and uses lightweight TypeScript for development.
• Tailwind: User-friendly layout comprehensible to everyone.
• JsDoc: BuiltIn VsCode jsDoc documentation.

Project Documentation

This is a Next.js project.

Ready-to-use backend and Admin panel

NPM SDK

For detailed information about specific aspects of the project, please refer to the documentation files:

• Animations - Details about the GSAP animation system and components
• Authorization - Information about JWT tokens and AuthContext
• Error Handling - Guide to the centralized error handling system
• Events - Explanation of event notifications and WebSocket usage
• Appointment Booking Flow - How the appointment booking process works
• State Management - Redux Toolkit and state management approach
• User State - How user state is implemented and synchronized

Getting Started with OneEntry

Before running the demo locally, you need to create a OneEntry account and generate your API credentials.
A detailed step-by-step setup guide is available on the template landing page:

👉 https://oneentry-free-template-e-commerce-nextjs.vercel.app/

1. Create a OneEntry Workspace

If you don’t have an account yet, sign up here
👉 https://oneentry.cloud/

Create your workspace — this will be the backend for the demo Next.js store.

2. Generate an App Token

Once inside the admin panel:

1. Navigate to Settings → Access Tokens
2. Click Create App Token
3. Copy your generated token — you'll need it for running the project
4. (Optional) Configure access scopes depending on your use case

Environment Variables

To run this project, you will need to add the following environment variables to your .env file.

1. Rename .env_example to .env

2. Add the following environment variables

`NEXT_PUBLIC_PROJECT_URL: https://xxx-xxx-xxx.oneentry.cloud`

`NEXT_PUBLIC_APP_TOKEN: xxxxxGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....`

Run Locally

Clone the project

  git clone [email protected]:ONEENTRY-PLATFORM/nextjs-shop-demo.git

Go to the project directory

  cd nextjs-shop-demo

Install dependencies

  npm install

Start the dev server

  next dev

Build app

  next build

Open http://localhost:3000 with your browser to see the result.

Installation

Install oneentry-next-shop with npm

  cd nextjs-shop-demo

  npm install

  next dev

i18n config

Open i18n-config.ts Set your languages codes ​​accordingly with example

Deployment

To deploy this project run

  npm run deploy

Project Structure

app: Contains the main components of the application, organized by functionality (e.g., cart, favorites, orders, shop). api: Houses API endpoints and related files, ensuring a clean separation of concerns. store: Manages the Redux store, including hooks, providers, and reducers. styles: Contains CSS files, organized by functionality. types: Includes TypeScript type definitions. components: Features reusable components like forms, icons, and layout elements.

Testing

The project uses two testing layers:

Unit tests (Jest)

npm test                # run once
npm run test:watch      # watch mode
npm run test:coverage   # with coverage report

Unit test files live next to the source in __tests__/ folders. Coverage is collected from app/ and components/.

E2E tests (Playwright)

~171 tests across 20 spec files covering: auth, cart, checkout, catalog, favorites, orders, profile, search, navigation, localization, accessibility, mobile flows, and more.

npm run test:e2e              # headless (all browsers)
npm run test:e2e:ui           # Playwright UI mode (recommended for development)
npm run test:e2e:headed       # visible browser window
npm run test:e2e:debug        # Playwright Inspector
npm run test:e2e:report       # open HTML report
npm run test:e2e:chromium     # Chrome only
npm run test:e2e:firefox      # Firefox only
npm run test:e2e:webkit       # Safari only
npm run test:e2e:install      # install Playwright browsers

E2E tests require a tests/.env file with test user credentials — copy from tests/.env_example:

[email protected]
TEST_USER_PASSWORD=YourPassword123!
BASE_URL=http://localhost:3000

For full E2E documentation, test structure, writing guidelines, and CI/CD setup see tests/README.md.

Development Tools

Scripts: Use npm run dev to start development, npm run build to compile the project, and npm run start to run the production build. The npm run lint script helps maintain code quality. Environment Variables: Make sure to set up your .env file with the necessary environment variables to run the project smoothly. Internationalization: The project supports multiple languages, configured in i18n-config.ts.

Important files and folders

Detailed docs

This is the central hub for all documentation. Below are links to specific sections.

Animations

• Animations Documentation
• Describes the GSAP animation system and transition components.

Authorization

• Authorization Documentation
• Covers login, sign-up, token management, and account activation.

Error Handling

• Error Handling Documentation
• Describes the centralized error handling approach used across the project.

Events

• Events Documentation
• Explains real-time updates and event triggers via WebSocket.

Order Flow

• Order Flow Documentation
• Details the appointment booking and order creation process.

State Management

• State Management Documentation
• Describes the Redux Toolkit state management approach.

User State

• User State Documentation
• Describes user state implementation and synchronization.

In case of any issues or questions, you can post: GitHub discussion