Challenge Overview
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.
NOTE: The timeline for is short for every phase, please check carefully.
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. The below is an overall big picture of the application we are developing. This will help you understand the application in detail.
What is Poseidon’s API?
Poseidon’s API mentioned throughout the project means the main service that we will be selling to our customer(Enterprise). They will integrate those API using SDK we provide. These API are built as multi-tenant microservices architecture and will be hosted on Kubernetes.
What is Developer Portal API?
This is a tool that will be used to register and manage the Enterprise accounts, Developers, and will provide guidance for using Poseidon’s API.
In this challenge we will be designing the Architecture for adding more backend API and update the existing API as needed for Developer Portal. After this we will build the developer portal API and then integrate with the angular app.
Authentication Flow
There should be a default admin user set when the database is initialized.
She will then create an enterprise account and invite a lead developer and other developers. The user registration will be through invite only. Once the user receives the invitation email, she will get a registration URL where she will enter the details with verification code received on email. Once registration she can login to the system.
There is no need to verify email here as it is invite only.
Enterprise Account
The enterprise account is the enterprise who purchases the Poseidon’s API. It will be created by Admin users only.
Also, note if there is anything needed for API authorization please create the api accordingly, for this please check the poc shared on forum.
User Roles
- Super Admin
- Contact Person
- Lead Developer
- Developer
User Permissions
So new flow will be as below:
1) Super Admin will be Poseidon’s team member who will manage the developer portal. She will create Enterprise and add a lead developer for that enterprise. She can also invite the regular developer to the system. See the screen for Admin https://marvelapp.com/6hcg41b/screen/66159830
- Can do whatever lead and regular developer can do
- Can manage enterprise accounts
- Update enterprise details and resources
- Can manage API permission for the enterprise
- Can do whatever regular developer can do
- Can manage the developer
- Can manage his and view enterprise key
- Can manage his profile detail
3) Contact Person will have same permission as Lead developer except
- He can manage his personnel key i.e. remove "My Key" section in account setting https://marvelapp.com/6hcg41b/screen/66324822
4) Regular developers can only manage her account and her key. Screens for her role https://marvelapp.com/6hcg41b/screen/66170385
- Can accept her invitation
- Can update her account
- Can manage her API key
Assets
The design source file and base source code 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) Enterprise List/Grid Page -
https://marvelapp.com/6hcg41b/screen/66159575 https://marvelapp.com/6hcg41b/screen/66159576 https://marvelapp.com/6hcg41b/screen/66159577 https://marvelapp.com/6hcg41b/screen/66159578
- Edit should open Edit enterprise page
- Delete should open delete confirmation popup page, use the popup from similar design https://marvelapp.com/6hcg41b/screen/66170387
- Clicking on name should open the detail page
- Add two more columns. Beside the columns shown in above screens we will have two more columns, also adjust the tile view.
Id: this should be fixed value that will be easy to identify the audit of enterprise.
Status: the status of enterprise, “InReview”,”Active” and “InActive”. If InReview and InActive then any keys from that enterprise should be voided. Only active status enterprises should be able to consume the API. The status should only be updated by admin.
2) Add/Edit Enterprise Page
https://marvelapp.com/6hcg41b/screen/66336306
https://marvelapp.com/6hcg41b/screen/66336307
- During the creation of enterprise admin should be able to add two users. One being lead developer and the other being a contact person. In the current UI add one more form to enter the lead developer detail
- Support uploading enterprise logo
3) Enterprise Detail Page
https://marvelapp.com/6hcg41b/screen/66159899 https://marvelapp.com/6hcg41b/screen/66159900 https://marvelapp.com/6hcg41b/screen/66159901 https://marvelapp.com/6hcg41b/screen/66159902
4) API permission management
https://marvelapp.com/6hcg41b/screen/66324819 https://marvelapp.com/6hcg41b/screen/66324820 https://marvelapp.com/6hcg41b/screen/66324821
5) Invite developer
https://marvelapp.com/6hcg41b/screen/66324817 https://marvelapp.com/6hcg41b/screen/66324818
6) Developers Listing page(for lead developer)
https://marvelapp.com/6hcg41b/screen/66159584 https://marvelapp.com/6hcg41b/screen/66159585
Invite will be similar to admin role’s invite developer
https://marvelapp.com/6hcg41b/screen/66159586 https://marvelapp.com/6hcg41b/screen/66159587
7) Settings Page
https://marvelapp.com/6hcg41b/screen/66170388
https://marvelapp.com/6hcg41b/screen/66170389
https://marvelapp.com/6hcg41b/screen/66324822
https://marvelapp.com/6hcg41b/screen/66170387
https://marvelapp.com/6hcg41b/screen/66339259
- Remove the “My Subscriptions” widget https://marvelapp.com/6hcg41b/screen/66339259
- This page should be the same for lead and regular developer only difference is lead developer can see the enterprise key.
- Support uploading profile picture
8) Header and left menu
- Update the header and left menu based on the role.
- Global search and notification icon are not required.
- Profile pic should set if image is provided else show first letters of first and last name. e.g if full name "John Doe" then show "JD" only if image is not provided
9) Anywhere enterprise key is shown in the current design, we need to mask it and add a “Show” button. Once the key is shown after the “Show” button we need to show the button to copy the key in the clipboard.
10) Create a fake simple login page which can help to login for different role
Let us know if there is any missing behavior or flow from design in the spec.
Current UP is respsonsive, although the design is not provided for mobile and tablet please make best judgement. Also scale down the design to fit the existing UI.
Non Functional Requirement
- “npm lint” should be passed
- “npm run build --prod” should be successful.
- No changes should be done on testing configuration
- Reusable components should be done
- Roles should be properly configured.
- Use mock API instead of json file.
- For emails to use xxx@example.com
- There should be no duplicate code for different roles.
Final Submission Guidelines
Please submit the following:
- Updated Angular project based on above requirement