Poseidon's developer portal UI Prototype Part 1

 

Challenge Overview

Welcome to a new series of Poseidon’s developer portal. In this challenge, we are creating a prototype for developer portal from given design files.

Project Overview

This subproject of Poseidon’s series we are building a developer portal to share information about our platform to the developer who wants to integrate Poseidon’s API/sdk in their app.

With this challenge we will be building Angular prototype from the given design. After this integrate with backend APIs.

Assets

The design source file is shared on the forum. 

Browser Support 

Last 2 versions of all Chrome, Safari, FireFox and IE 11.

 

Technology Stack

Angular 8, SCSS, HTML, Typescript

 

Individual Requirement

Implement the following screens in angular

 

1. Register Page -  https://marvelapp.com/1050g79j/screen/64765895

• Required Field validation should be there after clicking the Register Button.

 

2. Login Page - https://marvelapp.com/1050g79j/screen/64765894

   • Required Field validation should be there after clicking the Login Button.

   • Clicking Forgot Password should navigate to Forgot Password page.

   • Clicking Register button should navigate to the Register screen.

3. Forgot Password

   • Create similar to login form with single input for email

   • Add button with text “Get Reset Link”

   • Add link to go to the login page (similar to forgot password link in login page)

4. Change Password

   • Should provide two inputs 1. Password 2. Confirm Password

   • Add a button to submit.

   • Once submitted it should show a message saying that the “Password is successfully resetted, please click here to go to login page”.

5. Dashboard/Home Page - https://marvelapp.com/1050g79j/screen/64765897

   • Once a user successfully login, the user should be redirected to the Home screen.
   • The left part is needed of the screen and should be made a component.

Each menu link will be deadlink for now. 

•  ������The red marked section of the header is not needed. In place of the User Image please put the User name initials. (e.g. If user name is John Doe than show JD)

Remove search  

•  ���The mid section is not needed as shown in the design.

        

            

Instead in the highlighted section we need to show the list of generated API keys. The API keys are similar to the personal access token of github. https://github.com/settings/tokens

You can follow the flow of Github to create a token. There should be Generate New Key button, Delete key button for each key.

        

6. APIs Page 

   • Integrate swagger previewer in this section, swagger URL should be configurable

   • For the swagger previewer there is a reference please check this https://github.com/agoncal/swagger-ui-angular6 or you can suggest any other approach as well but please confirm in the forum first.

   • So the page right part will look like this.

 

Angular Components and Details:

Please use the best practise of Angular 8. The page must be split into the reusable components.

1. For the header part make it a separate component. The active tab must be highlighted. For the unimplemented pages please make it a dead link.

2. For the footer part make it as a separate reusable component.

Non Functional Requirements:

1. Lint should be passed
2. Mock server for API should be provided
3. Project should be build in prod mode
4. Gitlab CI should be provided

 

Final Submission Guidelines

Please submit the following:

1. Angular project based on above design requirement
2. Gitlab ci to lint and build in prod mode