Articles on SundeepChand's Blog

Weekly Blog Post | GSOC'21 | #12

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 23 Aug 2021 04:22:04 +0000

This blog post marks the end of Google Summer of Code 2021.

What did I do this week?

This week I worked on doing minor bug fixes and started the implementation of shareable search result links feature. Since this PR is not merged yet, I am yet to finalize the implementation of the feature. Once the above PR is merged, the implementation of the shareable search result links feature would be finalized.

What next?

Even though this week officially marks the end of this amazing program, I will continue contributing to the project and improve it further.

Thank you!!

I am extremely thankful to my mentors for giving me this opportunity. All these things would not have been possible without your support, motivation and guidance.

Here is a link to my GSoC 2021 final report: GSoC-2021-Project-Report

Cheers!

Weekly Check-In | GSOC'21 | #11

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 16 Aug 2021 08:50:47 +0000

Hi there! Today marks the beginning of the last week of this amazing summer program.

What did I do this week?

This week I updated the UI for the filters section of stories, resulting in this PR. To do this, I had to implement custom check-box & radio button designs. For this I found this resource quite useful.

To fetch stories that have one or more categories, I am passing an array of values in the GraphQL filter. For example, to fetch stories having categories, "Bug" or "Documentation", the following query can be used:

query { userStories ( where: { Category: ["Bug", "Documentation"] } ) { Title Category } }

This same pattern can be extended to filter stories having different statuses, categories and so on. So that's how I implemented the filters feature.

What is coming up next?

This week I will be working on fixing bugs, and finalize the things.

Did I get stuck anywhere?

Weekly Blog Post | GSOC'21 | #10

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 09 Aug 2021 08:19:20 +0000

Hi all!

What did I do this week?

This week I finished the integration of Google OAuth Authentication (Link to PR). Apart from that, I explored the story filtering options available in Strapi GraphQL query, so that we can implement the updated filters UI.

What is coming up next?

After discussing with my mentors I have finalized the approach to implement the updated search UI, which I will be finishing this week.

Did I get stuck anywhere?

Weekly Check-In | GSOC'21 | #9

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 02 Aug 2021 05:49:39 +0000

Hey there everyone!

What did I do this week?

This week I worked on fixing some of the UI stuff. First of all I added the skeleton loader, to the stories. Here is the link to the PR. Then I implemented the product selection UI (PR Here). Apart from that, after discussion with my mentors, I worked on the initial setup of Google OAuth integration.

What is coming up next?

I will be finishing the OAuth integration within 1-2 days. Then as I have discussed with my mentors, I will be working on implementing custom API endpoints this week for performing search of stories, because the default endpoints provided by Strapi are not optimised enough.

Did I get stuck anywhere?

Nothing particular.

Weekly Blog Post | GSOC'21 | #8

sundeep.chand2001@gmail.com (SundeepChand) — Tue, 27 Jul 2021 03:44:18 +0000

Hi everyone!

What did I do this week?

This week I worked on fixing some bugs in the frontend code. First of all I cleaned up the Github Actions workflow file by combining the Jobs for running linting tests into a single job. This led to the removal of some redundant code from the workflow file (Link to PR). Then I fixed some issues with the notification menu (PR here). And finally I added a skeleton loader to the profile page, instead of the spinning loader (See PR here). Apart from that I along with @Harshita worked on adding the image gallery in Story page to display the attachments (Link to PR).

What is coming up next?

This week my mentors sent the updated UI designs of the homepage and the story page. So I will be working on implementing those designs. Along with that I will work on fixing some more existing bugs.

So that's all for this blog post. Thanks for reading. See you in the next one : )

Weekly Check-In | GSOC'21 | #7

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 19 Jul 2021 10:35:05 +0000

Hello!

The first evaluation period is over now, and first of all, I would like to thank my mentors, @Cynthia Sanchez, @Sorin Curescu, @Kartikay Bhutani, @Aditya Sharma, @Devesh Vijaywargiya, @Shashank, for guiding me through this journey.

What did I do this week?

This week I worked on updating the Stories section in the homepage, user profile page and my stories page by combining the corresponding parts of code into a single React component, thus leading to almost 40% reduction of code in these pages and giving a unified look to the stories section. You can checkout the PR here. Apart from that I worked on optimising the stories search in the New Story page by dynamically fetching the stories from backend as the user types in the story title (Link to PR).

What is coming up next?

I will work on fixing the Cypress tests that I wrote last week. Even though the tests pass most of the times, on certain instances they fail. I am guessing that its failing due to some sort of race condition, which I will be digging up further, this week. Apart from that I will also work on adding more tests and fix some more issues.

Did I get stuck anywhere?

Yeah, while optimising the stories search, I faced difficulty while implementing debounce along with react-promise-tracker and react-hook-form libraries. However, I found some online resources that helped me in accomplishing the goal:

So that's all for this blog post. Have a nice day.

Weekly Blog Post | GSOC'21 | #6

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 12 Jul 2021 10:25:23 +0000

Hey folks. Hope you are doing well. So we are almost half way through this awesome program.

Implementing file attachments for New story and comments

This week me and my GSOC partner @Harshita Mangla alongwith our amazing mentor @Aditya Sharma worked on implementing support for file attachment feature while creating New Story, and posting comments and comment replies. Implementing the file upload feature required us to figure out the way to handle multipart/form-data in strapi. You can read more about implementing file upload in strapi here. Our mentor helped us setup the file upload feature when creating a New Story. Then we worked on implementing file uploads for comment and comment replies. Here is the link to an article that I referred to, while styling the file input. Apart from that we worked on refactoring that part of code and adding more details to the UI so that the user can add/remove files as per their wish. And here is the link to the final PR.

What's coming up next?

Since the file uploads was a high priority feature, we decided to finish it first. So, I had paused my work on the refactoring of Home.js, MyStories.js and Profile.js and shareable links for search results feature during this week. So I will start working on it next, once the file uploads feature is finalised.

So that's all for this blog post. Have a great day.

Weekly Check-In | GSOC'21 | #5

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 05 Jul 2021 06:55:05 +0000

Hi There!

What did I do this week?

This week I updated the Cypress tests in this PR to use data-cy to select the DOM elements in a way that is resilient to changes in the markup. You can read more about the Cypress best practices here. Next I started working on shareable search results link feature and here is the PR for that. However, I was stuck in figuring out a better way to manage the search filters state. Also, we decided to work on improving the code quality first, by refactoring the GraphQL queries, resulting in this PR.

What is coming up next?

I will work on improving code quality further by adding a proper state management mechanism, and finish the implementation of shareable search results link feature. Apart from that I will also work on refactoring some of more files as has been suggested by my mentor.

Did I get stuck anywhere?

Yes, I need to figure out, how to replace multiple useState() hooks with a useReducer() hook in our codebase, to improve the state management. Then only I can implement the shareable search results link feature.

So that's all in this blog post, see you next week!!

Weekly Blog Post | GSOC'21 | #4

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 28 Jun 2021 06:50:10 +0000

Hello Everyone!!

This blog post marks the beginning of the 4th week of my GSOC journey. Talking about the work I did during my 3rd week, I was not able to give enough time as I was a little busy with some of my college society work. However, since I am free from that work now, this week I will be working a little extra to make up for that.

Work done this week

Now talking about the improvements made this week, we have replaced CKEditor 5 with a markdown editor after discussing with my mentors, since customising CKEditor 5 as per our needs would have required us to create and maintain a new build of CKEditor which would have been quite cumbersome. Hence we decided to go for a markdown editor instead for now.

What's coming up next?

I have added shareable search results for product and category filters. I will be expanding it for other filters this week and create a PR soon. Apart from that my mentors suggested about working on improving the code quality for the frontend, since the codebase has grown bigger as more and more features have been added. So it is necessary to remove redundancy and make the components more reusable before adding features further. Hence we will be working in that direction along with the Cypress tests this week, once we are done with the features that are in progress.

So that's all in this blog post. Happy coding :)

Weekly Check-In | GSOC'21 | #3

sundeep.chand2001@gmail.com (SundeepChand) — Mon, 21 Jun 2021 05:38:45 +0000

Hey Folks! I hope you're doing well.

What did I do this week?

This week the PR to seed the strapi server in test environment got merged. However, after merging it we realised that there were certain issues with my approach of creating the docker images. Basically, the issue was with the way I had tagged the images, so I've submitted a PR fixing the issue. I also updated the previously written Cypress tests, to use the newly seeded data. Once, the docker image setup is fixed this week, we would be all set to write more tests, & run them in github actions.

Apart from that, I also worked on implementing the request templates feature. Creating the strapi collection for this and setting up it on the frontend was simple. However, one of the challenging part is to add the support for custom placeholder text in CKEditor, about which I am researching a bit.

What is coming up next?

I will add the support for custom placeholder in template text. After that I will be updating the test suite, to include some of the newly added features. I will also try to add the shareable search results feature.

Did I get stuck anywhere?

I was stuck in figuring out the implementation of placeholder text, in request templates. I implemented a hacky solution for this, and after discussing about this with my mentors, the general conclusion was that it can be made better. So I spent some time learning the architecture of CKEditor and how to configure it. So far, I have figured out some of the bits and pieces that will be used to implement the feature, and now its time to put it all together.

Next week I will be sharing more about the final implementation request templates feature. So that's all for this blog post, thank you for reading.

Weekly Blog Post | GSOC'21 | #2

sundeep.chand2001@gmail.com (SundeepChand) — Sun, 13 Jun 2021 18:35:20 +0000

Hi Everyone!

The first week of coding period flew by in almost no time and we are here, about to start the second week.

Implementing Search Feature

Coming to the work I did this week, I finished implementing the stories search feature. This provides our users the facility to search for stories by title and by the author name as well. To implement the search by title feature, I used the Title_contains filter provided by the Strapi GraphQL API. This filter basically takes an input string and returns all those stories whose title contains the input string as a sub-string. The resulting stories fetched are then updated on the frontend. To implement search by story author, I had to perform two steps: first, search the author by username as the user types in, by using a approach similar to the one mentioned earlier, and recommend them to the user. Second, once the user finds the author name, search for all the stories created by that particular author and return them. Again Strapi provides queries in its GraphQL API to perform these kinds of filtering. To implement the user suggestion on the front-end, I created a custom React component that makes API requests to the back-end to fetch the user info and displays them. I also used the axios.CancelToken to cancel the older, unfinished requests as the client makes newer ones, so as to reduce the load on server.
So here is the link to the PR: Implement Search

Setting up Github Actions to run Cypress tests

Apart from that I also worked on setting up Github Actions to run Cypress tests for the front-end. However, the challenging part in this was to seed the database to run the end-to-end tests. So for that, I worked on a script that automatically seeds the database with some sample data when strapi starts-up. Finally, we can create a Docker image of this strapi server and use it to run the end-to-end tests in Github Actions CI pipeline. Below are the links to the corresponding PRs.

I will get these reviewed by my mentors this week and work on getting these merged, so that we can start writing the tests. Also I will start working on the request templates feature this week. So that's all for this blog post.

Happy coding!!

Weekly Check-In | GSOC'21 | #1

sundeep.chand2001@gmail.com (SundeepChand) — Tue, 08 Jun 2021 03:51:21 +0000

Hello World!

I am Sundeep Chand, a Computer Engineering sophomore at Delhi Technological University. India. I am super-excited that I will be collaborating with our fantastic team of mentors and student developers, in contributing features to the EOS User Story Project.

What did I do this week?

After the kick-off meeting, we worked on migrating the projects from GitLab to GitHub. And my role was to configure GitHub Actions for the EOS User Story Project, to run the tests and deploy the website to GitHub Pages, as well as for the EOS Strapi project, to create a docker image of the strapi backend and upload it to the GitHub Container Registry. So I spent some time learning about GitHub Actions. Then I worked on migrating my Pull Requests from GitLab to GitHub. And the rest of my time was spent in collaborating with my GSOC partner, Harshita, in planning the execution of tasks and setting up the project board.

What is coming up next?

I will be working on implementing the search feature for the stories, which will include search by story title and search by author name. I will also be implementing the corresponding unit/end-to-end tests in Cypress.

Did I get stuck anywhere?

When I tried to introduce caching for node_modules in GitHub Actions, so that it does not install the node_modules again and again, I faced a strange issue that the cache did not work properly. After going through a few blog posts on caching I was able to solve the issue.

So that's all for this blog post. Looking forward to have a great time contributing new features to the EOS User Story project.

Thank you for reading!!