code-vagabond/assessment-AR

ekipa Logo Viewer App

• Goal
• User Stories
• Scenario
• Wireframes
• GraphQL Endpoint
• FAQ

Goal

Develop an application for project manager that displays a list and logo of challenges published by ekipa which are available via ekipa GraphQL endpoint.

The application should:

• implement user stories
• pass scenario
• follow design guidelines from wireframes

User stories

• As a community manager, I want to see list of challenges published by ekipa.
• As a community manager, I want to see the challenge logo and title when I click on an item in the challenge list.
• As a community manager, I want be able to mark challenge(s) as favorite from any where inside the application.

Scenario

1. Open application in a local environment.
2. Challenge list loads.
3. User clicks on an item on the list.
4. Challenge item containing challenge.node.title[0].text and challenge.node.logo.url appears.
5. User clicks on the heart button on the right of challenge title to save the challenge item as favorite.
6. User clicks backlink to return to the list.
7. In challenge list, favorited challenges will be marked with a different heart button then other challenges.

Wireframes

List of challenges published by ekipa cointaining challenge.node.title[0].text and challenge.node.teaser[0].text

Challenge detail containing challenge.node.title[0].text and challenge.node.logo.url

GraphQL endpoint

Endpoint example

This endpoint is generated by our Prismic CMS and will serve the content of challenges which we publish on our platform.

For the purpose of the task, calling the getChallenges() method from ChallengesService once on page load will suffice. Example of how to call the service is included inside AppComponent.

FAQ

If I have any questions who should I contact?

You can email Linh directly at linh@ekipa.de .

How should I design the application?

The application should be designed in harmony with your sense of aesthetics respecting provided wireframes. Feel free to use CSS Framework of your preference.

Should I persist marked challenges online?

No, states may be stored in the client and can be removed on page refresh.

How to submit a great solution

• Make sure you commit often with clear commit messages so we can understand your intension behind each changes.
• We will run a formal code review on your solution. Make sure your code is not only correct but also easy to read and reason about.

Development server

Run npm run start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.