≪ View Page

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
pub:development [25.09.2024 12:24] – ↷ Page moved from development to pub:development Predrag Tasevskipub:development [14.07.2026 09:12] (current) – [Tools and Technologies] add AI / LLM Predrag Tasevski
Line 1: Line 1:
 ====== Introduction to Development ====== ====== Introduction to Development ======
  
-At Unicis, our development process is the backbone of creating secure and compliant solutions. This section outlines our methodology, team structure, and best practices to ensure our products meet the highest standards.+At Unicis, our development process is the backbone of creating secure, accessible, and compliant solutions. This page outlines our methodology, team structure, standards, and best practices. 
 + 
 +<WRAP info> 
 +**Last updated:** 2026-06-12 — UX/UI Redesign, Dashboard & Accessibility release (Direction B design system, WCAG 2.1 AA, 7-locale i18n, responsive design).\\ 
 +Full testing and accessibility procedures: [[pub:development:testing|Testing & QA Guide]] 
 +</WRAP>
  
 ====== Development Philosophy and Approach ====== ====== Development Philosophy and Approach ======
Line 7: Line 12:
 [[https://en.wikipedia.org/wiki/Agile_software_development|Agile]], but not limited to and not strictly by the book. [[https://en.wikipedia.org/wiki/Agile_software_development|Agile]], but not limited to and not strictly by the book.
  
-++++ Iterative, incremental, and evolutionary |  +++++ Iterative, incremental, and evolutionary | 
-Agile development methodologies divide product development into small, incremental iterations known as sprints, which typically span from one to four weeks. Each sprint involves a cross-functional team engaged in planning, analysis, design, coding, unit testing, and acceptance testing, culminating in a functional product demonstration to stakeholders. This approach minimizes initial planning, reduces overall risk, and enables the product to swiftly adapt to modifications. The goal is to make a release that is minimally buggy, so that issues can be fixed quickly. Agile methodologies have several key advantages, including a faster time to market and a reduced risk of developing products that do not meet user requirements.+Agile methodologies divide product development into sprints (1–4 weeks). Each sprint involves planning, analysis, design, coding, unit testing, and acceptance testing. This approach minimises initial planning, reduces risk, and enables the product to adapt quickly.
 ++++ ++++
  
-++++ Efficient and face-to-face communication |  +++++ Efficient and face-to-face communication | 
-The [[https://en.wikipedia.org/wiki/Agile_software_development|sixth principle]] of the Agile Manifesto stresses the importance of face-to-face conversation as the most effective way to convey information within a development team. This idea was written before video conferencing was common, but it still suggests team co-location for better communication and team identity. During the COVID-19 pandemic, research has demonstrated that effective remote working tools make co-location less critical. Each team should have a customer representative (product owner in Scrum) to answer questions and align priorities, ensuring stakeholder satisfaction and optimizing ROI. Agile development also relies on information radiators, which are large, visible displays showing the project’s status (at Unicis we use OpenProject).+The sixth principle of the Agile Manifesto stresses face-to-face conversation. Each team should have a customer representative (product owner) to answer questions and align priorities. At Unicis we use OpenProject for project tracking.
 ++++ ++++
  
-++++ Very short feedback loop and adaptation cycle |  +++++ Very short feedback loop and adaptation cycle | 
-In agile development, the daily stand-up, or daily scrum, is a brief 15-minute meeting where team members review progress, plans, and impediments. Simple questions are used to keep the meeting short, with detailed discussions postponed until afterward.+Daily stand-ups (15 minutes) where team members review progress, plans, and impediments.
 ++++ ++++
  
-++++ Quality focus |  +++++ Quality focus | 
-Agile development often employs tools and techniques like continuous integration, automated testing, pair programming, and test-driven development to improve quality and agility. These practices focus on building quality from the start and demonstrating software to customers regularly, at least by the end of each iteration.+Continuous integration, automated testing, and test-driven development — including accessibility, performance, and internationalisation from day one.
 ++++ ++++
  
Line 26: Line 31:
 ====== Development Team Structure ====== ====== Development Team Structure ======
  
-^Role      ^Responsibilities                                                                                                                                                                                                                                                                                                        ^ +^Role      ^Responsibilities ^ 
-|Developers|Agile developers are in charge of writing and testing code, working with team members, adapting to changes, maintaining documentation, and improving processes and skills.                                                                                                                                              | +|Developers|Write and test code, participate in code review, meet accessibility and i18n requirements, maintain documentation.| 
-|Designers |Designers in agile development create user interfaces, make sure everything works well for users, work with developers and other people involved, get feedback from users, and change designs throughout the process.                                                                                                   | +|Designers |Maintain the Direction B design system, produce responsive UI, validate WCAG 2.1 AA contrast and touch-target requirements.| 
-|DevOps    |DevOps responsibilities include managing the software development lifecycle, facilitating continuous integration and continuous deployment (CI/CD), ensuring system reliability and performance, working with development and operations teams, monitoring system health, and managing infrastructure and configuration.| +|DevOps    |Manage CI/CD, system reliability, infrastructure, and deployment pipelines.| 
-|Test / QA |The job of a test/QA person is to make plans for testing, find and report bugs, make sure the software works well, work with other developers, check fixes, and keep getting better at testing.                                                                                                                         |+|Test / QA |Write Jest unit tests and Playwright E2E suites, run accessibility audits, verify responsive behaviour at all breakpoints.| 
  
 ====== Development Process ====== ====== Development Process ======
  
-++++ Project Planning |  +++++ Sprint Planning | 
-A process that changes constantly and adapts to customer needs and business goals.+Detailed planning of tasks ensuring alignment with project goals and acceptance criteria — including accessibility and responsive design criteria where applicable.
 ++++ ++++
  
-++++ Roadmapping |  +++++ Code Review | 
-Aligns long-term goals with development milestones.+Peer reviews to maintain high code quality. Every pull request must pass TypeScript type-checks, ESLint, and the full automated test suite before merge.
 ++++ ++++
  
-++++ Sprint Planning |  +++++ Testing | 
-Detailed planning of tasks for each sprint, ensuring alignment with project goals.+Combination of automated (Jest, Playwright) and manual testing to ensure functionality, performance, security, accessibility, and responsiveness. See [[pub:development:testing|Testing & QA Guide]].
 ++++ ++++
  
-++++ Code Review and Quality Assurance |  +++++ CI/CD Pipeline | 
-Work together to check the code to make sure it follows the rules, finds problems early, and keeps the software good all the time.+GitLab CI (primary) / GitHub Actions (Community Edition): runs tsc --noEmit, ESLint, Jest unit tests, and Playwright E2E on every pull request. Deployment via CapRover. See [[pub:development:devops|DevOps]] for full pipeline docs.
 ++++ ++++
  
-++++ Code Review |  
-Peer reviews to maintain high code quality. 
-++++ 
  
-++++ Testing |  +====== Accessibility Standards — WCAG 2.1 AA ======
-Combination of automated and manual testing to ensure functionality, performance, and security. +
-+++++
  
-++++ Continuous Integration/Continuous Deployment (CI/CD) |  +WCAG 2.1 Level AA is a **hard requirement** for all new and redesigned pages. Accessibility is treated as a first-class requirement, not an afterthought.
-Methodology that makes it easier to integrate, test, and deploy code changes. +
-+++++
  
-++++ CI/CD Pipeline |  +===== Core Requirements =====
-Automated testing and deployment processes to ensure quick and reliable delivery. +
-+++++
  
 +^ Criterion ^ Requirement ^ Standard ^
 +|Language attribute|Every page sets `<html lang>` from the SSR locale.|3.1.1|
 +|Colour contrast|Minimum 4.5:1 for normal text; 3:1 for large text and UI components.|1.4.3 / 1.4.11|
 +|Keyboard navigation|All interactive elements reachable and operable via keyboard.|2.1.1|
 +|Focus indicators|Visible focus ring on all focusable elements.|2.4.7|
 +|Touch targets|Minimum 44 × 44 CSS px for all interactive controls.|2.5.5|
 +|ARIA roles|Correct roles on tabs (tablist/tab/tabpanel), dialogs (dialog, aria-modal), charts (role="img").|4.1.2|
 +|Form labels|All inputs have label or aria-label; errors use aria-invalid + aria-describedby.|3.3.1 / 3.3.2|
 +|Modal dialogs|Focus moves to modal on open; Tab trapped inside; Escape closes; focus returns on close.|2.4.3|
 +|Icons / images|Decorative icons carry aria-hidden="true"; informational icons carry aria-label.|1.1.1|
 +|External links|Include (opens in new tab) as sr-only text.|2.4.4|
  
-====== Tools and Technologies ======+===== Implemented in 2026-06-12 Release =====
  
-===== Programming Languages and Frameworks =====+  * <html lang> set from SSR locale on every page 
 +  * Chart.js canvases wrapped in role="img" with descriptive aria-label 
 +  * Mobile sidebar rewritten as accessible dialog: role="dialog", aria-modal, focus-on-open, Escape, Tab focus trap 
 +  * Dashboard tab bar: full ARIA tab pattern (tablist, tab, tabpanel) 
 +  * Notification bell aria-label is dynamic with unread count; badge carries aria-hidden 
 +  * Webhook form: fieldset+legend for events; aria-invalid, aria-describedby, role="alert" for errors 
 +  * All icon-only buttons carry aria-label; active domain health cards carry aria-pressed 
 +  * Content text colour raised to text-slate-500 across all key areas to meet 4.5:1 contrast ratio
  
-Our stack includes Development Tools: Version control, project management, team communication, IDE’s.+See [[pub:development:testing#accessibility_testing|Testing & QA Guide → Accessibility]] for the full audit checklist.
  
-CI/CD Tools: 
  
-====== Documentation ======+====== Design System — Direction B ======
  
-<WRAP info> **Importance of Documentation**\\ +All modules use the **Direction B** design language. The `design.md` file in the repository root is the authoritative reference.
-Ensures clarity, facilitates onboarding, and maintains consistency. </WRAP>+
  
-===== Types of Documentation =====+===== Principles =====
  
-Our organization has a lot of different needs and audiences. Internally, we maintain comprehensive technical documentation that is specifically tailored for developers, ensuring clarity and guidance throughout the development process. For end-users, we offer user-friendly guides and manuals that simplify product understanding and usage. Our API documentation is comprehensive, ensuring seamless integration with third-party developers. To ensure quality, we prioritize regular updates and thorough reviews, ensuring all documentation remains current, accurate, and valuable to our stakeholders and users alike.+  * **Calm and professional** — avoid loud colours, excessive borders, or decorative noise 
 +  * **Consistent token set** — use Tailwind tokens (slate-*, ub-blue, ub-green, ub-purple, ub-amber, ub-red); never hardcode hex values 
 +  * **Dark mode** — every component must look correct in both light and dark mode 
 +  * **Responsive by default** — verify at 375 px (mobile), 768 px (tablet), and 1280 px (desktop)
  
-====== Best Practices and Standards ======+===== Key Component Patterns =====
  
-===== Coding Standards =====+^Pattern^Guidance^ 
 +|Page shell|bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700| 
 +|Table headers|text-[11px] font-semibold uppercase tracking-wider text-slate-500| 
 +|Multi-step dialogs|Sticky footer: flex flex-col overflow-hidden on DialogContent; flex-1 min-h-0 overflow-y-auto on body div| 
 +|Task picker|Use Combobox (not Select) — provides search, truncation, and Radix portal| 
 +|Buttons|Shadcn Button — do not use DaisyUI btn classes in new code| 
 +|Tables|Nested pattern: overflow-hidden rounded-xl outer / overflow-x-auto inner|
  
-Adhering to consistent coding practices is fundamental in maintaining code quality and readability across our development teams. By following established guidelines and conventions, we ensure that our codebase is cohesive, maintainable, and easy to collaborate on. 
  
-===== Security Practices =====+====== Internationalisation (i18n) ======
  
-Security is paramount in safeguarding sensitive data and ensuring compliance with industry regulations. Implementing robust security measures, such as encryption protocols, access controls, and regular security audits, helps mitigate risks and protect our systems from potential vulnerabilities.+Unicis Platform supports **7 locales**: English (en), French (fr), German (de), Spanish (es), Italian (it), Japanese (ja), Portuguese (pt). Italian, Japanese, and Portuguese were added in the 2026-06-12 release with 880+ keys per language.
  
-===== Performance Optimization =====+===== Rules for Developers =====
  
-Optimizing performance involves employing techniques like code refactoring, caching strategies, and efficient algorithms to enhance system responsiveness and resource utilization. By continually monitoring and optimizing our applications, we strive to deliver optimal user experiences and reduce operational costs.+  * Never hardcode English strings in components — always use t('key') 
 +  * Namespace prefix syntax (t('tia:key')) requires the namespace in the hook: useTranslation(['common', 'tia']) 
 +  * Every page must list in serverSideTranslations all namespaces needed by any dialog it can open 
 +  * New keys must be added to **all 7 locale files** before the PR is merged 
 +  * Use {{count}} and {{status}} interpolation — never concatenate translated strings
  
-===== Scalability Considerations =====+===== Page Namespace Reference =====
  
-Ensuring scalability involves designing our systems to handle increasing workloads and user demands without compromising performance or reliability. Through scalable architecture patterns, load testing, and cloud infrastructure management, we prepare our products to grow seamlessly as our user base expands.+^Page^Required namespaces^ 
 +|rpa.tsx|common, rpa, tia, pia| 
 +|tia.tsx|common, tia| 
 +|pia.tsx|common, pia| 
 +|csc.tsx|common, csc| 
 +|risk-management.tsx|common, rm| 
 +|iap/index.tsx + iap/admin.tsx|common, iap|
  
-===== Additional Resources ===== 
  
-For further best practices, we adhere to the principles outlined in the [[https://12factor.net/|12 Factor App methodology]] which guides our approach to building modern, scalable applications. Moreover, we implement the principles of the [[https://mvsp.dev/|Minimum Viable Secure Product (MVSP)]] framework to prioritize essential security measures from the earliest stages of product development.+====== Tools and Technologies ======
  
-====== Training and Development ======+^Layer^Technology^ 
 +|Framework|Next.js (Pages Router), TypeScript| 
 +|Styling|Tailwind CSS v4 JIT with custom design tokens| 
 +|Components|Shadcn/UI, Radix UI primitives, Lucide React icons| 
 +|Data fetching|SWR (all mutate() calls must be awaited)| 
 +|ORM / DB|Prisma + PostgreSQL| 
 +|Auth|BoxyHQ (SSO/SAML)| 
 +|i18n|next-i18next (7 locales)| 
 +|Unit tests|Jest| 
 +|E2E tests|Playwright| 
 +|CI/CD|GitLab CI · GitHub Actions · CapRover| 
 +|AI / LLM|Meta-Llama-3.3-70B-Instruct (OVH AI Endpoints)|
  
-===== Onboarding =====+See [[pub:development:devops|DevOps]] for full pipeline documentation.
  
-We prioritize comprehensive processes for integrating new developers into our team, ensuring they receive the necessary resources, training, and introductions to our workflows and tools. 
  
-===== Ongoing Training =====+====== Documentation ======
  
-Continued education and skill enhancement are facilitated through ongoing training programs that cover emerging technologies, industry best practices, and specialized areas relevant to our team’s goals and projects.+<WRAP info> 
 +**Importance of Documentation**\\ 
 +Ensures clarity, facilitates onboarding, and maintains consistency. 
 +</WRAP>
  
-===== Knowledge Sharing =====+  * **API docs** — maintained in openapi/openapi.yaml, regenerated to public/openapi.json via scripts/generate-openapi.ts 
 +  * **Design system** — design.md in the repository root is the authoritative Direction B reference 
 +  * **Handbook** — this wiki; updated with every major release
  
-We foster a collaborative environment by actively encouraging information exchange among team members. This includes regular meetings, workshops, and platforms for sharing insights, experiences, and solutions. 
  
-====== Feedback and Improvement ======+====== Best Practices and Standards ======
  
-===== Gathering Feedback =====+===== Coding Standards =====
  
-To maintain alignment with user expectations and stakeholder needs, we employ robust mechanisms for collecting and analyzing feedback through surveys, usability tests, and direct interactions with users.+No hardcoded English strings. No inline hex colours — use design tokens. No backwards-compatibility shims for removed code. No fire-and-forget mutate() calls — always await.
  
-===== Incorporating Feedback =====+===== Accessibility =====
  
-Feedback loops are integral to our development process, enabling us to iteratively update and improve our products. We prioritize actioning feedback promptly to address issues, refine features, and enhance overall user satisfaction.+WCAG 2.1 AA is a hard requirement. Run the [[pub:development:testing#accessibility_testing|accessibility checklist]] before every pull request.
  
-===== Continuous Improvement =====+===== Responsive Design =====
  
-We are committed to ongoing refinement of our processes and products. Through retrospectives, metrics analysis, and proactive problem-solving, we strive to achieve continuous improvement in efficiency, quality, and customer value.+Verify at 375 px, 768 px, and 1280 px before merge. Tables must scroll horizontally; dialogs must never overflow; toolbars must stack on narrow screens.
  
-====== Future Trends and Innovations ======+===== Security Practices =====
  
-===== Industry Trends =====+Encryption, access controls, and regular security audits. We follow [[https://mvsp.dev/|MVSP]] to prioritise essential security measures from the earliest stages of development.
  
-Staying ahead of industry trends and regulatory changes is essential. We invest in monitoring and analyzing market shifts, technological advancements, and evolving user expectations to anticipate and adapt to future demands.+===== Additional Resources =====
  
-===== New Technologies =====+  * [[https://12factor.net/|12 Factor App methodology]] 
 +  * [[https://mvsp.dev/|Minimum Viable Secure Product (MVSP)]] 
 +  * [[https://www.w3.org/WAI/WCAG21/quickref/|WCAG 2.1 Quick Reference]] 
 +  * [[pub:development:testing|Unicis Testing & QA Guide]] 
 + 
 + 
 +====== Release Process ====== 
 + 
 +===== Pre-release Checklist ===== 
 + 
 +  - [ ] New features have Jest unit tests; API endpoints have handler-level tests 
 +  - [ ] E2E Playwright test added for critical user flows 
 +  - [ ] WCAG 2.1 AA checklist passed (see [[pub:development:testing#accessibility_testing|Testing Guide]]) 
 +  - [ ] Verified at 375 px, 768 px, and 1280 px viewports 
 +  - [ ] All 7 locale files updated for new translation keys 
 +  - [ ] npx tsc --noEmit --skipLibCheck passes with no errors 
 +  - [ ] CHANGELOG updated 
 + 
 +===== Release History ===== 
 + 
 +^Release^Date^Highlights^ 
 +|UX/UI Redesign, Dashboard & Accessibility|2026-06-12|Direction B design system, WCAG 2.1 AA, IT/JA/PT locales added (880+ keys each), 62 Jest tests, 3 Playwright E2E suites, responsive design across all modules, KPI dashboard row, billing redesign| 
 +|Tasks|2026-05-31|Task import templates from CSC controls, Kanban board, CSC control status dialog| 
 + 
 + 
 +====== Training and Development ====== 
 + 
 +New developers must read design.md (Direction B design system) and [[pub:development:testing|Testing & QA Guide]] before their first PR. Continued education through training programmes covering accessibility standards, new platform features, and industry best practices. 
 + 
 + 
 +====== Feedback and Improvement ======
  
-Exploration and adoption of innovative tools and frameworks are actively encouraged to enhance our technical capabilities and maintain competitiveness in the market. We evaluate new technologies through proofs of concept and pilot projects.+We collect feedback through surveys, usability tests, and direct user interaction. Retrospectives, metrics analysis, and proactive problem-solving drive continuous improvement in efficiency, quality, and customer value.
  
-===== Encouraging Innovation ===== 
  
-We nurture a culture of innovation by empowering team members to propose and experiment with new ideas. This includes dedicated time for research and development, cross-functional collaboration, and recognition of innovative contributions.+{{tag>agile development best_practice framework training CI/CD sprint DevOps code_review testing accessibility WCAG i18n responsive direction-b design-system}}