Milestone 3
Implementation
Frontend
For the frontend, the team developed an interface to allow users to upload sensitive data in a secure way, transforming them into ID cards that can be used to share that information with other people or companies. It is developed using the React library and the Next.js and Chakra UI frameworks. The client is designed to be responsive and fit to any type of window on the desktop or mobile.
Backend
For the backend, the team carried out by writing the API calls to IPFS to store all the documents, as well as wrote the API for the calls to Lit Protocol to encrypt the data. The smart contracts for DataNFT and LitNFT were also written and tested. The team decided to use Lit Protocol to implement the encryption so that IDdeck would be able to manage the access control conditions and distribute keys for decryption.
Test
Frontend
On the frontend, the team tested the routes and used dummy functions to test the forms. After getting both the frontend and backend completed, we tested inputting and displaying data between the two sides.
Backend
In the backend, the team used Hardhat and Remix to test out the smart contracts. After testing out each function and making sure the outputs were correct, the smart contracts were deployed to the Polygon Mumbai Testnet in order to test out the Lit Protocol API that the team created.
Fig. 1 Static landing page
Fig 2.1 Dynamic dashboard showing implementation of cards
Fig 2.2 Dynamic information page showing integration between frontend and backend to display data
Fig 2.3 Dynamic events page showing cards containing details about potential events, which are stored on the backend
Fig 2.4 How the website looks for mobile users
Fig 2.5 The expandable sidebar for smaller-screened devices
Fig 3.1 Testing using Hardhat
Fig 3.2 Testing using Remix
Fig 4.1 Deploying onto Polygon Mumbai Testnet
Fig 5.1 Encryption Architecture. Decryption is pretty much the same process in reverse order.
Fig 6.1, Fig 6.2 Outputs from testing Lit Protocol using Mumbai
Fig 7 Tested IPFS functions using a local gateway through IPFS Desktop
Teamwork
Overall
The group worked well together through dividing up the frontend and backend, and figuring out how to integrate them later. The team meets every week to discuss and accomplish our goals.
Zachary Zatuchni - Designed the landing page and marketing.
Weiliang Jordan Sun - Developed and tested the backend using Remix and deployed onto Polygon Mumbai Testnet and wrote calls to IPFS and Lit Protocol.
Samuel Schmitt - Programmed and tested the backend with hardhat and a test client to ensure contract functions would be accessible via a React application.
Murad Arslaner - Developed the frontend UI by making setting up the routing for pages and making the screen wrapper for each page that fits all window sizes.
Andrew Capro - Developed frontend interface and made it accessible for different device sizes and connected the frontend cards to the backend database