Admin panel for an online clothing store on Vue.js  Visit site

  • Vue.js
  • PUG
  • SCSS
  • Rest API
  • JWT Auth
  • PHP
  • MySQL
  • Highcharts

Development of the SPA "Adminpanel YG-GARMENTS.ru" and the REST API in PHP for authorization and implementation of CRUD operations.

Development of a Vue.js Admin panel for an online clothing store
Description Screenshots & Video Code
Back to the works list

The application (SPA) was created for the PHP store YG-GARMENTS.ru. It contains the following pages: Console (Home), Products, Categories, Collections, Blog and Users.

The REST API (PHP) has been developed to perform operations of creating, reading, updating and deleting data (CRUD).

In order to create the SVG sprite, the base Vue CLI loader has been replaced with svg-sprite-loader by customizing the vue.config.js file.

View the app authorization page.

Login to the Admin panel and overview of the main page

Functionality implemented in the application:

  1. Authorization (JWT token, localStorage) and exit from the Admin panel.
  2. Validating form fields using the Simple-Vue-Validator plugin and displaying prompts.
  3. CRUD: create, read, update and delete products, categories, collections, blog posts and users.
  4. Highcharts: reading orders made in the store and displaying them in the form of graphs and diagrams with filtering by quantity, total amount and years (Home page).
  5. Uploading images to the server and deleting the old one when changed or deleted by the administrator.
  6. Pagination in the sections Products and Blog.
  7. Selecting the number of positions to be displayed on one page.
  8. Filtering products by catalog sections, categories and collections. Filter blog posts by year.
  9. Sorting products by id and price.
  10. Search by name of products and posts.
  11. Notifications: help messages for the administrator in the form of pop-ups at the bottom of modals.
  12. Yandex Metrika statistics display for the home page has been developed. The Yandex Metriks API and the Highcharts library for charting are used.
  13. Current exchange rates and a calculator on the home page

Used tools and packages:

  • Vue CLI is a system for rapid development in Vue.js.
  • The Pug template engine.
  • Sass preprocessor.
  • For Svg sprite the following packages are used: svg-sprite-loader, svgo and svgo-loader.
  • Axios — for getting and displaying data from the API.
  • Vuex — for working with data (state management).
  • Highcharts and highcharts-vue — for building charts and graphs.
  • Vue2-editor is a text editor.
  • Dashboard
  • Products
  • Product create
  • Product edit
  • Categories
  • Collections
  • Blog
  • Users
Vue.js admin panel

Products list page: Pagination, Filtering by catalog sections, categories and collections, Sorting by id and price, Search by product name.

Screenshot:
Vue.js admin: product table

Product creation:
Tabs, Add/remove images, Text blocks: Vue2-editor, Featured Products component, SEO fields:

Product edit form tabs:
Tabs in the product edit form

Product editing process:

Screenshots:
Product edit form Vue.js Product edit form Vue.js

Admin panel: catalog cards

Collection list:
Admin panel: Collection list

Collection edit:
Admin panel: edit form

Creating and editing a blog post: Tabs, Tags: input and selection from the available ones, Add / remove images: cover photo and submissions, Text blocks with images: Vue2-editor, SEO fields.

Post list:
Admin panel: Post list table

Users list:
Admin panel: Users list

Create new user:
Vue.js create form

View all folders and files

Here below is just the script file:

app.js
										const bodyTag = document.querySelector('body');
const navToggler = document.querySelector('.nav-toggler');
Back to top