<h2>What are the reasons and causes why developers do not implement end-to-end tests?&nbsp;</h2><p>There are many reasons why developers don't implement end-to-end tests, but it's important to remember that testing is a crucial part of software development. End-to-end tests are usually costly to implement and maintain, and sometimes, writing them to be both reliable and effective can be challenging.</p><p>Some of the reasons and causes why developers do not implement E2E tests are:</p><ol><li><strong>Lack of time</strong>: Developers often face time constraints during development and focus on implementing functionality rather than testing.</li><li><strong>Lack of resources</strong>: Teams may not always have a&nbsp;enough number of testing resources, such as human resources or financial means for test automation.</li><li><strong>Test complexity</strong>: End-to-end tests can be challenging to implement and maintain as they require testing of the integrated system, not just individual components. Setting up the testing environment and executing and evaluating tests can also be problematic.</li><li><strong>Focus on other test types</strong>: Developers can focus on other types of tests, such as unit tests or integration tests, which are simpler to implement and provide faster feedback.</li><li><strong>Insufficient motivation</strong>: If there is not enough emphasis on software quality or a lack of awareness of testing benefits, it can lead to a lack of motivation to implement end-to-end tests.</li></ol><p>Despite these reasons, it is important to understand that testing is key to ensuring software quality and minimizing errors. Implementing end-to-end tests can lead to more robust and reliable software products, which should be the goal of every developer.</p>

<h2>Why did we choose Cypress?&nbsp;</h2><p>Within our team, we had our first experience with the Selenium tool, often compared to Cypress. The setup and implementation of some scenarios using Selenium were relatively complicated, so we decided to give Cypress a try. When choosing between Selenium and Cypress, it is important to consider project needs and team skills. Selenium is versatile and scalable, while Cypress is optimized for modern web applications, offering simpler and faster test development. Therefore, we chose Cypress as it better suited our needs.</p><p>For more information about Cypress, <a href="https://docs.cypress.io/guides/overview/why-cypress">you can visit their blog</a>. Further details on Cypress architecture and key features can be found in the article:<a href="https://docs.cypress.io/guides/overview/key-differences"> Key differences.</a></p>

<h2>Testing organization</h2><p>After successfully installing Cypress into the project, the following file structure is created. More information about the structure and individual components can be found in this article: <a href="https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests">Writing and organizing tests.</a></p>

<h2>Cypress configuration</h2><p>Our recommendations for configuring individual options are as follows:</p><ul><li>If you observe high memory consumption during test execution, consider setting the option <strong>numTestsKeptInMemory</strong> to 0 to optimize it.</li><li>For optimization and resource saving during test execution, we found it useful to turn off video compression. → <strong>videoCompression: </strong>false.</li><li>Sometimes a test may fail for unknown reasons during execution. In such cases, using the <strong>retries</strong> option for test reruns has proven helpful. An optimal value for this problem is 3. More information can be found in the article: <a href="https://docs.cypress.io/guides/guides/test-retries">Test retries.</a>&nbsp;</li><li>Some tests may fail because Cypress "misses" an element within the time limit due to animation or asynchronous operations blocking the element's display. In this case, it is necessary to increase the <strong>defaultCommandTimeout</strong> to 6000.</li></ul><p>For more information about the basic and other options, you can refer to the article: <a href="https://docs.cypress.io/guides/references/configuration">Configuration</a>.</p>

<h3>Our configuration file</h3><pre><code class="language-json">import { defineConfig } from 'cypress'

export default defineConfig({
  projectId: '&lt;projectID&gt;',
  scrollBehavior: 'center',
  viewportWidth: 1920,
  viewportHeight: 1080,
  retries: 3,
  numTestsKeptInMemory: 10,
  videoCompression: false,
  screenshotOnRunFailure: false,
  e2e: {
    setupNodeEvents: (on, config) =&gt; {
		require('cypress-localstorage-commands/plugin')(on, config)
		require('./cypress/plugins/index.ts').default(on, config)
		require('@cypress/code-coverage/task')(on, config)
		on('before:browser:launch', (browser, launchOptions) =&gt; {
			// Chrome is used by default for test:CI script
			if (browser.name === 'chrome') {
				launchOptions.args.push('--disable-dev-shm-usage')
			} else if (browser.name === 'electron') {
				launchOptions.args['disable-dev-shm-usage'] = true
			}

			return launchOptions
		})
		return config
    },
	env: {
		auth_email: process.env.AUTH_EMAIL,
		auth_password: process.env.AUTH_PASSWORD,
		sign_in_url: process.env.SIGN_IN_URL
	},
	experimentalRunAllSpecs: true,
	baseUrl: 'http://localhost:3001',
	defaultCommandTimeout: 6000
  },
})</code></pre>

<blockquote><p>Examples of suite test and time test</p></blockquote><h3>TestSuite → describe, context | TestCase → it, specify</h3><p>More information can be found in the article: <a href="https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Writing-tests">Writing tests.</a></p><pre><code class="language-typescript">describe('Users crud operations', () =&gt; {
    it('Create user', () =&gt; {
      ...
    })

		it('Show user', () =&gt; {
      ...
    })

    it('Update user', () =&gt; {
      ...
    })

		it('Delete user', () =&gt; {
      ...
    })
})

// alebo

context('Users crud operations', () =&gt; {
    specify('Create user', () =&gt; {
      ...
    })

		specify('Show user', () =&gt; {
      ...
    })

    specify('Update user', () =&gt; {
      ...
    })

		specify('Delete user', () =&gt; {
      ...
    })
})</code></pre>

<h3>Naming convention of folders</h3><p>This naming convention and folder/test hierarchy model has proven effective for larger projects requiring the implementation of a significant number of tests.</p>

<h3>Hooks</h3><p>Within our team, we use hooks for authorization, token storage, and token retrieval to avoid logging in before each test, as tests are isolated.</p><pre><code class="language-typescript">before(() =&gt; {
	loginViaApi(email, password)
})

beforeEach(() =&gt; {
	// restore local storage with tokens and salon id from snapshot
	cy.restoreLocalStorage()
})

afterEach(() =&gt; {
	// take snapshot of local storage with new refresh and access token
	cy.saveLocalStorage()
})</code></pre><p>Hooks defined in the <span style="color:inherit;"><code>support</code></span> folder and the <span style="color:inherit;"><code>e2e.ts</code></span> file automatically run before each test suite. You can use this method when logging in.</p><pre><code class="language-typescript">describe('Hooks', () =&gt; {
	it('loginViaApi', () =&gt; {
		cy.log(`sign_in_url is ${Cypress.env('sign_in_url')}`)
		cy.log(`auth_email is ${Cypress.env('auth_email')}`)
		cy.log(`auth_password is ${Cypress.env('auth_password')}`)
		cy.apiAuth(Cypress.env('auth_email'), Cypress.env('auth_password'), Cypress.env('sign_in_url'))
	})
})</code></pre><p>An example function we use to obtain tokens needed for authorization during test execution.</p><pre><code class="language-typescript">export const loginViaApi = (user?: string, password?: string) =&gt; {
	cy.apiAuth(user || Cypress.env('auth_email'), password || Cypress.env('auth_password'), Cypress.env('sign_in_url'))
}</code></pre><p>Hooks can also run commands or functions to prepare data expected during tests. For more information, read the following article: <a href=" https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Hooks">Hooks</a>.</p>

<h3>Excluding and Including Tests</h3><p>More about excluding and including tests can be found in this article: <a href="https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Excluding-and-Including-Tests">Excluding and Including tests</a>.</p><h3>Debugging</h3><p>For more information about debugging, refer to the article: <a href="https://docs.cypress.io/guides/guides/debugging">Debugging</a>.</p>

<h2>Testing/data strategies</h2><p>Before executing each test, it is essential to have test data stored, for example, in a database. There are many ways to prepare this data before testing.&nbsp;</p><p>More information can be found in the article: <a href="https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Testing-strategies">Testing strategies</a>.</p><h3>Seeding</h3><p>Options for preparing data needed for individual tests.</p><pre><code class="language-typescript">describe('Users CRUD operations', () =&gt; {
  beforeEach(() =&gt; {
    // pred každým testom môžete spustiť príkaz, ktorý premaže databázu
		// a vytvorí nové záznamy
    cy.exec('npm run db:reset &amp;&amp; npm run db:seed')

    // vytvorenie používateľa
    cy.request('POST', '/user', {
      body: {
				// ... testovacie data
			},
    })
  })

	...
})</code></pre><p>&nbsp;For more information see the article: <a href="https://learn.cypress.io/advanced-cypress-concepts/database-initialization-and-seeding">Database initialization &amp; seeding</a>.</p>

<h3>Stubbing</h3><p>An example of intercepting a post request.</p><pre><code class="language-typescript">{
	...
	cy.intercept('POST', '/user/*', {
		statusCode: 200,
		body: {
			name: 'John Garfield'
		}
	}).as('createUser')
	...
}</code></pre><p>For more information, <a href="https://docs.cypress.io/guides/guides/stubs-spies-and-clocks">read here</a>.</p>

<h2>Best practices, tips and tricks</h2><h3>Selecting elements - a.k.a. selectors</h3><p>Example of a correct component identifier.</p><pre><code class="language-html">...
&lt;div className={cx('input-inner-wrapper', { 'to-check-changes': toCheck })}&gt;
				&lt;Input
					{...input}
					id={formFieldID(form, input.name)}
					{/* alebo */}
					data-cy={formFieldID(form, input.name)}
					className={cx('input', { 'input-filter': fieldMode === FIELD_MODE.FILTER })}
					onChange={onChange}
					onBlur={onBlur}
					addonBefore={addonBefore}
					size={size || 'middle'}
					onFocus={onFocus}
					value={input.value}
				/&gt;
&lt;/div&gt;
...</code></pre><p>Example of a command to set the value for a "pin" component. As you can see below, a unique ID is used to retrieve the element, which in our case consists of a unique form name and a field.</p><pre><code class="language-typescript">Cypress.Commands.add('setValuesForPinField', (form: string, key: string, value: string) =&gt; {
	const elementId: string = form ? `#${form}-${key}` : `#${key}`
	const nthInput = (n: number) =&gt; `${elementId} &gt; :nth-child(${n})`
	const pin = [...value]
	pin.forEach((char: string, index) =&gt;
		cy
			.get(nthInput(index + 1))
			.type(char)
			.should('have.value', char)
	)
})</code></pre>

<h3>Creating custom commands</h3><p>Example of how we use “custom commands” to select and set values for individual elements.&nbsp;</p><pre><code class="language-typescript">Cypress.Commands.add('selectOptionDropdownCustom', (form?: string, key?: string, value?: string, force?: boolean) =&gt; {
	const elementId: string = form ? `#${form}-${key}` : `#${key}`
	cy.get(elementId).click({ force })
	if (value) {
		// check for specific value in dropdown
		cy.get('.ant-select-dropdown :not(.ant-select-dropdown-hidden)', { timeout: 10000 })
			.should('be.visible')
			.find('.ant-select-item-option')
			.each((el: any) =&gt; {
				if (el.text() === value) {
					cy.wrap(el).click({ force })
				}
			})
	} else {
		// default select first option in list
		cy.get('.ant-select-dropdown :not(.ant-select-dropdown-hidden)', { timeout: 10000 }).should('be.visible').find('.ant-select-item-option').first().click({ force: true })
	}
})

Cypress.Commands.add('clickDropdownItem', (triggerId: string, dropdownItemId?: string, force?: boolean) =&gt; {
	cy.get(triggerId).click({ force })
	if (dropdownItemId) {
		// check for specific value in dropdown
		cy.get('.ant-dropdown :not(.ant-dropdown-hidden)', { timeout: 10000 })
			.should('be.visible')
			.find('.ant-dropdown-menu-item')
			.each((el: any) =&gt; {
				if (el.has(dropdownItemId)) {
					cy.wrap(el).click({ force })
				}
			})
	} else {
		// default select first item in list
		cy.get('.ant-dropdown :not(.ant-dropdown-hidden)', { timeout: 10000 }).should('be.visible').find('.ant-dropdown-menu-item').first().click({ force: true })
	}
})</code></pre><p>More information can be found in the article: <a href="https://docs.cypress.io/api/cypress-api/custom-commands">Custom commands</a>.</p>

<h3>Assigning Return Values</h3><p>Instead of defining constants and storing the selected element, it is necessary to use so-called aliases.</p><pre><code class="language-typescript">// DONT DO THIS. IT DOES NOT WORK
// THE WAY YOU THINK IT DOES.
const a = cy.get('a')

cy.visit('https://example.cypress.io')

// nope, fails
a.first().click()

// Instead, do this.
cy.get('a').as('links')
cy.get('@links').first().click()</code></pre><p>More information can be found in the article: <a href="https://docs.cypress.io/guides/core-concepts/variables-and-aliases">Variables and aliases</a>.</p>

<h3>Testing email notifications&nbsp;</h3><p>What if we need to test registration, including email confirmation or activation codes? In such cases, the "task plugin" is useful for loading emails from the mailbox.&nbsp;</p><p>In Cypress, it is possible to use the "task plugin" to perform "custom" tasks and modify the testing environment's behavior. These tasks can include various operations, such as accessing files, data manipulation, API calls, setting various variables, and more.&nbsp;</p><p>In our case, we use a "task" to load emails and retrieve activation codes. Below is an example of defining a task and its use in a test.</p><ul><li>example of a “task” → <strong>./plugins/index.ts</strong></li></ul><pre><code class="language-typescript">import axios from 'axios'

/**
 * @type {Cypress.PluginConfig}
 */
export default (on: any, config: any) =&gt; {
	on('task', {
		getEmail(email: string) {
			return new Promise((resolve, reject) =&gt; {
				axios
					.get(`http://localhost:1085/api/emails?to=${email}`)
					.then((response) =&gt; {
						if (response) {
							resolve(response.data)
						}
					})
					.catch((err) =&gt; {
						reject(err)
					})
			})
		}
	})

	return on
}</code></pre><ul><li>example test</li></ul><pre><code class="language-typescript">it('Sign up', () =&gt; {
		cy.intercept({
			method: 'POST',
			url: '/api/sign-up'
		}).as('registration')
		cy.visit('/')
		cy.wait('@getConfig').then((interceptionGetConfig: any) =&gt; {
			// check status code of login request
			expect(interceptionGetConfig.response.statusCode).to.equal(200)
			cy.clickButton(SIGNUP_BUTTON_ID, FORM.LOGIN)
			// check redirect to signup page
			cy.location('pathname').should('eq', '/signup')
			cy.setInputValue(FORM.REGISTRATION, 'email', userEmail)
			cy.setInputValue(FORM.REGISTRATION, 'password', user.create.password)
			cy.setInputValue(FORM.REGISTRATION, 'phone', user.create.phone)
			cy.clickButton('agreeGDPR', FORM.REGISTRATION, true)
			cy.clickButton('marketing', FORM.REGISTRATION, true)
			cy.clickButton(SUBMIT_BUTTON_ID, FORM.REGISTRATION)
			cy.wait('@registration').then((interceptionRegistration: any) =&gt; {
				// check status code of registration request
				expect(interceptionRegistration.response.statusCode).to.equal(200)
				// take local storage snapshot
				cy.saveLocalStorage()
			})
			// check redirect to activation page
			cy.location('pathname').should('eq', '/confirmation')

			cy.task('getEmail', userEmail).then((email) =&gt; {
				if (email &amp;&amp; email.length &gt; 0) {
					const emailHtml = parse(email[0].html)
					const htmlTag = emailHtml.querySelector('#confirmation-code')
					if (htmlTag) {
						cy.log('Confirmation code: ', htmlTag.text)
						cy.visit('/confirmation')
						cy.intercept({
							method: 'POST',
							url: '/api/confirmation'
						}).as('activation')
						cy.setValuesForPinField(FORM.ACTIVATION, 'code', htmlTag.text)
						cy.clickButton(SUBMIT_BUTTON_ID, FORM.ACTIVATION)
						cy.wait('@activation').then((interception: any) =&gt; {
							// check status code of registration request
							expect(interception.response.statusCode).to.equal(200)
							// take local storage snapshot
							cy.saveLocalStorage()
						})
					}
				}
			})
		})
	})</code></pre><p>For more information, read the article: <a href=" https://docs.cypress.io/api/commands/task">Task</a>.</p>

<h2>Code coverage</h2><p>We use the <a href="https://www.npmjs.com/package/babel-plugin-istanbul"><strong>babel-plugin-istanbul</strong></a> and <a href="https://www.npmjs.com/package/@cypress/instrument-cra">cypress/instrument-cra</a> for code instrumentation. The cypress/instrument-cra library allows activating instrumented code even in "dev mode" or when running the local dev server.</p><pre><code class="language-json">{
  "scripts": {
		...
    "start": "react-scripts -r @cypress/instrument-cra start",
		...
  }
}</code></pre><p>The script we use for an instrumented build of the application for E2E tests.</p><pre><code class="language-json">{
  "scripts": {
		...
		"build:coverage": "cross-env CYPRESS_INSTRUMENT_PRODUCTION=true NODE_ENV=production SKIP_PREFLIGHT_CHECK=true REACT_APP_VERSION=$npm_package_version react-scripts -r @cypress/instrument-cra build",
		...
	}
}</code></pre><p>In the <strong>package.json</strong> file, you can define which files within the codebase will be included in the “code coverage” report.</p><pre><code class="language-json">}
	...
	"nyc": {
	  "include": [
	    "src/pages/*"
	  ],
	  "exclude": [
	    "src/pages/Calendar/**/*"
	  ]
	}
}</code></pre><p>The <a href="https://www.npmjs.com/package/@cypress/code-coverage"><strong>@cypress/code-coverage</strong></a> library is used for integration (processing, updating, and storing) of code coverage results during test execution. More information <a href="https://docs.cypress.io/guides/tooling/code-coverage">can be found here</a>.</p>

<h2>Test Automation and CI/CD Integration</h2><p>We recommend choosing a CI provider that can scale hardware resources (e.g., Github Actions and so on…) since executing a large number of tests is a demanding operation.</p><p>If scaling hardware resources or migrating to another CI provider is not possible, another option is to run tests gradually. This allows running specific tests for different roles.</p><ul><li><strong>Run specific test: </strong>Create a script for each run in the package.json file.</li></ul><pre><code class="language-json">{
	/* spustenie konrétneho test suitu */
	"test:CI:auth": "AUTH_EMAIL=admin@test.com  AUTH_PASSWORD=test SIGN_IN_URL=http://localhost:3000/api/login cypress run --spec cypress/e2e/01-users/auth.cy.ts",
	/* spustenie všetkých test suitov, ktoré sa nachádzajú v priečinku "01-users" */
	"test:CI:users": "AUTH_EMAIL=manager@test.com AUTH_PASSWORD=test SIGN_IN_URL=http://localhost:3000/api/login cypress run --spec cypress/e2e/01-users/*.ts",
}</code></pre><ul><li><strong>Cypress settings - env. variables: </strong>Add all necessary variables to the Cypress configuration file, which can then be used in tests.</li></ul><pre><code class="language-typescript">...
env: {
		auth_email: process.env.AUTH_EMAIL,
		auth_password: process.env.AUTH_PASSWORD,
		sign_in_url: process.env.SIGN_IN_URL
},
...</code></pre><p>The integration can be extended with the <a href="https://www.cypress.io/cloud?v=1">Cypress cloud</a> option. The main advantage is the ability to parallelize test execution and manage test results.</p><p>More information about integration can be found in the article: <a href="https://learn.cypress.io/advanced-cypress-concepts/running-cypress-in-ci">Running Cypress in continuous integration</a>.</p>

Naším cieľom v GoodRequeste je tvoriť zmysluplný a zodpovedný digitálny svet. Z tohto dôvodu sme sa už dlhodobo zamýšľali ako vylepšiť procesy testovania, zvýšiť efektivitu testovania v prípade väčších zmien v aplikácii, zaručiť funkčnosť kritických častí aplikácie, aby sme našim klientom doručili robustný a spoľahlivý softvérový produkt.

End-to-end testovanie

end_to_end_test

End-to-end testovanie.png

Roman Haluška

At GoodRequest, our goal is to create a meaningful and responsible digital world. For this reason, we have long been thinking how to improve testing processes, increase testing efficiency in the case of significant application changes, ensure the functionality of critical application parts, and deliver a robust and reliable software product to our clients.

End-to-end testing

<p><span style="color:#6D7487;font-family:TiemposFine;"><i>How we started</i></span></p><h2>GoodRequest kindness</h2><p>At GoodRequest, we recognize that we are more fortunate than many others. However, there are many people who face existential problems, live in poverty, in unsuitable conditions or live in excluded communities. Therefore, we take it as a certain form of responsibility to help these people.</p><p>As part of Kindness activities, our support is financial, material or professional - especially in the field of education, community development and unpopular topics that need to be talked about and acted upon. More than a year ago, we listened to the podcast Doomed to failure, where Cesta von board member and journalist Zuzana Kovačič Hanzelová addresses the topic of excluded communities and the work of “Omama”. We really liked the organization and its message, and we knew right away that we wanted to support the initiative in the most meaningful way possible.</p><div class="raw-html-embed"><iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/7BxT26IMmC59gwf04TDkNP?utm_source=generator" width="100%" height="200" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe></div>

<h2>Cesta Von civic association and the Omama program</h2><p>The mission of the Cesta von association is to help people who have been on the verge of poverty, help them to stand on their own feet, get a job and a dignified life. The mission of CA is to strengthen the position of socially disadvantaged individuals of all age categories by developing their potential and strengthening their personal, social, material resources and skills. They achieve this goal through various services and initiatives, including consulting, education, social and publishing activities, international cooperation and event organization.</p><p>Their most famous project is the Omama project, which focuses on supporting the healthy development of Roma children living in generational poverty during the most critical period in a child's life (0-3 years). The Omama project provides early care in the form of home visits from Omamas, who help mothers from poor communities to properly develop their children since birth. In this way, children get on the right track and have a foundation to build on in the future. The project currently operates in 31 communities.</p>

<h2>Our help</h2><p>Before we help any organization at GoodRequest, we connect with its representatives and together we find the best form of help. After talking with the coordinator of the Cesta von project, we found out that they would appreciate help precisely in the areas in which we know best - technology and design. Although they tried to do many things themselves, they were not satisfied with the result, and their biggest problem was an outdated and confusing website, which they wanted to change, but did not have enough capacity to do so. They realized that their current website is cluttered with content and can be confusing for potential donors, leaving them unclear about how they can support the association. That's why we decided that the best form of help is creating a new website.</p><p>Since it was Christmas time, we decided to support the association materially. Many of our colleagues brought toys, others helped financially.</p>

<p><span style="color:#6D7487;font-family:TiemposFine;"><i>Design part</i></span></p><h2>We've started with a Workshop</h2><p>At the beginning of the cooperation, together with the team from Cesta Von, we organized a day-long workshop. We looked at the vision, mission and goals of the CA, and devoted most of the workshop time to 4 main characters - Big Donors, Small Donors, Activists and the public. The goal was to find out who our user is, what their needs are, how we can help them with the new website. At the end of the workshop, we defined the Value proposition Canvas where we looked at the common Goals, Problems and Results of the four mentioned persons.</p><p>The result of the Workshop was mutual understanding of cooperation, concretization of the problems we want to solve and definition of individual goals.</p><h3>We've defined the Information Architecture</h3><p>Since the civic association Cesta von consists of several programs, organizes events, offers various forms of support or writes articles and stories for people, easy and clear navigation is the basis of the success of the new website.<br>That's why we decided to create wireframes before the design phase. This phase helped us clearly define the layout and arrangement of individual elements without affecting visual details such as colors or typography. We also quickly and efficiently experimented with different concepts, removed unnecessary details and focused on the basic elements of the design. In addition, wireframes helped us get feedback in the early stages of the project.</p>

<h2>New visual identity</h2><p>The way out did not have a clearly defined and consistent visual identity. Therefore, it was necessary to help create a new one that reflects the original one, but we brought new life and imagination into it.</p><p>When defining the new visual identity, we wanted to emphasize the mission of CA - helping Roma children. The identity reflects their playfulness, joy of life and childlike curiosity. We brought a new color, cartoon elements and new typography. At the same time, however, we tried to include the seriousness and importance of their mission in the field of helping Roma children and their families.</p><p>Overall, we tried to create a visual identity that would be cheerful, understandable and easily identifiable with the Cesta von organization. We believe that this new identity will help the organization better communicate its message and goals to the public, and at the same time help raise awareness of the importance of helping Roma children and their families.</p>

<h2>Final design</h2><p>After defining the visual identity, we started to create the final design. In this phase, we regularly communicated with the client and took into account their opinions and comments. We kept in mind the goals of CA, as well as our cooperation with them.</p><p>We have created a simple, clear and intuitive website that provides visitors with information about the activities of the organization, its mission and goals. At the same time, we wanted it to non-violently provide a variety of ways to help.</p><p>When creating the final design, we were consistent with the association's new visual identity. We wanted it to reflect a child's playfulness, but at the same time look professional. It was also supposed to preserve the special charm of the Cesta von organization and its focus on helping Roma children and their families.</p><h3>Development: simple content management is paramount</h3><p>Our friends from Žilina's digital agency Inoby, who covered the development of the website, also helped. One of the key requirements was for administrators to be able to edit the website effortlessly and without having to involve developers in the process. For this reason, the website was built on WordPress. This solution allows administrators to update and manage content as they see fit, giving them full control over the site.</p>

<h2>The future of CA Cesta von</h2><p>We are very proud that we could help the Cesta von organization either materially or with our expertise. It is wonderful to see how this organization continues to grow and create new programs and activities. Their efforts to help people who are having a hard time in life is truly incredible and inspiring. We believe that thanks to our help, their work will be more appreciated and that their achievements will continue to grow, so that they can help even more people and give them a chance for a new beginning.</p>

Ešte výstižnejšie, pomáhame tým, ktorí pomáhajú. V GoodRequest nás vždy napĺňajú zmysluplné projekty a OZ Cesta von právom patrí medzi ne. Už od roku 2018 robí tím Cesty von pozoruhodný prínos v marginalizovaných komunitách a ak si niekto zaslúži pomoc, tak sú to práve oni. Poďme sa ale pozrieť ako to celé prebiehalo a čo je výstupom.

Cesta von – Pomáhame tým, ktorí to potrebujú

GoodRequest-pomáha-–-Cesta-von.jpg

Cesta-von-a-GoodRequest-.jpg

GoodRequest Family

More precisely, we help those who help. At GoodRequest, we are always filled with meaningful projects, and CA Cesta von rightfully belongs among them. Since 2018, the Cesta von team has been making a remarkable contribution in marginalized communities, and if anyone deserves help, it's them. But let's see how it all went and what the output is.

Cesta von – Helping those who need it

<h2>Experienced internet and telecommunications provider</h2><p>Our Czech partner, PODA, has grown from a small provider in Ostrava over the past 26 years to a stable company with more than 110,000 connected households and businesses. This success is not only due to their quality services but also thanks to their distinctive, human approach to customers that sets them apart from the competition. Now, with the ambition to elevate the quality of customer services even further, our collaboration begins: our common goal is the creation of a mobile application. This application will provide users with a simple and efficient way to manage all activated and available services.</p>

<h2>Design and development of the customer portal in the mobile application for PODA</h2><p>The goal of our collaboration is to create a mobile application that will cover the entire client zone and offer users a simple and efficient way to manage all activated and available services.</p><p>The initial challenge of the project was the need for an intuitive design, which involved two major research phases – at the beginning and at the end of the project. To ensure a significant<a href="https://www.goodrequest.com/blog/ux-ui-design-process"> improvement in the user experience</a>, we needed to get feedback. Therefore, we conducted user testing directly with PODA's customers. Based on the results, recommendations were made, which were then implemented.</p>

<p>After successful design and research, we began the technical analysis. Currently, we are in the development phase of the mobile application, which will be available for iOS and Android mobile platforms. The mobile application will bring users dynamic notifications and a detailed overview of their account, including packages and services. Additionally, customers will have the ability to review current billing and pay invoices directly through the application. Access to service functions and diagnostics, ensuring their maximum satisfaction, will also be provided.</p><p>We believe that through the new mobile application, we will contribute to increasing customer satisfaction and strengthening the company's position in the market.</p>

Dnešní zákazníci vyhľadávajú pohodlie, kvalitu a bezproblémové komunikovanie s poskytovateľmi služieb. Práve preto v spolupráci s internetovou a telekomunikačnou spoločnosťou PODA vyvíjame novú mobilnú aplikáciu, ktorá uspokojí dnešné potreby zákazníkov. 

#grpartners: klientská zóna v mobile pre zákazníkov PODA

PODA.png

PODA_Thumbnail.png

Lukas Haluska

Today's customers are looking convenience, quality, and seamless communication with service providers. That's why, in collaboration with the internet and telecommunications company PODA, we are developing a new mobile application to meet the current needs of customers.

#grpartners: mobile client zone for PODA customers

<p>We’re a trusted partner who can help your organisation discover and leverage new business opportunities, create outstanding digital products, and drive long-term growth for your brand.</p>

Your experts in

<p>We’re a digital studio with over 10 years of experience creating sustainable products for companies ranging from start-ups to industry leaders. Our work brings lasting value, a genuine competitive advantage, and is positioned for long-term growth.</p>

Our projects

We help turn ideas into long-term success

Testimonials

What we do

We  define and validate your product idea

Product 

<p>Successful and sustainable products are placed at the intersection of human and business needs. To create a successful product, we take the time to thoroughly understand your target audience and business objectives before we do any work.</p>

Excellent outcomes through research and design

Design

<p>Our certified UX/UI designers work closely with your users to understand their needs, behaviours, and preferences. They conduct user research and usability testing to gather real user experiences and honest opinions.&nbsp;</p>

Full-scale mobile and web app development 

Development

<p>Since 2013, we’ve deployed more than 200 successful mobile and web applications. Our testers and developers have received the prestigious Citadelo, ISTQB, and SOACP certifications. We invest to the professional development of our people so they can create high-quality digital products.</p>

Growth

<p>Launching a digital product is just the beginning; we don't stop there. We stay ahead of the curve by building our products on reliable and scalable platforms. This ensures that they continue to grow along with your business.</p>

Your experts in productsdevelopment servicesbusinessessolutionsexperiences

We help turn ideas into long-term success

Modernization and streamlining of beauty salons with Notino Partner

Creating a cutting-edge mobile banking experience for the leader in banking innovations Tatra banka

-35 %

Creating a consistent digital experience for Fitshaker, the largest fitness community in Slovakia

3

Creating an attractive design strategy for the most prestigious business magazine in Slovakia Forbes

Delivering a delightful food ordering experience for one of the top Slovak startups Bistro.sk

85%

Improving internal communication for the employees of Kia Slovakia car plant

What we do

Stay ahead of the curve.

End-to-end testing

Cesta von – Helping those who need it

#grpartners: mobile client zone for PODA customers