|
| 1 | +--- |
| 2 | +title: "Forum Revamp: Final Report (GSoC 2024)" |
| 3 | +date: 2024-08-24T12:04:13+05:30 |
| 4 | +draft: false |
| 5 | +author: Waishnav Deore |
| 6 | +type: post |
| 7 | +--- |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +Hello Readers, |
| 12 | + |
| 13 | +This blog is dedicated to summarizing the work that we have done and goals that we have met in Google Summer of Code 2024 for the **Forum Revamp Project**. |
| 14 | + |
| 15 | +**Table of Contents** |
| 16 | +{{< toc >}} |
| 17 | + |
| 18 | +## About the Project |
| 19 | + |
| 20 | +Currently, our forum is built using [simple_discussion](https://github.com/circuitverse/simple_discussion) Rails engine, which lacks many features which we needed. The main goal of this project is to revamp the forum with new features such as a Markdown Editor for drafting forum posts, moderation tools, spam reporting features, a leaderboard for active forum users, and more. |
| 21 | + |
| 22 | +So far, we have covered and implemented the following features in the first phase of the project: |
| 23 | + |
| 24 | +<!--* **Removed old unsupported Rails versions from Appraisal Tests** --> |
| 25 | +<!--* **Fixed CI fails and improved the development environment**--> |
| 26 | +* **Language Filter to gatekeep inappropriate language** |
| 27 | +* **Report as Spam feature** |
| 28 | +* **New forum thread notification in Slack channel** |
| 29 | +* **Added SimpleMDE Markdown editor for drafting messages** |
| 30 | +* **Markdown syntax extension for embedding circuits, embedding video and user tagging** |
| 31 | +* **Search functionality on all the forum threads** |
| 32 | +* **Leaderboard ranking page and points distribution on contribution in forum** |
| 33 | +* **Improve the documentation according to newly added features** |
| 34 | + |
| 35 | +For detailed implementation of these features do checkout the biweekly blog posts [here](https://waishnav.github.io/blog/tags/gsoc/). |
| 36 | + |
| 37 | +--- |
| 38 | + |
| 39 | +## Accomplishments |
| 40 | +### 1. Language Filter and Profanity Check |
| 41 | + |
| 42 | +Since the forum is public, it is crucial to gatekeep inappropriate language. This problem is common in public forums where users sometimes use inappropriate language. To solve this problem, we used the `language_filter` gem, which allows us to filter inappropriate words from forum posts. |
| 43 | + |
| 44 | +The idea is to throw an error message to the user if the post contains any inappropriate language. |
| 45 | + |
| 46 | + |
| 47 | + |
| 48 | +--- |
| 49 | + |
| 50 | +### 2. UI-UX Improvements |
| 51 | + |
| 52 | +The following are some small UI-UX improvements we have made to the forum post card: |
| 53 | + |
| 54 | +#### a. Dropdown in Forum Post Card for Actions |
| 55 | + |
| 56 | + |
| 57 | +#### b. Jump to Solution Button and Highlighted Solution |
| 58 | + |
| 59 | + |
| 60 | +--- |
| 61 | + |
| 62 | +### 3. Report as Spam Feature |
| 63 | + |
| 64 | +We have covered the language filter to gatekeep inappropriate language. However, there are still chances that users can post spam content since the `language_filter` gem is not that powerful. To mitigate this, we implemented the **Report as Spam** feature. This feature allows users to report a post as spam. Once reported, the post will be reviewed by moderators. |
| 65 | + |
| 66 | +To learn more about the implementation details, you can check out my biweekly blog post on my GSoC experience [here](https://medium.com/@waishnav/moderation-tools-and-spam-reports-week-3-4-report-gsoc24-circuitverse-f0d214648bf3). In the blog, I've discussed each aspect of the implementation in detail. |
| 67 | + |
| 68 | +##### a. Report as Spam Modal |
| 69 | + |
| 70 | + |
| 71 | +##### b. Moderator Review Page |
| 72 | + |
| 73 | + |
| 74 | +--- |
| 75 | + |
| 76 | +### 4. Slack Notification for New Forum Thread |
| 77 | + |
| 78 | +Currently, Slack is our main communication channel for both contributors and users. To keep the community updated about new forum threads, we implemented the Slack notification feature. This feature notifies the Slack channel about new forum threads. |
| 79 | + |
| 80 | +It was fairly simple to implement, thanks to the `noticed` gem and Slack webhook integration documentation. Every time a new forum thread is created, the Slack community will be notified. |
| 81 | + |
| 82 | +{{< video src="/images/waishnav_deore/slack-notification.mp4" type="video/mp4" preload="auto" >}} |
| 83 | + |
| 84 | +--- |
| 85 | + |
| 86 | +### 5. Markdown Editor |
| 87 | +##### a. Markdown editor using SimpleMDE |
| 88 | + |
| 89 | +This feature is significant as it allows users to draft forum posts in Markdown format. It can be useful for adding more features like embedding CircuitVerse circuits, tagging users, embedding YouTube videos, and more using Markdown syntax extensions. So far, we have added the Markdown editor without any extensions, which will be added in the next phase of the project. |
| 90 | + |
| 91 | +Here is how the Markdown editor looks: |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | +##### b. Markdown Syntax extension |
| 96 | + |
| 97 | +As our needs for this forum to be used in production, we need to able to embed the circuitverse ciruits, youtube video and user tagging. |
| 98 | + |
| 99 | +For this implementation, I extended the markdown syntax both at client side using regex and server side using [redcarpet gem](https://github.com/vmg/redcarpet). |
| 100 | + |
| 101 | +###### 1. Circuit Embedding |
| 102 | + |
| 103 | +###### 2. Video Embedding |
| 104 | + |
| 105 | +###### 3. User tagging |
| 106 | + |
| 107 | + |
| 108 | +--- |
| 109 | + |
| 110 | +### 6. Topic Search |
| 111 | + |
| 112 | +Searching is important aspect, it can help user to search for issue/discussion which they are looking for. Also it can help reduce the duplicate or similar discussion. |
| 113 | + |
| 114 | +Since we are working on gem (library), we can't be sure where this gem can be used. I mean, it can be used in rails application with Postgres as db, MySQL as db or any other db. |
| 115 | +If we have had vendor locked the db as Postgres, search feature can be implemented through [Postgres's Full text search](https://www.postgresql.org/docs/current/textsearch.html). |
| 116 | +But we can't do that. So we have to give users of this engine option to override the default search functionality with their own implementation. |
| 117 | + |
| 118 | +Here is the video of search functionality which will be going to be used by CircuitVerse using [PgSearch](https://github.com/Casecommons/pg_search) gem. |
| 119 | + |
| 120 | +{{< video src="/images/waishnav_deore/topic-search.mp4" type="video/mp4" preload="auto" >}} |
| 121 | + |
| 122 | +--- |
| 123 | + |
| 124 | +### 7. Leaderboard Ranking |
| 125 | + |
| 126 | +Ranking is important for judging the credibility of a message, and it's also crucial for recognizing the contributions of forum members. |
| 127 | + |
| 128 | +During the implementation, I got little confuse where the distribution of the points logic should exists, in the controller or in the model file. Then I read few blogs on fat model and slim controllers and vice versa. |
| 129 | +In the rails, these conventions are very helpful and important, depending on it's usecase one can utilize this concepts. |
| 130 | + |
| 131 | +Here is the screenshot of leaderboard page. Note: UI of leaderboard may change later |
| 132 | + |
| 133 | + |
| 134 | + |
| 135 | +--- |
| 136 | +## Pull Requests |
| 137 | + |
| 138 | +- `Week 1:` [Adding supported Rails versions in Appraisal](https://github.com/CircuitVerse/simple_discussion/pull/22) |
| 139 | +- `Week 2:` [Fixing CI fails](https://github.com/CircuitVerse/simple_discussion/pull/23) |
| 140 | +- `Week 3:` [Adding language filters and UI changes](https://github.com/CircuitVerse/simple_discussion/pull/24) |
| 141 | +- `Week 4:` [Report as spam and moderation review page](https://github.com/CircuitVerse/simple_discussion/pull/25) |
| 142 | +- `Week 5:` [Slack notification in specific channel for new thread](https://github.com/CircuitVerse/CircuitVerse/pull/5005) |
| 143 | +- `Week 6:` [Markdown editor using SimpleMDE](https://github.com/CircuitVerse/simple_discussion/pull/26) |
| 144 | +- `Week 7:` [Markdown syntax extension](https://github.com/CircuitVerse/simple_discussion/pull/27) |
| 145 | +- `Week 8:` [Topic search on Forum Threads](https://github.com/CircuitVerse/simple_discussion/pull/28) |
| 146 | +- `Week 9:` [Moderator delete access](https://github.com/CircuitVerse/simple_discussion/pull/29) |
| 147 | +- `Week 10:` [Leaderboard Page and Ranking](https://github.com/CircuitVerse/simple_discussion/pull/32) |
| 148 | +- `Week 11:` [Improved Documentation](https://github.com/CircuitVerse/simple_discussion/pull/33) |
| 149 | + |
| 150 | +--- |
| 151 | + |
| 152 | +## Blogs |
| 153 | +CV community encourage to document each and every aspect of project. So I posted the biweely blogs and shared the progress as well as the implementation details in depth of each features and documented the whole project. |
| 154 | +You guys can checkout these blogs [here](https://waishnav.github.io/blog/tags/gsoc/) |
| 155 | + |
| 156 | + |
| 157 | +## What's Next? |
| 158 | + |
| 159 | +I’m excited to continue to contribute to this incredible open-source project which helps students to design and learn about digital circuit design. |
| 160 | + |
| 161 | +Additionaly, I started to work on this project with the thought that this revamped forum gem will be distributed and published as different name, instead of `simple_discussion` |
| 162 | + |
| 163 | +--- |
| 164 | + |
| 165 | +## Learning |
| 166 | + |
| 167 | +Following are the key takeaways from the first phase of the project: |
| 168 | + |
| 169 | +- The importance of `git rebase` over `git merge` for maintaining a clean git history. |
| 170 | +- Learning the internals of the Rails engine and how to integrate it with the main application. |
| 171 | +- Understanding the importance of testing and its significance as a gem maintainer and library author. |
| 172 | +- Improved debugging skills through extensive bug fixing. |
| 173 | +- The importance of feature flags in the Rails engine to toggle features through configuration. |
| 174 | +- Gaining confidence in navigating and understanding large codebases with the help of git commit history. |
| 175 | + |
| 176 | +--- |
| 177 | + |
| 178 | +## Acknowledgments and Conclusion |
| 179 | + |
| 180 | +Over the past few weeks, I've had an incredible journey contributing to CircuitVerse. The community has been supportive and motivating, and I had the freedom to meticulously plan and execute my tasks, all under the helpful guidance of my mentors. |
| 181 | +I've learned a lot about the inner workings of Rails Engine, and I've gained a lot of confidence in my abilities as a developer. |
| 182 | + |
| 183 | +I would like to thank my mentors, [Aboobacker MK](https://github.com/tachyons) and [Tanmoy Sarkar](https://github.com/tanmoysrt), for always being there to help me out and guiding me throughout the project. |
0 commit comments