Skip to content

04 — Your first contribution to Someli-Designer

A walkthrough.

1. Pick a small first task

Good first tickets:

  1. Doc fix in ../../audit/Someli-Designer/.
  2. A copy / label change. Edit the text on a button or placeholder in a page.
  3. A console.log cleanup from ../../code-inspect/Someli-Designer.md.
  4. Verify a page is reachable for the right roles. Pick a page, check components/Navbar.vue's role gating, ensure the FE behaviour matches designer-api's access checks.
  5. Resolve a "Copy" / "New" duplicate page. Some pages have - Copy.vue or New.vue siblings. Verify with the team which is canonical and propose deletion of the dead one.

Avoid for your first PR: anything inside polotno-editor/ (the rebuild loop + the bundle commit are easy to mess up), anything touching middleware/axios.js, anything touching auth.

2. The edit-run-verify loop

cd ~/src/someli/Someli-Designer

# Branch
git checkout dev_des_app
git pull origin dev_des_app
git checkout -b feature/first-pr

# Run
yarn dev                          # http://localhost:3000

# Verify in the browser; iterate with HMR

For nuxt.config.js changes, restart yarn dev.

3. Entry points to know — a 20-minute reading tour

  1. nuxt.config.js (71 lines). The whole file.
  2. middleware/axios.js. Short. Read every line.
  3. store/index.js. The whole Vuex store — read all of it.
  4. components/Navbar.vue. Especially the role-gating block (commit 074b9ec).
  5. One page of your choosing — pages/dashboard.vue or pages/topics.vue are reasonable starts.
  6. polotno-editor/App.js — just to know what the React entry looks like. Don't dive deep yet.

After this, you have the whole shape.

4. Reading-around your task

  1. Grep across pages: 
    grep -ln 'mySearchTerm' pages/*.vue
grep -ln 'mySearchTerm' components/*.vue store/*.js
  2. Open the relevant audit doc:
  3. Auth flow → ../../audit/Someli-Designer/authentication-client.md
  4. Routing/state → ../../audit/Someli-Designer/routing-and-state.md
  5. API consumption → ../../audit/Someli-Designer/api-consumption.md
  6. Polotno → ../../audit/Someli-Designer/polotno-integration.md
  7. Cross-check the BE by opening ../../audit/designer-api/API-inventory.md for the endpoint.

5. Manual testing

No test suite.

  1. Browser happy path.
  2. Different roles (if your change is gated by role).
  3. Logged-out behaviour — does the page redirect or show a sensible error?
  4. Slow network (DevTools throttling).
  5. Visual: check the navbar in particular — Bootstrap 4-vs-5 conflicts often break it subtly.

6. Opening the PR

git add -p
git commit -m "Fix typo on topics page header"
git push -u origin feature/first-pr
# Open PR on github.com/Someli-ai/Someli-Designer → dev_des_app

PR description:

  • Why / what.
  • Screenshots for any UI change.
  • Manual test plan + which roles you tested.
  • Whether the BE needs a matching change.

7. After merge

The repo has no in-repo CI. Ask the team how the dev deploy works.

git checkout dev_des_app && git pull
git branch -d feature/first-pr

8. Common first-PR mistakes

Mistake Why it bites Avoid by
Editing the Polotno editor and not running yarn build The Nuxt app still loads the old polotno-bundle.js After every Polotno-editor edit, cd polotno-editor && yarn build and restart Nuxt dev
Editing the designer Polotno editor and assuming the customer Polotno editor got the same change They have diverged — see ../../audit/CODE-OVERLAP-MATRIX.md § 6 Decide if the customer copy also needs the change
Adding a nav link without role gating Wrong roles see it Add a v-if gated on role_type in Navbar.vue
Adding a this.$axios call inside created() instead of mounted() created runs before the auth state is resolved Use mounted() (or watch $auth.loggedIn)
Confusing baseURL (this repo's env var) with API_URL (customer-app's env var) Different names for the same concept Read nuxt.config.js first
Picking a page that has multiple *New.vue / *Copy.vue siblings, editing the wrong one The team uses one canonical; your change is invisible Confirm which is canonical via the team
Assuming a Vuex sub-module exists (because someli-platform has them) There are no sub-modules here All state is in store/index.js

Next

→ 05-where-to-look.md.