VoteChain 2.0: Final Project Examination / Review Report

VoteChain 2.0

Group Member:

Madelyn Nguyen

Zixuan Weng

Shengzhe Zhang

Xin Tang

Xiuyuan Qi

Xinyu Yang

Project link: https://github.com/ItsBaiShiXi/VoteChain

Member's Contribution:

VoteChain 2.0: Revamping the Front-End UI and Adding Discussion Panel Feature

By Madelyn Nguyen

Contribution to VoteChain 2.0

My primary focus on the expansion of VoteChain was to conduct a front-end refresh to the Homepage and add the new Discussion Panel feature. My goal was to make the UI more user-friendly and interactive. The addition of the Discussion Panel would also give users the opportunity to engage in conversations about the voting topics.

1. Front End Refresh:

• NEW! Color Theme:

The previous VoteChain theme was very blue/cool toned. After looking further into the application’s front-end implementation, I discovered that most of the theme consisted of default material-UI colors. Since Xiuyuan had already created the blog page, I decided to match our app’s background with the blog. I also added a pop of color with the brown navbar and green buttons. This resulted in a more warm/neutral theme.

• Text Changes + Addition of New Icons:

Since we modified a lot of the functionalities of the original VoteChain, I had to change most of the Homepage descriptions to be more tailored to our project. Afterwards, I rearranged the new text on the Homepage so that it had a more elegant layout. This also included adding new icons, and color matching old ones. I found this website extremely useful for converting .png files to .svg, and also changing the color palette of the icons: https://www.pngtosvg.com/ 

• More Functional Navbar:

Updating the navbar was a team effort. I had originally removed “Voter Signup” because “Voter Login” routed to the signup page if the user did not have an account. Although, this change was ultimately overwritten because we decided to use ResVault as our user authentication method. My other teammates then made changes as they saw fit as they added their new features.

• Created the “How does it work" Carousel + New Feature Descriptions:

The original VoteChain displayed their “How does it work?” and “Features” sections as cards in a grid layout. Since the “Features” section seemed a bit redundant, I decided to combine them together in a React-Slick Carousel. Now, each slide includes an icon, feature title, and description of the feature. Here is the video that I referenced to create the React-Slick Carousel: https://youtu.be/6YnryDjEGr8?si=bhgXioCONVHPX22Q!

Homepage:

Homepage pt2 (React-Slick Carousel):

2. Discussion Panel Feature：

Since Shengzhe had already utilized MongoDB in the back-end for the Create New Poll feature, I decided to build our Discussion Panel feature with it as well. I referenced this video that explains how to create a basic chat app with Socket.IO and MongoDB as a foundation for our Discussion Panel: https://youtu.be/-SpWOpdzUKw?si=MW_80R3ZontLO0hw

• Back-End Implementation:

I built on Shengzhe’s MongoDB connection in the backend to store all discussion data in MongoDB. In order to use the same port (3000) as the Poll feature, I had to configure a separate http server using Socket.io for the Discussion Panel. The back-end then handles user connections/disconnections from the Discussion Panel, storing new posts, and sending previous messages to the frontend so it can be displayed in the chat thread.

• Front-End Implementation:

The front-end then connected to Socket.io and the http server to send and get messages from the backend server. This two-way connection is necessary for storage of discussion posts and retrieval of past messages. The Discussion Panels are supposed to replicate the immutability of blockchain, so there is no “clear chat” feature. Messages are permanent, and we encourage users to be responsible when posting messages. Other than that, the Discussion Panel front-end interface was created with basic JavaScript/React.js UI conventions. The “Post to Discussion Panel” box is a Form with an Input space. All styling was organized in a dedicated .css file for consistency.

Discussion Panel:

Unexpected Challenges

The biggest challenge I faced during this project was understanding the existing VoteChain application. I spent the first few weeks of our project window doing a deep dive on the front-end implementation, forming an understanding of how all of the components link back to what the user sees. Although this posed an initial challenge, I learned a lot about app architecture and how the back-end and front-end work together! I also got the opportunity to learn how to use JavaScript/React.js and MongoDB, as I had no previous experience with them.

Future Expansions

1. Voter Usernames:

Our app currently displays the user’s public key as their “username”. A future expansion could add a username feature that allows the user to customize their username either via ResVault or directly on VoteChain. This would also be beneficial to the Discussion Panel feature, where instead of it saying “Voter: “ for each discussion post made by voters, it could display their username.

2. Adding More React.js Elements:

Due to the time constraint, I was unable to incorporate more React.js elements to the front-end. I would have loved to add more animations to the Homepage to make the UI more dynamic and interactive!

__________________________________________________________________________________

Zixuan Weng:

What part of the project we worked on

1. Solving the conflicted dependencies in our project. The project is based on npm, but there are conflicts which cause errors when users run “npm install” and “npm start”. I fix this problem, in specifically through:

   • Update all codes using @material-ui (mui v4) to @mui v5. In particular, the @material-ui/style is deprecated in v5, so I used the @box package to replace those parts of codes.

   • Fix the dependencies @bootstrap by degrade it to ^4.3.1. This version is required by argon-design-system-react.css. Now, the development server wouldn’t make errors and can correctly output reports.

2. Update the setup guide in Readme. This guide helps people to launch our project on any platform, as long as Chrome and Node.js are installable.

3. Adjust the structure of the polls page, and add a search function for polls. 

4. Add “home” “logout” buttons for navbar and make sure it is accessible everywhere. Making those buttons more intelligent.

What research we had to do

1. To understand why our project has problems when installing dependencies and starting a development server, I had to learn it from the start. I studied how packages @react, @mui and @create-react-app work. Also, I studied Grammar of JavaScript and HTML to help me code in the project. In clouding the tech related with ResilientDB, this is the first time I reach this tech stack so it takes me many times.

Problems we ran into

1. It is difficult to figure out how to set up the environment, especially connecting the backend to our project on a local environment.

__________________________________________________________________________________

Blog: Building VoteChain 2.0 - Revolutionizing Community Voting

By Shengzhe Zhang

Motivation: Why Build VoteChain 2.0?

I’ve always been fascinated by how technology can be applied to solve real-world problems. This curiosity led me to ResilientDB, a distributed database system designed for reliability and scalability. When considering what kind of software could leverage its potential, I stumbled upon discussions in the gaming community about voting fairness. These conversations sparked an idea: perhaps decentralizing voting and making the process transparent could address concerns like voting fraud and enhance the credibility of voting outcomes.

In my research, I discovered an earlier project called VoteChain, which aimed to digitize elections, transferring them from offline to online. While the concept was ambitious, I had doubts about its feasibility for government-level elections. Securing the database alone is insufficient in such scenarios, as broader threats like untrustworthy networks and systemic vulnerabilities could undermine the process. However, I saw a significant opportunity to pivot the use case.

By focusing on community-level activities—such as gaming tournaments, school elections, or small organizational polls—I realized that VoteChain could be a powerful tool. At this level, the threats are less severe, and leveraging a distributed database system like ResilientDB can ensure voting fairness while protecting against smaller-scale attacks. This approach shifts the focus from high-stakes elections to practical, everyday applications where the technology truly shines.

This realization became the foundation for VoteChain 2.0, a reimagined and refined version of the original project. My goal is to create a voting platform that empowers communities with transparent, decentralized, and secure voting processes tailored to their specific needs.

Comparing VoteChain 1.0 and VoteChain 2.0: What's New?

Although we’ve named our project VoteChain 2.0, the internal logic and functionality are vastly different from its predecessor. In fact, the original VoteChain provided little in terms of a foundation for our work. Here’s a closer look at the differences:

The Original VoteChain: A Limited Approach

The original VoteChain was a front-end application with minimal flexibility. It used Firebase to store user login information, but its functionality was restricted in significant ways:

• Static Polls: Voting items were hardcoded into the system. Any changes required modifying the source code, making it impractical for real-world use.

• Basic Security: While Firebase provided basic user authentication, it did not address more robust security concerns, especially in contexts where voting integrity is critical.

VoteChain 2.0: A Dynamic, Secure, and Community-Centric Redesign

In VoteChain 2.0, we have overhauled both the architecture and user experience to make the application dynamic, secure, and capable of fostering community engagement.

1. Replacing Firebase with ResVault:

   • Instead of Firebase, we integrated ResVault, a system closely tied to ResilientDB. ResVault functions as a wallet for ResilientDB, providing a robust security system for managing user credentials and sensitive data.

   • This change enhances security and aligns with the decentralized nature of ResilientDB, ensuring users’ login information is protected by cutting-edge cryptographic methods.

2. Dynamic Poll Creation:

   • Unlike the original, where polls were static and predefined, VoteChain 2.0 empowers users to create their own polls directly through the interface.

   • No source code modifications are required, making the platform far more user-friendly and adaptable to various scenarios, from gaming tournaments to community decision-making.

3. Community Features:

   • To encourage interaction and discussion, we introduced a comment system under each vote. This feature allows users to share their thoughts, discuss the implications of the poll, and engage with other community members.

   • By adding this layer of social interaction, we aim to transform VoteChain 2.0 into more than just a voting platform—it becomes a space for community dialogue and collaboration.

Why These Changes Matter

These updates make VoteChain 2.0 a truly decentralized, secure, and user-centric platform. It overcomes the limitations of its predecessor by embracing flexibility and fostering community-driven engagement. Our redesign ensures the platform is not only functional but also adaptable to a variety of real-world applications, demonstrating the potential of ResilientDB and ResVault in building transparent and trustworthy digital ecosystems.

My Contributions to VoteChain 2.0

As a key contributor to the VoteChain 2.0 project, I played a central role in designing the system architecture, building backend functionalities, and ensuring seamless communication with ResilientDB. My work focused on creating a robust and secure foundation for the application while introducing features to enhance its flexibility and scalability. Below are the highlights of my contributions:

1. Integration of ResVault

I was responsible for integrating ResVault into the application, replacing Firebase to enhance security and align with the decentralized framework of ResilientDB. This involved:

• Researching ResVault’s capabilities and implementing a workflow for secure user authentication.

• Streamlining the integration to ensure a seamless user experience.

2. Backend Architecture Design

I took the lead in creating the overall backend structure for VoteChain 2.0. This included:

• Designing how the backend interacts with ResilientDB to store and manage poll-related data securely.

• Developing APIs for the application to handle tasks such as user authentication and poll creation.

• Ensuring the backend was modular, maintainable, and scalable to accommodate future enhancements.

3. MongoDB Integration

Recognizing the need for efficient indexing and querying, I introduced MongoDB as a secondary database to complement ResilientDB. My contributions included:

• Establishing the connection between the backend and MongoDB to handle indexing and metadata storage.

• Configuring MongoDB to efficiently manage secondary tasks such as querying and organizing data for user-friendly retrieval.

• Designing the architecture where ResilientDB handles critical data for security, while MongoDB optimizes performance for auxiliary processes.

4. Communication with ResilientDB

A key aspect of my role was defining and implementing how VoteChain 2.0 communicates with ResilientDB. My work included:

• Writing the logic for transactions and interactions between the application and ResilientDB, ensuring data integrity and security.

• Troubleshooting and debugging any issues in the interaction layer to ensure seamless functionality.

Reflecting on My Contributions

Through my work on VoteChain 2.0, I had the opportunity to design and implement a distributed system that combines the strengths of ResilientDB and MongoDB. This experience deepened my understanding of decentralized databases, backend architecture design, and database systems.

Future Improvements for VoteChain 2.0

While VoteChain 2.0 has laid a strong foundation for secure and dynamic community voting, there is still room for improvement to enhance its functionality and user experience. Here are two key areas where further development can take the project to the next level:

1. Enhancing the User Interface (UI)

Due to time constraints, the UI design for VoteChain 2.0 is not fully polished. Improving the UI will not only make the application more visually appealing but also provide a smoother and more intuitive experience for users. Key improvements could include:

• Designing a more modern and responsive interface that works seamlessly across devices.

• Incorporating accessibility features to ensure the platform is usable by a wider range of users.

2. Introducing Additional Voting Types

Currently, VoteChain 2.0 supports classic single-choice votes, which work well for straightforward decision-making. However, expanding the range of voting types can make the platform more versatile and better suited for diverse scenarios. Potential additions include:

• Multiple-Choice Voting: Allowing users to select more than one option, which is useful for multi-faceted decisions.

• Ranked-Choice Voting: Enabling users to rank their preferences, a popular method for elections or priority-based decision-making.

• Weighted Voting: Introducing votes where certain participants have more influence, suitable for specialized use cases like shareholder meetings.

Looking Ahead

These improvements will not only enhance the platform’s usability but also broaden its appeal to various communities and organizations. By prioritizing UI enhancements and expanding the voting options, VoteChain 2.0 can continue to evolve into a comprehensive and versatile solution for secure, transparent, and community-driven voting.

__________________________________________________________________________________

Xin Tang

My Contributions to VoteChain 2.0:

Improving the Login System with Firebase

We started by improving the existing login system using Firebase. I worked on adding email authentication to ensure only users with specific email domains could access discussion panels. This included implementing email verification, a "Resend Verification Email" button, and error and success messages to guide users. For security, I updated the login logic to allow only verified users to log in. I also integrated Firebase Firestore to store user information, such as usernames, emails, and public/private keys, which laid the groundwork for future features like public key lookups. However, this was only a stepping stone and not the focus of our project.

Restarting the Project

In the first half quarter, we attempted to build on the existing project by connecting the login system to ResilientDB. However, we found Firebase insecure for our needs, and some GraphQL APIs, like getFilteredTransactions, were nonfunctional. This led us to restart the project from scratch.Shengzhe redesigned the login method using ResVault, ResilientDB, and MongoDB. 

Building the Voting System

I focused on making the voting system work. For the VoteResultPage, I used the transactionId of the discussion poll to display voting options. When users selected an option and submitted their vote, the backend recorded the transaction in ResilientDB and saved the voting history in MongoDB and ResilientDB. Initially, I considered using MySQL for better control, but I realized MongoDB’s JSON structure was more flexible. I designed a schema to store voteTransactionId, sendPublicKey, receivePublicKey, poll details, options, and timestamps. To prevent duplicate votes, I added a check to ensure each user could vote only once per poll.

Building Poll Results

After voting, a "View Result" button appears, leading to a results page. I developed this page to display poll details and visualizations using Chart.js. The result page first fetches polls details to get the topic and description, and processes voting data filtered by transaction id obtained from the URL from the database. I also added error handling and loading states for a smoother user experience. Additionally, I used the vote data to generate input for visualizations, with customized colors and chart options to enhance clarity and user experience. 

Building Vote History Page

To improve usability, I created a Vote History page where users can view their voting history, including poll topics, descriptions, selected options, and links to results. This makes it easier for users to track their activities without navigating through all polls.

Polishing the Interface and Enhancing User Experience

With these changes, our project became completely different from the original. I cleaned up the source code, removed unused components, and updated the interface by adding a User Info page and a "Create Poll" option to the Navbar. I also fixed issues like the nonfunctioning burger menu and display problems on the login page. Finally, I created sample polls and updated the README file with screenshots of key features, including the main page, discussion polls, voting system, results, and vote history.

Reflecting on My Contributions

When I began working on the project, I initially considered managing the data using MySQL. However, discovering ResilientDB as a distributed storage system introduced me to a different and more effective way to handle data. This experience expanded my understanding of how distributed systems can improve both scalability and efficiency.

Additionally, the security features of ResVault in the login process gave me a deeper appreciation for implementing secure and robust authentication systems. I learned how a secure login system can not only protect user data but also enhance trust and usability within the application.

Working on this project also taught me how to use public key cryptography to make transactions more secure. By using public keys in a clear and open way, I was able to ensure the voting process was safe and reliable. This gave me a deeper understanding of how cryptography can be used in real applications.

Overall, this project helped me learn a lot about distributed systems, data security, and how to build safer systems. These lessons will guide me in my future work.

__________________________________________________________________________________

Xiuyuan Qi

Contributions to VoteChain 2.0:

One of my primary contributions to the VoteChain 2.0 project involved crafting a compelling web presence that effectively communicates the platform’s purpose, capabilities, and future potential. By focusing on clear messaging and engaging visuals, I aimed to bridge the gap between the project’s technical complexities and the broader audience of community members, organizational leaders, and potential adopters.

1. Designing a Comprehensive and Engaging Website:

   I created a polished, easy-to-navigate website that serves as the central hub for information about VoteChain 2.0. Drawing upon modern web design principles and user experience best practices, I ensured that every page—from the homepage to the FAQ section—offers clarity, coherence, and visual appeal. High-resolution images and intuitive layouts were carefully chosen to make the concept of decentralized, blockchain-backed voting accessible to all visitors, regardless of their technical background.

   
   

2. Showcasing the Concept of ResilientDB and Its Advantages:

   Since VoteChain 2.0 leverages the robustness of ResilientDB, one of my key objectives was to highlight the database’s distinctive features and advantages. On the website, I crafted sections explaining ResilientDB’s fundamentals—its blockchain infrastructure, data integrity mechanisms, and privacy safeguards—in straightforward language. By breaking down these technical aspects into relatable terms and using informative graphics, I helped emphasize why ResilientDB is a critical component of our secure and trustworthy voting solution.

   
   

3. Creating and Curating Informative Blog Posts:

   To further enhance transparency and user understanding, I published a series of blog posts that delve into the conceptual underpinnings, real-world use cases, and potential impact of VoteChain 2.0. These posts cover a variety of topics:

   • Introduction to Decentralized Voting: Explaining how distributed databases and blockchain technology can transform traditional voting methods, eliminate fraud concerns, and foster community trust.

   • Advantages of VoteChain 2.0 Over Traditional Platforms: Outlining how our solution surpasses legacy systems in terms of scalability, security, and adaptability to different community-level events—such as school elections or organizational polls.

   • Practical Applications of ResilientDB: Highlighting scenarios where institutions, companies, and communities benefit from the resilience and transparency of the underlying database technology, from small-scale decisions to more complex governance models.

     
     

4. Visual Storytelling Through Imagery:

   All of the images and graphics incorporated into the site and blog posts are carefully selected and integrated to reinforce key messages. Through these visuals—ranging from conceptual illustrations of blockchain networks to photographs representing community engagement—I conveyed the idea that VoteChain 2.0 is both technologically advanced and fundamentally people-focused. These images not only make the content more relatable but also help users quickly grasp the platform’s functionalities, trustworthiness, and future potential.

   
   

5. Establishing a Consistent Brand Identity:

   In addition to presenting technical details and project milestones, I dedicated effort to building a coherent brand identity for VoteChain 2.0. Consistent color schemes, typography, and thematic graphics ensure that users have a cohesive experience as they browse the website, read blog posts, and learn about the platform. This consistent identity contributes to the project’s credibility and sets a professional tone.

   
   

Reflecting on My Contributions:

My work on the website and the associated blog content was driven by a desire to ensure that VoteChain 2.0’s powerful technologies—ResilientDB’s secure blockchain infrastructure, the decentralized architecture, and the advanced voting mechanisms—are presented in a way that is easily understandable and appealing. The site and the associated publications aim to inspire confidence, spark curiosity, and invite participation from a wide range of audiences.

By focusing on education, aesthetic design, and clear communication, I helped transform complex backend systems and advanced cryptographic methods into a narrative that is accessible and meaningful. In doing so, I aimed to pave the way for communities to confidently adopt the platform, engage in secure and transparent decision-making, and ultimately embrace a new era of voting integrity and fairness.