{"id":15103763,"url":"https://github.com/gregrickaby/vue-commerce-lab","last_synced_at":"2025-10-23T00:30:28.001Z","repository":{"id":218380553,"uuid":"746241678","full_name":"gregrickaby/vue-commerce-lab","owner":"gregrickaby","description":"🛍️ Experimental e-comm dashboard built with Laravel, Vue.js, Inertia.js, and TailwindCSS.","archived":false,"fork":false,"pushed_at":"2024-11-06T17:53:59.000Z","size":1503,"stargazers_count":0,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-30T16:40:37.688Z","etag":null,"topics":["atomic-design","github-actions","inertiajs","laravel10","phpunit","storybook","tailwindcss","typescript","vitest","vue3","ziggy"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregrickaby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-21T13:51:24.000Z","updated_at":"2024-09-29T20:32:25.000Z","dependencies_parsed_at":"2024-06-24T13:49:36.309Z","dependency_job_id":null,"html_url":"https://github.com/gregrickaby/vue-commerce-lab","commit_stats":null,"previous_names":["gregrickaby/laravel-vue-inertia-example","gregrickaby/vue-commerce-lab"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fvue-commerce-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fvue-commerce-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fvue-commerce-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fvue-commerce-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregrickaby","download_url":"https://codeload.github.com/gregrickaby/vue-commerce-lab/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237754151,"owners_count":19360654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","github-actions","inertiajs","laravel10","phpunit","storybook","tailwindcss","typescript","vitest","vue3","ziggy"],"created_at":"2024-09-25T19:41:56.961Z","updated_at":"2025-10-23T00:30:27.562Z","avatar_url":"https://github.com/gregrickaby.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueCommerceLab\n\n## Project Overview 🚀\n\nThis repository houses an experimental E-commerce dashboard that serves as a practical application for learning and implementing Laravel. I scaffolded this with [Laravel Breeze](https://laravel.com/docs/10.x/starter-kits#breeze-and-inertia) and use [Laravel Valet](https://laravel.com/docs/10.x/valet#installation) for local development.\n\n### Key Features 🛠\n\n-   **CRUD Operations**: Comprehensive Create, Read, Update, and Delete functionalities for products and customers, showcasing Laravel's robust back-end capabilities.\n-   **[Laravel 10](https://laravel.com/docs/10.x)**: A powerful PHP framework for building scalable web applications with a clean, expressive syntax.\n-   **[TypeScript](https://www.typescriptlang.org/)**: A superset of JavaScript that adds static type definitions, enabling a more robust development experience.\n-   **[Vue.js 3](https://vuejs.org/guide/introduction.html)**: A dynamic and reactive frontend built with Vue.js, offering an engaging user experience.\n-   **[Ziggy](https://github.com/tighten/ziggy)**: Exposes Laravel's named server-side routes via a global `route()` function, allowing for easy route generation in Vue components.\n-   **[Inertia.js](https://inertiajs.com/)**: Bridges Laravel and Vue.js, enabling server-side rendering and client-side navigation without page reloads.\n-   **[TailwindCSS](https://tailwindcss.com/)**: A utility-first CSS framework used for designing sleek, responsive layouts with speed and efficiency.\n-   **[Storybook](https://storybook.js.org/)**: A development environment for UI components, allowing for rapid iteration and testing.\n-   **[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/):** A methodology for designing UIs with a focus on reusability and scalability.\n-   **Tests:** Unit tests for all models and controllers using PHPUnit, and component tests for Vue.js components using Vitest and Vue Test Utils.\n-   **Linting and Formatting:** Automatic linting and formatting for PHP, JavaScript, CSS and Vue.js files.\n-   **Github Actions:** Continuous integration and testing with Github Actions.\n\n### Learning Outcomes 📚\n\n-   Mastering Laravel's MVC architecture for building scalable web applications.\n-   Implementing SPA behaviors in Laravel with Vue.js and Inertia.js.\n-   Developing intuitive UIs with Tailwind CSS.\n-   Understanding state management and reactivity in Vue.js.\n-   Grasping the principles of RESTful API design and CRUD operations in Laravel.\n-   Writing unit tests for models and controllers with PHPUnit and Vitest.\n\n### Project Sections 🔍\n\n-   **Products**: Includes features like product listing, adding new products, editing, and deleting.\n-   **Customers**: Manages customer data with functionalities for adding, viewing, editing, and removing customer records.\n-   **Orders**: Allows users to place orders for products, with a dedicated page for viewing all orders.\n-   **Reports**: Provides a dashboard for viewing sales reports and other metrics.\n\n### Motivation 💡\n\nThis project serves as a comprehensive example for anyone interested in developing full-featured web applications using these technologies.\n\n---\n\n## Installation\n\nClone the repository (into your Valet sites directory):\n\n```bash\ngit clone git@github.com:gregrickaby/vue-commerce-lab.git\n```\n\nInstall dependencies:\n\n```bash\ncomposer install \u0026\u0026 npm install\n```\n\nCreate `.env` file:\n\n```bash\ncp .env.example .env\n```\n\nCreate `database.sqlite` file:\n\n```bash\ntouch database/database.sqlite\n```\n\nGenerate application key:\n\n```bash\nphp artisan key:generate\n```\n\nRun a migration:\n\n```bash\nphp artisan migrate:fresh\n```\n\nSeed the database:\n\n```bash\nphp artisan db:seed\n```\n\nSet the PHP version to 8.3:\n\n```bash\nvalet isolate php@8.3\n```\n\nSecure the site:\n\n```bash\nvalet secure\n```\n\nStart development server:\n\n```bash\nnpm run dev\n```\n\nVisit the site: \u003chttps://vue-commerce-lab.test\u003e and login with the following credentials:\n\n-   user: \u003cadmin@vuecommercelab.com\u003e\n-   pass: `password`\n\n---\n\n## Laravel\n\n### Models\n\nModels are located in the `app/Models` directory. Each model has a corresponding factory and seeder in the `database/factories` and `database/seeders` directories.\n\nModels are responsible for managing the data of the application. They receive input from the controller, validate it, then send it to the database.\n\n### Views\n\nThis application uses Vue and Inertia, so the views are in the `resources/js/pages` directory and routed via the [web.php](https://github.com/gregrickaby/vue-commerce-lab/blob/main/routes/web.php) file.\n\nViews are responsible for displaying the data to the user. They receive data from the controller, then render it to the browser.\n\n### Controllers\n\nControllers are located in the `app/Http/Controllers` directory. Each controller has a corresponding test in the `tests/Feature` directory\n\nControllers are responsible for handling requests and returning responses. They receive input from the user, validate it, then pass it to the model.\n\n### Routes\n\nRoutes are located in the `routes` directory. The `web.php` file contains all the routes for the application.\n\n---\n\n## Vue.js\n\nVue.js files are located in the `resources/js` directory.\n\n### Directory Structure\n\nThe directory structure follows standard Laravel conventions, with the addition of a `types` directory for TypeScript interfaces and types, and a `utils` directory for utility and helper functions.\n\n```tree\n├── resources\n│   ├── css\n│   │   └── app.css \u003c-- TailwindCSS\n│   ├── js\n│   │   ├── Components\n│   │   │   ├── Atoms\n│   │   │   │   ├── ApplicationLogo\n│   │   │   │   │   ├── ApplicationLogo.stories.ts \u003c-- Storybook\n│   │   │   │   │   ├── ApplicationLogo.test.ts \u003c-- Test\n│   │   │   │   │   ├── ApplicationLogo.test.ts.snap \u003c-- Snapshot\n│   │   │   │   │   └── ApplicationLogo.vue \u003c-- Vue Component\n│   │   │   ├── Molecules\n│   │   │   ├── Organisms\n│   │   ├── Layouts\n│   │   ├── Pages\n│   │   │   ├── Customers\n│   │   │   │   ├── Create.vue\n│   │   │   │   ├── Index.vue\n│   │   │   │   └── {customer} \u003c-- Dynamic route\n│   │   │   │       ├── Edit.vue\n│   │   │   │       └── Show.vue\n│   │   ├── app.ts \u003c-- Vue app\n│   │   ├── types\n│   │   │   └── index.d.ts \u003c-- Typescript interfaces and types\n│   │   └── utils\n│   │       └── index.ts \u003c-- Utility and helper functions\n│   └── views\n│       ├── app.blade.php\n│       └── welcome.blade.php\n```\n\n### Dynamic Routes\n\nFolders with a `{}` around them are dynamic routes. For example, `/Pages/Customers/{customers}/Edit.vue` is a dynamic route that will match any customer ID. The ID is then available in the `Edit.vue` component.\n\n---\n\n## Tests\n\nThis application is equipped with both PHPUnit and Vitest for testing. It also leverages Github Actions for continuous integration and testing, and Storybook for developing UI components in isolation.\n\n### PHPUnit\n\nThis application is equipped with PHPUnit tests for all models and controllers. PHP tests are located in the `/tests` directory:\n\n```tree\n├── tests\n│   ├── Feature\n│   │   ├── Auth\n│   │   │   ├── AuthenticationTest.php\n│   │   └── ExampleTest.php\n│   └── Unit\n│       └── ExampleTest.php\n```\n\nLaravel routes return Inertia responses that depend on the presence of Vue components. Without the built front-end assets, these components won't be available, leading to failures in tests that make requests to these routes. To avoid this, **you must run the development server in the background while running tests**.\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nRun PHPUnit tests with:\n\n```bash\nphp artisan test\n```\n\nRun a specific test with:\n\n```bash\nphp artisan test --filter=CustomerTest\n```\n\n### Vue Component Testing\n\nThis application is equipped with both [Vitest](https://vitest.dev/) (official test runner) and [Vue Test Utils](https://test-utils.vuejs.org/guide/) (official testing library) for testing Vue components. Tests must be placed next to the component and named `ComponentName.test.ts`:\n\n```tree\n├── resources\n│   ├── js\n│   │   ├── Components\n│   │   │   ├── Atoms\n│   │   │   │   ├── ApplicationLogo\n│   │   │   │   │   ├── ApplicationLogo.stories.ts \u003c-- Storybook\n│   │   │   │   │   ├── ApplicationLogo.test.ts \u003c-- Test\n│   │   │   │   │   ├── ApplicationLogo.test.ts.snap \u003c-- Snapshot\n│   │   │   │   │   └── ApplicationLogo.vue \u003c-- Vue Component\n```\n\nYou can run the tests with:\n\n```bash\nnpm run test\n```\n\nVitest will run the tests in watch mode, so you can make changes to the component and see the results in real-time.\n\n#### Writing Component Tests\n\nComponent tests are written in TypeScript and use the [Vitest API](https://vitest.dev/api/) for assertions. Here's an example:\n\n```ts\nimport ApplicationLogo from '@/Components/Atoms/ApplicationLogo/ApplicationLogo.vue'\nimport { mount } from '@vue/test-utils'\nimport { describe, expect, test } from 'vitest'\n\n/**\n * Define a test suite.\n *\n * @see https://vitest.dev/api/#describe\n */\ndescribe('ApplicationLogo', () =\u003e {\n    /**\n     * Mount the component.\n     *\n     * @see https://vue-test-utils.vuejs.org/api/#mount\n     */\n    const wrapper = mount(ApplicationLogo)\n\n    /**\n     * Assert the component renders.\n     *\n     * @see https://vitest.dev/api/expect.html\n     */\n    test('component renders', () =\u003e {\n        expect(wrapper).toBeTruthy()\n    })\n\n    /**\n     * Assert the component is a SVG.\n     */\n    test('component is SVG', () =\u003e {\n        wrapper.find('svg')\n    })\n\n    /**\n     * Assert the component matches the snapshot.\n     *\n     * @see https://vitest.dev/api/expect.html#tomatchsnapshot\n     */\n    test('component matches snapshot', () =\u003e {\n        expect(wrapper.html()).toMatchSnapshot()\n    })\n})\n```\n\n#### Helpful Links\n\n1. [Vitest API](https://vitest.dev/api/)\n2. [Vue Test Utils API](https://test-utils.vuejs.org/api/)\n\n### Github Actions\n\nGithub Actions will also [run the tests](https://github.com/gregrickaby/vue-commerce-lab/actions) on every PR to the `main` branch.\n\n---\n\n## Linting\n\n### ESLint\n\nThis application is equipped with [ESLint](https://eslint.org/) and configured for parsing TypeScript. Automatic linting JavaScript and Vue files happens `on_save`.\n\nYou can also run lint manually:\n\n```bash\nnpm run lint\n```\n\n### Stylelint and TailwindCSS (Prettier)\n\nThis application is equipped with [Stylelint](https://stylelint.io/) and the [Prettier plugin for TailwindCSS](https://github.com/tailwindlabs/prettier-plugin-tailwindcss). Automatic linting and formatting happens `on_save`.\n\n### Prettier and Pint\n\nAutomatic formatting for both JavaScript and PHP files is configured for `on_save`. Please see the VSCode settings and extension [configs](https://github.com/gregrickaby/vue-commerce-lab/tree/main/.vscode) for more information.\n\nManually run Prettier and Pint with:\n\n```bash\nnpm run format \u0026\u0026 composer run lint\n```\n\n---\n\n## Storybook\n\n\u003e View Storybook: \u003chttps://gregrickaby.github.io/vue-commerce-lab/\u003e 👀\n\nThis application is equipped with [Storybook](https://storybook.js.org/) for developing UI components in isolation. Stories must be written in [CSF](https://storybook.js.org/docs/api/csf), placed next to the component in the `resources/js/Components` directory. Stories must be named `ComponentName.stories.ts`:\n\n```tree\n├── resources\n│   ├── js\n│   │   ├── Components\n│   │   │   ├── Atoms\n│   │   │   │   ├── ApplicationLogo\n│   │   │   │   │   ├── ApplicationLogo.stories.ts \u003c-- Storybook\n│   │   │   │   │   ├── ApplicationLogo.test.ts \u003c-- Test\n│   │   │   │   │   ├── ApplicationLogo.test.ts.snap \u003c-- Snapshot\n│   │   │   │   │   └── ApplicationLogo.vue \u003c-- Vue Component\n```\n\nRun Storybook with:\n\n```bash\nnpm run storybook\n```\n\nBuild Storybook with:\n\n```bash\nnpm run build:storybook\n```\n\n---\n\n## License\n\nThe MIT License (MIT). Please see [LICENSE](LICENSE)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregrickaby%2Fvue-commerce-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregrickaby%2Fvue-commerce-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregrickaby%2Fvue-commerce-lab/lists"}