Milestone 2
Project Plan
Roles and Responsibilities
Backend Developers: Sam Schmitt, Weiliang Sun, Zachary Zatuchni
Frontend Developers: Murad Arslaner, Andrew Capro
Software
Frontend:
Our front end will be using Next.js to host a site application where users and organizers can create data sessions with each other.
We will also be creating a mobile application in React Native using the Expo SDK. This app will have most, if not all, features available on our web application.
Backend:
We will be using Solidity smart contracts to develop our backend. These contracts will be used to store pointers to data that is stored on IPFS. This data will be encrypted using a user's private key on their Ethereum wallet address. In order to get access to this user's wallet we will be using Rainbowkit, Web3Auth, or WalletConnect to make the users' experience their own.
Hardware
NFC: We will be using NFC tags to simulate an organization's request for data with a tap-to-trigger environment.
Project Management
We are using Notion to keep track of task management and the team's backlog. We are using GitHub for version control for the code repository. The team is communicating online via Discord to share ideas, requirements, and designs. The team meets at least once a week in person together for at least an hour to share progress and talk about further steps.
Task Breakdown
Pre-MVP (September through November 2022)
Milestone 1 (September 1st - October 12th)
Determine our customers, their problems and needs, and our requirements
Figure out what types of identification we are working with
Learn Figma for the prototype design
Milestone 2 (October 13th - November 30th)
Develop project plan including task breakdown of features to implement and specifications
Design visual concepts in Figma for the frontend and select the most promising
Design flowcharts for the backend architecture, backend functions, and how the user will use the system overall
Learn Next.js for the frontend development of the site
Learn Solidity for the backend implementation of smart contracts
Web3 Desktop Site MVP (December 2022 and January 2022)
Create an ID bank (dashboard) that lists out the ID cards and associated organizations
Add functionality for adding personal information
Add the ability to make and download cards containing specific pieces of ID (e.g., driver's license, bar card)
Allow card requests using NFC
Focus on a singular blockchain license for the whole stack
Post-MVP (Spring 2023 semester)
Support for multiple types of licenses and IDs
Port the website MVP to a mobile phone
Allow an organization to only have to ask for permission when requesting information for the very first time
Add functionality to modify and delete personal information and IDs from the blockchain
Concepts
The team designed two different early concepts in Figma for what a front-end client could look like. The main requirements of the prototypes, as per Milestone 1, were to:
Show how a blockchain wallet could be added
Show how an ID could be digitally created and viewed from the site
Show how personal user information could be added to the site, attached to certain IDs at will, and given to certain organizations/events at will
Show how requests for data and usages of data could be preliminarily visualized
Concept 1 below shows a client split into multiple sections for each different function:
A landing page when the user visits for the first time, explaining the project and prompting the user to connect their wallet.
A dashboard to view info on recent ID cards the user has available and how many times each card has been used or requested. This utilizes a standard single-screen landing page.
A page to view all ID cards and to create new ID cards. When creating new ID cards, the team was considering either filling in a form or dragging and dropping personal information.
A page to view your filled-out personal information. The information will be organized in a standard form to create new ID cards.
A page to create events that require ID cards. A QR code or link will be generated to request specific data needed. When the data is requested, the event will specify why the info is needed and allow the user to approve or disapprove of sending the data over.
A page displaying the history of data requests, data usage, and events.
Concept 2 below shows a different approach to the client with all functions available from the landing page:
A dashboard ID bank that shows all the most important information: your personal account information, the organizations that have access to using and requesting data, and options to create new ID cards
From there, there is the option to separately view all your personal information on a different page through a button click.
There is also an option to separately view a connected organization by clicking a button and to add or revoke data access from the organization.
There is also the option to separately view an event, the event's generated QR code or link, and the required data that was requested by clicking a button.
Concept Selection
The team decided to go with Concept 1, which allows each function of the project to be accessed from a separate page on a sidebar. The team decided to go with this concept mainly to appeal to ease of access for the user. It would be easier for a user to find each place they need to navigate to on a collapsible sidebar that is always available rather than having to backtrack to the main dashboard all the time. The improved version of the Concept 1 frontend model stays mostly true to the original spirit and focuses on fleshing out the details of each page.
As an overall stylistic choice, the team experimented with replacing the solid upper navigation bar and white background. The team made the mockup design above with a (possibly collapsible) sidebar with a modern gradient background. The team specially picked out a color scheme based around the colors blue, purple, black, white, and gray. For the dashboard, an example is provided to show how it would possibly look with the number of cards, usages, requests, and past events being displayed.
The ID card page is expanded upon out to show how the cards themselves may visually look both in a vertical and horizontal format. Example templates with automatically filled-out personal information were made. The form for creating cards from scratch was also made.
Similar detailed forms were designed for filling out personal information and creating new events and their QR codes were also designed.
Lastly, the team also drafted the model architecture for the data structures that could be used for personal information, ID cards, and events based on the above system flow.
Design
The following diagram shows a process flowchart of how a potential user would interact with the team's web app:
The next diagram shows the flow of how a piece of the user's personal identification (the /uploadID function) would be sent and retrieved in each stage. Creation and retrieval of ID cards as well as creation of events would follow similarly.
Analysis
Hardware Specifications:
The hardware involved in our system is only dependent on a computer connected to the internet, whether that be a person's smartphone, tablet, or computer. This will allow them to interface with our software system to create their ID cards and use their data.
Software Specifications:
The software for our project is much more involved and includes:
A Web3 provider: A provider allows the user to connect with a blockchain network of their choice and especially interface with our smart contracts.
Solidity smart contracts: Once our smart contracts are deployed, they will be accessible to our platform via an ABI or an Application Binary Interface. Using this ABI, we can access all functions with their parameters that were coded onto our smart contracts.
Next.js: Our web framework for our application uses Next.js, which is based on the React library for building user interfaces. This allows us to access client-side rendering and server-side rendering at the same time. This can be beneficial to generate previews for links to our platform that can deep link into our mobile application to promote a seamless user experience. This is in conjunction with Chakra UI, which simplifies the CSS for creating user interface components.
Expo & React Native: When we develop our mobile app, we will use the expo-sdk to develop in React Native (which is different from regular React). This makes it extremely easy to develop one codebase that can be used to build apps for both iOS and Android devices.
Below is a flowchart of how data is transferred to and from the user through the website dashboard, the API, and the cloud. This is all in the context of the different libraries and types of software the team will be taking advantage of.
Test Plan
The team plans on splitting the work into three categories: the frontend, the backend, and the integration between the two. The team will continue to follow the task breakdown from Milestone 2.1 to determine what features must be worked on for our MVP until January and what features can be added afterward for our post-MVP during the spring semester. The features are split into three priorities: high, normal, and low. The list of everything that needs to be developed is kept track of using a Notion board, as pictured below.
For the frontend, the team will be using the collaboration tools provided by VS Code to develop the web page in real-time. This begins with each individual page one at a time and their required functionality, which will be developed using Next.js, Chakra UI, and standard HTML, CSS, and JavaScript. Using the Node.js package manager, the team can also view the web page together in real time through one member hosting a server on their local connection. The picture below shows an example of very early progress on the actual website.
For the backend and the full stack integration, the team will be testing the Solidity smart contracts initially using the tool Remix. Later, the team plans on writing test files using Mocha and Chai and deploying test contracts onto the local blockchain Ganache using Truffle. The team finally plans on deploying the contracts onto an Ethereum testnet.
Remix
Ganache
Truffle
Ethereum testnet