A professional admin management interface built with Vue 3 and TypeScript. This project features a robust authentication system, real-time data summarization, and a modular component architecture.
- Node.js (Latest LTS recommended)
- npm
npm install
To run the project locally with network access:
npm run dev -- --host
To build and preview the production bundle:
npm run build && npm run start
Use the following credentials to test the navigation guards and store logic:
| Role | Password | |
|---|---|---|
| Valid Admin | admin@mail.com |
admin123 |
| Invalid User | john@mail.com |
changeme |
This project follows Atomic Design principles to ensure scalability and reusability:
- Atoms/Molecules/Organisms: Found in the global components directory for generic UI elements (Buttons, Inputs, Tables).
- Entity-Specific Components: Located within dedicated entity folders for domain-specific logic.
- State Management: Powered by Pinia for clean, reactive global state.
- Security: Implements Vue Router Guards to protect sensitive dashboard routes.
- Composables: Encapsulated logic for reusable features like infinite scrolling and API fetching.
- Secure Sign-In: Complete authentication flow with error handling.
- Dynamic Dashboard:
- Data Summarization: Quick glance at total products and active categories.
- Analytics: Highlight of the most expensive products.
- Product Management: Full list of products with high-performance rendering using graphql.
- Infinite Scroll: Optimized data fetching using the
offsetandlimitpattern. - Responsive UI: Fully compatible with mobile and desktop using Tailwind CSS.
The project utilizes a custom Tailwind-based transition style to provide smooth visual feedback during page navigations and data loading states.
Better smoothness when searching with pagination Scroll trigger in the pagination Use better the width of the device to make it easier to read key information Create and update products Skeleton tree to load data on demand Review consisency of spacing and font sizes Review SOLID principles of UI components
Better controll of API calls to catch display errors Define variants for some components Study and refactor components considering the composables Review SOLID principles of the server s