Architecture Overview¶

Tech stack¶

Concern	Choice	Version	Cite
Framework	Nuxt 2	^2.18.1 (CLI), ^2.15.8 (core)	`package.json`
View library	Vue 2	2.7.16 (pinned)	`package.json`
Mode	SPA (`ssr: false`)	n/a	`nuxt.config.js`
UI library	Bootstrap-Vue 2 + Bootstrap 5.3	^2.23.1, ^5.3.3	`package.json`, `nuxt.config.js` head script
HTTP client	`@nuxtjs/axios` ^5.13.6		`package.json`
Auth	`@nuxtjs/auth` ^4.9.1 + local strategy		`nuxt.config.js`
Cookies	`cookie-universal-nuxt`	^2.2.2	`package.json`
Polotno editor	React 18 + MobX-State-Tree + Polotno 2.13.10 (subproject)		`polotno-editor/package.json`
Form upload	filepond + plugins		`package.json`
Notifications	`vue-notification`, `vue-toastification`		`package.json`
Build	Nuxt 2's built-in webpack	n/a	implicit

Folder layout¶

Someli-Designer/
├── package.json                              # 38 deps (Vue/Nuxt 2 era), 1 devDep (npm-force-resolutions)
├── nuxt.config.js                            # 71 lines — SPA mode, auth strategy, modules
├── README.md                                 # Polotno editor workflow notes
├── Dockerfile                                # Multi-stage; uses EFS-mounted node_modules at runtime
├── package-lock.json
├── polotno-bundle.js (+ .map)                # built artifact of polotno-editor/
├── assets/                                   # CSS (blueprint, bootstrap, common)
├── components/                               # only 4 components (Navbar, Notification, skeletonCard, ToasterProgress)
├── helpers/                                  # (verify contents — likely small)
├── layouts/
│   ├── default.vue                           # Navbar + <nuxt/> + notification slots
│   └── blank.vue                             # bare layout for login-style pages
├── middleware/
│   ├── axios.js                              # axios interceptor — adds Apptype header
│   └── guest.js                              # redirects authenticated user away from guest-only pages
├── pages/                                    # 73 files, flat (no nested dirs)
├── plugins/
│   ├── customCommon.js
│   ├── common.js                             # registers BootstrapVue + Notifications (client-only)
│   └── hotjar.js                             # client-only; Hotjar tracking
├── polotno-editor/                           # React 18 + MobX subproject
│   ├── index.html / index.js / App.js / app.css
│   ├── package.json                          # 15 runtime deps
│   ├── alltemplatesPanel.js / templatesPanel.js / carousaltemplatesPanel.js
│   ├── brandkitPanel.js / customUploads.js / mediaGrid.js / Pexels.js / PexelVideos.js
│   ├── CustomPageControls.js / CustomWorkspace.js / icons.js / helper.js
│   ├── QrSection.js / ModalPortal.js
│   └── ... (the editor UI surface)
├── static/                                   # static assets (logos)
├── store/
│   └── index.js                              # single Vuex module, no sub-modules
└── .vscode/

Entry point — `nuxt.config.js`¶

export default {
  ssr: false,
  head: { /* title, meta, bootstrap.bundle.min.js from jsdelivr */ },
  css: ['@/assets/css/blueprint.css', '@/assets/css/bootstrap.css', '@/assets/css/common.css'],
  plugins: [
    '@/plugins/customCommon',
    { src: './plugins/common', ssr: false },
    { src: './plugins/hotjar', ssr: false },
  ],
  components: true,
  router: { middleware: 'axios' },
  buildModules: ['@nuxtjs/dotenv'],
  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@nuxtjs/auth', 'cookie-universal-nuxt'],
  axios: { baseURL: process.env.baseURL },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'webauthenticate', method: 'post', propertyName: 'data' },
          user: { url: 'me', method: 'get', propertyName: 'data' },
          logout: false
        }
      }
    }
  },
  build: { transpile: ['swr'] },
};

Notes:

ssr: false — pure SPA. No server-side rendering.
Global axios middleware: router.middleware: 'axios' mounts middleware/axios.js on every route navigation.
No serverMiddleware — unlike someli-platform/api/, this repo has no Express-handler scaffolding.
Auth logout: false — @nuxtjs/auth does not call a BE logout endpoint; logout is purely client-side (clear cookies, redirect).
bootstrap-vue/nuxt module — Vue components get Bootstrap-Vue helpers (b-navbar, b-nav-item, etc.).
Bootstrap 5 also loaded from CDN (cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js) for navbar JS. Double-loaded: Bootstrap-Vue brings Bootstrap 4 classes; the CDN brings Bootstrap 5. The Bootstrap 5 vs 4 conflict is likely the cause of any visual bug in the navbar.

Folder: `pages/` (flat)¶

73 files, no subdirectories. Conventions:

Page name	Purpose
`index.vue`	redirects to Login
`login.vue`	login form
`dashboard.vue`	landing
`topics.vue`, `topicsNew.vue`	topics management
`content_library.vue`, `master_library.vue`, `master_libraryNew.vue`	content libraries
`conditionedContent.vue`, `conditionedContentNew.vue`	conditioned content
`image_Library.vue`	image library
`automationTemplate.vue`, `nonAutomationTemplate.vue`, `tempsets.vue`, `carousaltemplates.vue`	template management
`templateEditor.vue`, `templateEditor1.vue`, `carousaltemplateEditor.vue`	editor UIs (Polotno mounts here)
`postEditor.vue`, `postcreator.vue`, `postdesigner.vue`, `mediaEditor.vue`, `MastermediaEditor.vue`, `PreproductionPostEditor.vue`	post-design UIs
`dynamicPost.vue`, `dynamicPost - Copy.vue`, `specialdynamicposts.vue`, `preProductionPost.vue`	dynamic posts
`Posts.vue`, `postsMismatching.vue`, `contentMismatching.vue`	post + content review
`PostColorCorrection.vue`, `TemplateColorCorrection.vue`	color correction
`TemplateConditioning.vue`, `topicvalidation.vue`	validation tools
`Template.vue`	(likely vestigial)
`News.vue`, `LatestNews.vue`	news feed
`popularSubjects.vue`, `subjects.vue`, `subjectsDemands.vue`, `subjectsBasedJobs.vue`, `generateSubject.vue`, `generatedSubjectContent.vue`	subject management
`prompts.vue`	AI prompt editor
`pdfToContent.vue`	PDF-to-content import
`sampleElements.vue`	(likely playground / demo)
`AutomationJobs.vue`, `jobs.vue`	jobs management
`reports.vue`, `userActivityLog.vue`, `userActivitySummary.vue`	reporting
`profile.vue`	user profile
`designer.vue`	designer landing
17 `AI-*.vue` pages	AI tools (FAQs, Quotes, Quiz, etc.) — most are commented out in the navbar

A flat 73-file pages/ directory is hard to navigate. Refactoring into pages/templates/, pages/content/, pages/posts/, pages/ai/, etc. would be a significant readability win.

Layouts¶

layouts/default.vue — Navbar + <nuxt/> + two notification slots (vue-notification)
layouts/blank.vue — no navbar, no notifications (used by login)

Middlewares¶

middleware/axios.js — axios interceptor: adds apptype header (base64 of process.env.APP_TYPE)
middleware/guest.js — for login pages: if already logged in (cookie userdetail present), restore the auth user and redirect to /

There is no auth.js middleware (despite @nuxtjs/auth providing one). The auth check is implicit via @nuxtjs/auth and the cookie. Pages don't declare middleware: 'auth' per the audit-time spot-checks — verify.

Store — `store/index.js`¶

Single Vuex module, no sub-modules:

export const strict = false;
const state = () => ({
  user: [],
  userdesignlist: [],
  alluserdesignlist: [],
  userfilterlist: [],
  BusinessGroupLists: [],
  defaultCategoriess: []
});
const actions = {
  async commonPagecount({ commit }, params) { ... },
  async getUserDesignList({ commit }, params) { ... },
  async getallUserDesignList({ commit }, params) { ... },
  // ... many more methods that hit the backend
};

The actions function as a giant API client — each method makes one BE call. someli-platform evolved from this pattern into feature-scoped modules (post/, chat/, etc.); Someli-Designer has not.

The single-file store will become unwieldy as the designer FE grows.

Coding conventions¶

Vue 2 single-file components (.vue)
BootstrapVue components throughout (<b-navbar>, <b-table>, etc.)
Direct DOM access via jQuery (loaded via Bootstrap CDN bundle)
No TypeScript
No linter / formatter configured
console.log for observability
Pages own most of their logic inline (since components/ only has 4 files)