Google Sheet Embedded App Using nuxt

How to run the project:

Requirements:

• See the requirements page: https://developer.youcan.shop/apps/embedded_app/getstarted#requirements
• Make sure you have a MySQL server running, you can either use MAMP, WAMP, or a Docker MySQL image.

Getting Started 🚀:

• Clone the repo
• Copy the contents of .env.example into a .env file and fill their values
• cd into the project
• Run pnpm install to install the dependencies
• Run youcan auth login to authenticate with YouCan
• Run pnpm prisma migrate dev to generate the database and its tables.
• Run youcan app install to install the app on your dev store.
• Run pnpm dev to start the project and sync your settings with your partners app settings

Description:

youcan google sheet is a partner embedded app utilize google service and youcan service to:
create, update, delete, sync orders to the parner Google Spread Sheets using its own OAuth2 Credentials

MVP Demo

Infra-structure

Backend ("/server" dir):

- Composables : App Logic (auto-imported)

• Service Layer : Bussiness logic
• Repository Layer : DB logic

- Utils : Helpers (auto-imported)

• Types
• Validator
• Schemas : Validation Schemas
• Handler : (Response, Async, Sync, Catcher) and Error Handling

- Routes : Dir Based Routes

Frontend ("/" root dir):

SSR based

• Assets: Css
• Components
• Composables : Reusable Logic
• Layouts
• Pages
• Public: static Imgs
• Types

Request Cycle:

both frontend and backend is decoupled

• frontend: based on nuxt
• backend: based on nitroJS
• they can be (separated/attached at same time) :
  • separated to microServices
  • attached and share something like: error state: useError, sendError acc to the below pic

Response Shape :

same as nuxt response

{
  "statusCode": number,
  "statusMessage": string,
  "data": any,
  "stack": [] //error stack empty if debug is disabled
}