Digital Identity App - Frontend Part 1

Challenge Summary

Welcome to everyone! The goal of this challenge is to create the frontend app of the Digital Identity App from the given design.

Project Overview

This application has the capability to manage and verify the digital identity of a person in a trusted blockchain system which later can be used for different kinds of activity for i.e apply for a mortgage, etc.

This is the first challenge of the project. We will be building the frontend and integrating it with the existing API. In the next challenges, we will develop more screens.

Technology Stack

• React JS 16
• HTML5
• CSS3
• Typescript

Browser Requirements

Chrome, Firefox, Edge, Safari

Assets

The assets are shared on the forum

Individual Requirements

Implement the following screens

1. Landing Page

•  01.3_Landing Page

2. User Invitation

   1. 01.0_User Invitation Screen

   2. 01.1_Invitation Accept Screen

   3. 01.2_Copied

3. Register Page

   1. 02_Sing_up

4. Login Page

   1. 03.0_Login
      Also, add the Azure AD login using https://www.npmjs.com/package/react-aad-msal  

5. Dashboard

   1. 03.1_Loading (should be used on all API calls)

   2. 04.0_Dashboard_Tab 1

   3. 04.1_Card Example

   4. 04.3_Dashboard_Tab 2

   5. 04.4_Collapsed (Side menu collapsed design)

 

The details of the screen with the business flow is shared on the forum. If there is any confusion let's clarify on the forum.

General Requirements

• Use React Js best practices
• Use hooks, context APIs as much as possible
• Use functional styled-components instead of class-based
• Lint should be added and pass
• Divide the components into meaningful components that can be reusable
• All data should come from the provided swagger API, please create MOCk API 
• Only use third-party libraries that are accepted by Topcoder

Final Submission Guidelines

Submit the zip containing

• Full source code with detailed readme to setup, deployment.