Toy-store app

Simple e-commerce store app with custom headless frontend. Data gathered from a real Shopify store. The goal of the project was to learn the Shopify API and to get better at using Nuxt, GraphQL and Tailwind.

Live: https://jm-toy-store.vercel.app/ hosted on Vercel (Paris, France, West - cdg1).

Project includes: headless frontend, third party data, SSR, routing, i18n, dark mode, UI library

For the further development: accessibility, testing

Technologies

• Backend (as a service): GraphQL Shopify API
• Frontend: Nuxt 3, Vue 3, TypeScript, GraphQL, Pinia, Vue Router, i18n, Storefront UI component library (Vue with Tailwind), lodash
• Deployment: Vercel
• Third party services/libraries: Shopify, Storefront UI

Installation

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

Production

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.