https://github.com/valeriogc/shop-manager-bo
Full webapp for a backoffice responsive admin console made with VueJs 3 and Typescript and scss
https://github.com/valeriogc/shop-manager-bo
docker github-actions pinia scss typescript vue3 vuejs
Last synced: 2 months ago
JSON representation
Full webapp for a backoffice responsive admin console made with VueJs 3 and Typescript and scss
- Host: GitHub
- URL: https://github.com/valeriogc/shop-manager-bo
- Owner: ValerioGc
- Created: 2025-04-17T22:23:33.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-28T18:06:50.000Z (2 months ago)
- Last Synced: 2025-04-30T15:37:17.099Z (2 months ago)
- Topics: docker, github-actions, pinia, scss, typescript, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 926 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.txt
Awesome Lists containing this project
README
Shop Manager Back Office
Complete website for a Shop back office made with vue 3 and TypeScript and scss for managing a shop, creating products, managing categories and shows/exhibitions. It features a complete product management system, including advanced product search, the ability to create, edit and delete products.
It also includes a category management system, allowing users to create and manage categories for their products. The website is fully responsive, ensuring that it looks great on all devices.
It features a dockerized environment for easy development and deployment, as well as a CI/CD pipeline for automated testing and deployment. The website is also integrated with Google Cloud Translation API for multilingual support, allowing users to easily translate the website into different languages.
💻 Built with
Google Translate
The back office panel uses the text translation service offered by Google Cloud.
The service is Cloud translate API (_Cloud translation - BASIC_)
It has a limit of 500,000 characters per month for free and has a maximum number of characters per request.
The service use an **API KEY** that is saved in the **.env.production** and **env.test** files of the [back end project](https://github.com/ValerioGc/laravel-store-manager)
## 🚀 Github Actions
The project is integrated with GitHub Actions for CI/CD. The pipeline is triggered on every push to the deploy_prod/deploy_test branch. The pipeline includes the following steps:
- **Version and changelog extraction**: The version and changelog are extracted from the package.json file to be used in the release process.
- **Build**: The project is built using the build script.
- **Test**: The project is tested using the test script.
- **Deploy**: The compiled build is deployed to the production/test branch.
- **Sitemap**: The sitemap is generated using the sitemap script.
- **Github release**: The project is released on GitHub using the release script and **tagged with version numbers**.
### **Deploy Script**
The deployment process is automated through scripts that can be used via NodeJS commands.
**Start the production pipeline on GitHub actions.**
```
npm run deploy:prod
```
**Start the test pipeline on GitHub actions.**
```
npm run deploy:test
```
Docker integration
The project uses Docker to run the application and perform other operations without having NodeJs installed locally. The script compiles for development using a nodeJs:alpine environment via Docker.
**Start the project with docker on Windows environments**
```bash
npm run docker:win
```
**Start the project with docker on Linux environments**
```bash
npm run docker:linux
```
It's also present a docker script for running the compiled files on VPS/VM on nodeJs:alpine instance
**Start the project with docker in test mode**
```bash
npm run docker:deploy -- {mode}
```
##### _Avaliable Mode_:
> - development
> - test
> - prod
## Suggested IDE configuration
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (disabled Vetur).
🛠️ Installation Step:
##### 1. Install dependencies
```sh
npm install
```
##### 2. Update dependencies
```sh
npm update
```
##### 3. Compile for development (_Opens the website locally_)
```sh
npm run dev
```
##### 4. Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
🧪 Unit Test [Vitest]
The testing process is already integrated into the build script and pipelines. However, it is possible to run tests in standalone mode with the following command:
```sh
npm run test:unit
```
🔨 Build and Optimization for Deploy
There are several build processes based on the environment that can be used with these commands:
#### 1. Execute the build using the production .env files
```sh
npm run build:dev
```
#### 2. Execute the build using the production .env files
```sh
npm run build:prod
```
#### 3. Execute the build using the test .env files
```sh
npm run build:test
```
#### 5. Execute the build using the production .env files
```sh
npm run build:prod
```