|
| 1 | +--- |
| 2 | +title: "Enhancing CircuitVerse User Experience | GSOC2024 | Phase 1 Report" |
| 3 | +date: 2024-07-12T02:00:03+05:30 |
| 4 | +draft: false |
| 5 | +author: "Aman Asrani" |
| 6 | +type: post |
| 7 | +--- |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +Hii Everyone, |
| 12 | + |
| 13 | +Welcome to this blog, dedicated to summarizing the achievements of the first phase of Google Summer of Code 2024 for the project **Enhancing CircuitVerse User Experiance** |
| 14 | + |
| 15 | +### About the Project 🖥 |
| 16 | + |
| 17 | +> **[_Enhancing CircuitVerse User Experiance_](https://summerofcode.withgoogle.com/programs/2024/projects/h3QKa7eD) |
| 18 | +> The "Enhancing CircuitVerse User Experience" project is all about making CircuitVerse.org more engaging and user-friendly for everyone who loves digital circuits by introducing many features such improving SSO integration,better learning management system (LMS) and single sign-on (SSO) integration, plus email verification for extra security, Logs Mtransitioning to more efficient UI components will help create a smoother and safer user experience,Weekly Contest, Logs Maintenance, UI-Based Language Contribution** |
| 19 | +
|
| 20 | +So far, we have covered and implemented the following features in the first phase of the project: |
| 21 | + |
| 22 | +- SAML Based SSO |
| 23 | +- Email Verification During Registration for New Users |
| 24 | +- Send Email Verification button |
| 25 | +- POC for Email Verification for Pre-Existing Users |
| 26 | +- Migration to View Components |
| 27 | +- Logs Maintenance |
| 28 | + |
| 29 | +### SAML based SSO |
| 30 | + |
| 31 | +Single sign-on (SSO) is an identification method that enables users to log in to multiple applications and websites with one set of credentials. SSO streamlines the authentication process for users.SAML (Security Assertion Markup Language) is a markup language designed for exchanging authentication information between the user, the identity provider, and the service provider. |
| 32 | + |
| 33 | +We initially encountered a number of problems, some of which were due to gem devise-saml-authenticable and gem ruby-saml versioning compatibility. Finally, we were able to redirect to the OKTA login page and obtain the SAML answer after addressing these issues. However, we then ran into a problem while trying to sign the user, which took too much time. During a meeting with Tanmoy Bhaiya, we discovered that the create method in the saml_sessions_controller was being overridden by the create method from the devise_saml_authenticable gem. Finally, SAML-based SSO worked smoothly. |
| 34 | + |
| 35 | +**Checkout the Below Video** |
| 36 | +{{< video src="/images/Aman_Asrani/sso.mp4" type="video/mp4" preload="auto" >}} |
| 37 | + |
| 38 | +##### Pull Requests |
| 39 | +- PR : [SAML Based SSO](https://github.com/CircuitVerse/CircuitVerse/pull/4989) |
| 40 | + |
| 41 | +### Email Verification at the time of User Registration |
| 42 | + |
| 43 | +Currently, CircuitVerse doesn’t verify user's emails during registration, so we need to implement email verification at that time. Initially, we used Sendrik as the email service, but then get to know that CircuitVerse already has access to AWS. So, switched to using AWS SES (Simple Email Service) to send confirmation emails. |
| 44 | + |
| 45 | +**How I Implemented? You can see the Flow below** |
| 46 | + |
| 47 | + |
| 48 | +**Checkout the below Video For better Understanding** |
| 49 | +{{< video src="/images/Aman_Asrani/emailVerificationUsingDeviseConfirmable.mp4" type="video/mp4" preload="auto" >}} |
| 50 | + |
| 51 | +##### Pull Requests |
| 52 | +- PR : [Email Verification during during user registration](https://github.com/CircuitVerse/CircuitVerse/pull/4993) |
| 53 | + |
| 54 | + |
| 55 | +### Resend Email Verification Functionality |
| 56 | + |
| 57 | +There should be a button to resend emails in case there is a failure in sending the initial email. This failure could be due to issues with AWS or any other reason. To address this, We have added a button that allows users to resend the verification email. Fortunately, all the logic for handling this is already managed by the Devise gem, which is very convenient. This ensures that users can receive their confirmation emails without any hassle, even if there are technical difficulties. Below are the screenshots showing this new feature. |
| 58 | + |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +##### Pull Requests |
| 64 | +- PR : [Send Email Verification button](https://github.com/CircuitVerse/CircuitVerse/pull/4994) |
| 65 | + |
| 66 | +### POC for Email Verification for Pre-Existing Users |
| 67 | + |
| 68 | +One of the most crucial question for the task Email Verification at the time of User Registration is “ What to do with Pre-Existing Users?”. Earlier we thought to treat the Pre-Existing Users as verified but the problem with this approach is that existing users who added fake emails will get verified and also we couldn’t block them suddenly that they should verify their email first to continue. So, created the POC in the below video: |
| 69 | +{{< video src="/images/Aman_Asrani/pocEmailVerificationForPreExistingUsers.mp4" type="video/mp4" preload="auto" >}} |
| 70 | +However, we haven’t test this method yet because of having an unknown database error which still trying to resolve |
| 71 | + |
| 72 | +### Migration to View Components |
| 73 | + |
| 74 | +As part of this project, one of primary tasks has been to migrate several components to use ViewComponent. This migration is aimed at improving the maintainability, readability, and reusability of our codebase. By encapsulating UI logic within ViewComponents, we can ensure a cleaner separation of concerns, making the code easier to test and update in the future. Below is a summary of the PRs I have created for this migration effort: |
| 75 | + |
| 76 | +#### Migrate Home page Buttons to a View Component: |
| 77 | +Migrates the buttons on the home page to a dedicated ViewComponent.Included Test for button component, which is the beauty of view component that we can create test for the individual Componentand also added the Preview for the component |
| 78 | + |
| 79 | + |
| 80 | +##### Pull Requests |
| 81 | +- PR : [Migrate Home page Buttons to a View Component](https://github.com/CircuitVerse/CircuitVerse/pull/4998) |
| 82 | + |
| 83 | +#### Migrate feature card to view component: |
| 84 | +Created FeatureCardComponent to handle the feature card logic. Added tests and previews with detailed annotations and parameters. |
| 85 | + |
| 86 | + |
| 87 | +##### Pull Requests |
| 88 | +- PR : [Migrate feature card to view component](https://github.com/CircuitVerse/CircuitVerse/pull/5002) |
| 89 | + |
| 90 | + |
| 91 | +#### Migrate-featureExampleCard-to-view-component: |
| 92 | +The component includes logic for image preview, title, and URL generation. Also added tests and previews with notes and parameters to demonstrate usage. |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +##### Pull Requests |
| 97 | +- PR : [Migrate-featureExampleCard-to-view-component](https://github.com/CircuitVerse/CircuitVerse/pull/5003) |
| 98 | + |
| 99 | +#### Migrate-CircuitCard-to-view-component: |
| 100 | +Created `CircuitCardComponent` to encapsulate the rendering logic for circuit cards. Handled edge cases such as non-existent or nil project names in parameters. Added comprehensive tests and previews with annotations. |
| 101 | + |
| 102 | +**Checkout the Below Video which shows Previews of `CircuitCard` and `FeaturedExampleCard` with Annonations** |
| 103 | +{{< video src="/images/Aman_Asrani/previewFeaturedExampleCardAndCircuitCard.mp4" type="video/mp4" preload="auto" >}} |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | + |
| 108 | +##### Pull Requests |
| 109 | +- PR : [Migrate-CircuitCard-to-view-component](https://github.com/CircuitVerse/CircuitVerse/pull/5010) |
| 110 | + |
| 111 | + |
| 112 | +#### Migrate footer partial into a view component: |
| 113 | +Added Small Small Components for better readability and maintanibility |
| 114 | +- Moved the footer links rendering into `FooterLinksComponent` |
| 115 | +- Moved the social links rendering into `SocialLinksComponent` |
| 116 | +- Integrated both components into the main `FooterComponent` |
| 117 | +- Moved the footer rendering logic from the partial into `FooterComponent` |
| 118 | + |
| 119 | + |
| 120 | + |
| 121 | +##### Pull Requests |
| 122 | +- PR : [Migrate footer partial into a view component](https://github.com/CircuitVerse/CircuitVerse/pull/5011) |
| 123 | + |
| 124 | +#### Migrate-SocialCard-to-view-component: |
| 125 | +The component includes logic for image preview, title, and URL generation. Also added tests and previews with notes and parameters to demonstrate usage. |
| 126 | + |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +##### Pull Requests |
| 131 | +- PR : [Migrate-SocialCard-to-view-component](https://github.com/CircuitVerse/CircuitVerse/pull/5012) |
| 132 | + |
| 133 | + |
| 134 | +### Logs Maintenance |
| 135 | + |
| 136 | +Initially, We had considered setting up a Git Hook. However, this approach would likely requirestoring the logs in our database, which is an expensive task. |
| 137 | +Instead, I've found that we can leverage the GitHub API to fetch the logs, similar to how we currently retrieve contributor information (see attached image). |
| 138 | + |
| 139 | + |
| 140 | + |
| 141 | +> This is under progress and will complete in first week of Second Phase. |
| 142 | +
|
| 143 | + |
| 144 | + |
| 145 | +## Learning |
| 146 | + |
| 147 | +--- |
| 148 | + |
| 149 | +- Understand many New Conceps of Ruby On Rails |
| 150 | +- Learn about the SQL and PostgreSQL databases |
| 151 | +- Gain experiance in AWS, particularly in using AWS-SES for email verification during user registration. |
| 152 | +- Acquired comprehensive knowledge of Single Sign-On (SSO) concepts. |
| 153 | +- Learned about View Components and their implementation. |
| 154 | +- Expanded experience in writing tests for individual components. |
| 155 | +- Improved debugging skills through extensive bug fixing. |
| 156 | + |
| 157 | + |
| 158 | +## Conclusion |
| 159 | + |
| 160 | +--- |
| 161 | + |
| 162 | +The journey has been truly amazing, filled with both challenges and growth. The community has been incredibly encouraging and motivating, providing a lot of freedom while being guided by our mentors. I have learned a great deal about how large projects are managed, and this experience has greatly boosted our confidence as developers. |
| 163 | + |
| 164 | +I would like to thank, |
| 165 | +[Aboobacker MK](https://github.com/tachyons), [Smriti Garg](https://github.com/smritigarg), [Tanmoy Sarkar](https://github.com/tanmoysrt), [Vedant Jain](https://github.com/vedant-jain03), [Arnab Das](https://github.com/Arnabdaz) for giving me chance for this incredible opportunity and guiding me throughout the project. |
0 commit comments