e-shopee

Preview

• Official demo link
• Dev beta link
• API documents - Backend repo

e-shopee Index page Buyer Contact page Buyer About page Buyer Checkout page Buyer Cart page Buyer Account page	Buyer Register page Buyer Login page Buyer Home page Buyer Filter page Buyer Product details page Buyer Sidebar Menu page Author page
Seller dashboard page Seller orders page Seller add products page Seller all products page Seller notifications page	Seller shop register page Seller shop profile page Seller shop preview page
Admin login page	Admin dashboard page

Descriptions and requirements

• Authenticate multi users
• 3-roles interface (Buyer-Seller-Admin). Reference with shopee website
• Connect databases and API by Axios request
• Multi language locales web (VietNamese, English, Russian, Chinese, Indian, Korean, Japanese, Spanish, Brazil, France…)
• Dark/Light modes web
• Friendly with SEO and Google Analys
• Auto reponsive on all media sizes
• Site map diagram
• Deploying online to server by Vercel

Feature

• 🧩 slick

• 🧮 carousel

• 🎃 icon

• 📈 Pie-chart - example

• 🚧 Area chart - docs

• 🔗 Admin template 1 - Admin template 2

• ✨ template idea 1 - template idea 2

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 📲 PWA

• 🎨 Windi CSS - next generation utility-first CSS framework

• 😃 Use icons from any icon sets, with no compromise

• 🌍 I18n ready

• 🗒 Markdown Support

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🖨 Server-side generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 🦾 TypeScript, of course

• ⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions

• ☁️ Deploy on Netlify, zero-config

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features!

Plugins

• Vue Router
• vite-plugin-pages - file system based routing
• vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-pwa - PWA
• vite-plugin-windicss - Windi CSS Integration
• vite-plugin-md - Markdown as components / components in Markdown
• markdown-it-prism - Prism for syntax highlighting
• prism-theme-vars - customizable Prism.js theme using CSS variables
• Vue I18n - Internationalization
• vite-plugin-vue-i18n - Vite plugin for Vue I18n
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
• critters - Critical CSS
• Netlify - zero-config deployment
• VS Code Extensions
• Vite - Fire up Vite server automatically
• Volar - Vue 3 <script setup> IDE support
• Iconify IntelliSense - Icon inline display and autocomplete
• i18n Ally - All in one i18n support
• Windi CSS Intellisense - IDE support for Windi CSS
• ESLint
• Docker - ENV

Try it now!

Vitesse requires Node >=14

Allow CORS extension

GitHub Template

Create a repo from this template on GitHub.

Clone to local

git clone https://github.com/thuongtruong1009/e-shopee
cd e-shopee
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Checklist

When you use this template, try follow the checklist to update your info properly

• Change the author name in LICENSE
• Change the title in App.vue
• Change the favicon in public
• Remove the .github/FUNDING file which contains the funding info
• Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

• Just run and auto open at http://localhost:3333

pnpm dev

Build

• To build the App, run

pnpm build

Test

pnpm test

Preview your production

pnpm preview

Deploy on Netlify

• Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Reference

• Relax with bee-music
• Enhance front-end skills through twitter-meta
• Generate your GitHub informations by gitbox
• Begining Vue through notedev
• Learning front-end web full course at frontend-master
• Learn Object-Oriented-Programming tutorial at Snake-Game-OOP
• Become Java master for new beginner at Java-training
• Pratice UI/UX at league-fo-legend
• Make flip card game at flip-card
• Learn computer architecture at computer-architecture

❤️ Support me

We are looking for sponsors to join us to have better community reach and impact.

📰 License

• This project is distributed under the MIT License.

• Copyright of @thuongtruong1009, 2022.