Articles on dvijaywargiya's Bloghttps://blogs.python-gsoc.orgUpdates on different articles published on dvijaywargiya's BlogenTue, 01 Sep 2020 03:27:40 +0000Final Wordshttps://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-words/<p><a href="https://gitlab.com/dvijaywargiya/gsoc-2020-project-report">Link to final report</a></p> <p><a href="https://gitlab.com/SUSE-UIUX/eos-user-story">Link to repository</a></p> <p><a href="https://userstory.eosdesignsystem.com/">Link to production</a></p> <p> </p> <p>Thank you Python Software Foundation for giving me this incredible opportunity. I got to learn a lot of new things and made several good contacts.<br> I hope to continue contributing to my organisation. Looking forward to what life throws at me next.</p> <p>Super signing off!</p>dvijaywargiya@gmail.com (dvijaywargiya)Tue, 01 Sep 2020 03:27:40 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-words/Final Blog GSoC 2020https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-blog-gsoc-2020-1/<p>We are in the endgame now. Haaha!</p> <p>The past few months have been amazing. The discussions and the long distance collaboration has given me a completely new perspective of the technology industry. I don't have much to say about this week. Spent most of my time working on small bugs here and there and optimising the code. I did not face any issues. I'll continue to work on small details of the project in this last upcoming week.</p> <p> </p> <p>Signing off!</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 24 Aug 2020 17:59:39 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-blog-gsoc-2020-1/Final Check In GSoC 2020https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-check-in-gsoc-2020/<p>Hello all!<br> <br> So, I am into the final week now and what a ride it has been. Haaha!!</p> <p>The last two weeks have been mostly about completing the left over work in creating a most viable product. There were a few issues that were noticed as well. Me and my partner have been actively working on resolving all of them as well as adding small features here and there. Last week saw us working a lot on Error Handling and Security of our web application. I also worked on integrating React-Hook-Form which provided form validation at several places. Modifying the existing forms to incorporate this was a little tricky but the end result was worth the hard work. Apart from this, like I said earlier I have been working on migrating to the new UI as provided by my mentors and I think the progress there is decent as well.</p> <p>I did not face any issues, and am looking forward to finishing up the project in the best possible manner in the coming few days.</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 17 Aug 2020 18:33:01 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/final-check-in-gsoc-2020/Weekly Check In #6https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-6-13/<p>Hello all!<br> <br> Finally the last stage of GSoC is here. I think a most viable product is ready leaving out a few bugs which are being worked on right now.</p> <p>The last week saw a lot of work and several PRs got merged. The major highlight was a feature modification in the <em>New Story</em> page. I had created a <em>search dropdown </em>on this page. What it basically did was, when a user tried to add a title for his new story, the existing stories were searched using this text as keywords and the relevant results were shown. Now, I got a new design for the way these results were supposed to be shown whose implementation was a little tricky because to achieve the desired result I had to make changes to elements in the DOM based on change in screen size. It took some time but I was able to achieve the required functionality. I employed <em>useLayoutEffect</em> React hook to add the relevant event listener. Apart from this I worked on resolving several bugs and added minor components in existing UIs. One such fix was on the <em>My Stories</em> and <em>User Profile</em> page where the stories were not getting displayed because the <em>StoriesList</em> component (that is used for displaying the stories) was updated to require more input parameters.</p> <p>I did not face any issues this week and as the deadline approaches I'll be working on incorporating the final UI that has been given to me.</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 10 Aug 2020 10:15:57 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-6-13/BLOG POST #5https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/blog-post-5-1/<p> </p> <p>&lt;meta charset="utf-8"&gt;</p> <p><b>Hello all!</b></p> <p> </p> <p><b>It has been a crazy week work wise. Right now, I am looking forward to receiving the second part of my GSoC stipend. Got a few things in mind to buy. Haha!!</b></p> <p> </p> <p><b>The best news is that I’ll finally receive a design soon (probably within this week). Once I receive this I’ll have to revamp the entire product to meet the design requirements which seems like a humongous task right now, but I think it will be fun. So, let’s talk about what I did work wise. Until now, the Change Password functionality wasn’t implemented so I did that. For implementing this I first had to add a route to the Change Password Page on the user’s profile page. This was followed by creating a page for this. Creating the page did not take up a lot of time because I had already built the Authentication module, so it was simple copy pasting and changing a few things here and there. Apart from that I have created a Notification Dropdown which required a few additions. A View all notifications feature was added to the existing dropdown. Also, there was a small inconsistency in the dropdown UI that was noticed by one of the mentors which I fixed. While doing that I was able to refactor the SCSS a little bit leading to removal of some unnecessary code. I also added a You agree to these Terms and Conditions option on the Register page. Overall the week was quite active and I had fun.</b></p> <p><b>I wasn’t working on anything this week that required any additional reading so I did not get stuck anywhere. But as well know, working with SCSS is quite tricky so while writing the code I did get stuck but after a few trials I was successfully able to complete my work.</b></p> <p><b>Most of my time in this final phase of GSoC’20 will involve revamping the UI based on the design provided and I’m looking forward to it.</b></p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 03 Aug 2020 16:47:53 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/blog-post-5-1/Weekly Check In #5https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-5-8/<p> </p> <p>&lt;meta charset="utf-8"&gt;</p> <p><b>Hello all!</b></p> <p> </p> <p><b>The last week went a little slow for me. I had a college thing  to do apart from working on this project which took up some of my time.</b></p> <p><b>I was talking about creating a loading animation in last week’s blog. Happy to say that the feature was accepted by the mentors and the PR got merged. I think we are on the right track, and an MVP is almost ready. Apart from this I worked on little things. A few modifications were required on the Story page. My partner Aditya added backend logic for the voting mechanism and then I created a relevant UI for it. Also, the layout was a little inconsistent so I worked on perfecting that. After a few discussions we decided that we’ll have a Product specification as well, i.e. stories can be related to different products so I added the relevant dropdowns on the different pages and then Aditya took up the work of adding the logic.</b></p> <p><b>I did not face any issues over the past week and I am looking forward to what’s coming up next. I might be getting a new design for the entire platform soon, so I’ll probably work on that.</b></p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 27 Jul 2020 06:01:51 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-5-8/Blog Post #4https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/blog-post-4-1/<p>&lt;meta charset="utf-8"&gt;</p> <p>&lt;meta charset="utf-8"&gt;</p> <p><b>Hello all!</b></p> <p> </p> <p><b>The second evaluation is now quite near and I am a little nervous about it. </b></p> <p><b>Okay, so let us talk about what I did over the past few weeks in detail. The comments component is still under development. Me and my partner are still thinking about the best way to go about it. Multiple big PRs got merged in the master branch last week. Two of them were related to User Profile. I worked on creating two profile pages. One is the My Profile page, which will only be visible to an authenticated user. This page houses all the relevant details about the user, like their profile picture, their bio, username, email id, about information etc. and options to change/update these. The other is a more general Profile page which will be present for each user and anyone can open this page up. This page houses the relevant details about that particular user as well as all the stories that he/she has submitted. Creating these two pages based on the design and making them responsive was a little tricky and challenging but I was able to do it with help from my mentor. Once the UI for these was ready, it was the time for adding the relevant backend logic to these pages which was taken up by my partner Aditya. </b></p> <p><b>Apart from the Profile component, I worked on some UI fixes. My partner Aditya added a few features to pages which I then styled based on the theme of that page. Also, there were a few bugs here and there which I was able to point out and fix. By the end of the week, I thought that it would be relevant to add a Loading Animation in the UI wherever some Backend fetching is taking place. I looked up different ways to achieve it and finally decided on using a package called react-promise-tracker. After understanding how the package exactly works, I tried to add it in the existing code base one by one. After several tries I was able to create the functionality I was looking for and after a little review by mentors I finalised the design and put up a PR. A lot of the features are yet to be implemented or are half implemented so I’ll work on those in the upcoming week and probably finish up with a MVP before the 2nd evaluation.</b></p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 20 Jul 2020 18:28:00 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/blog-post-4-1/Weekly Check In #4https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-4-10/<p> </p> <p>&lt;meta charset="utf-8"&gt;</p> <p><b>Hello all!</b></p> <p> </p> <p><b>The past 6 weeks have been pretty amazing and I have learned a lot of new things. </b></p> <p><b>The last week was kinda smooth is what I'd say. I worked on the Comments component that will be added to the Individual Story page. A basic responsive UI is ready and it is working fine. Now we are working on implementing the exact logic for this component so that it supports all the features that any other similar platform offers. I also worked on the 'My Stories' page where users can view stories that they have submitted as well as stories that they are following (stories you have liked/commented). The PR for this was merged but the 'Following' section logic is yet to be done because its backend hasn't been created yet. Once the comments section work is finished followed by the 'liking' mechanism I'll work on this section and complete it. Other than this I worked on resolving several UI related issues that emerged when the backend connectivity was added.</b></p> <p><b>I did not face any major issue this week as a lot of the work was done by my partner this week. All the issues were resolved easily over a small video call and I think we are working at a decent pace.</b></p> <p><b>Now, I'll be working on the Comments section and ensure that all of its logic is finished by the end of this week. Also, I'll work on adding the 'like' feature on the story page. If I get time then I'll also work on the 'Timeline' of every story.</b></p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 13 Jul 2020 15:59:53 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-4-10/GSoC 2020 Blog Post (#3)https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-3/<p>Hello all!<br> <br> It has been over a month since the official coding period began and the first evaluation just got over. Just received a message saying 900$ have been deposited in my account. It is an amazing feeling and I can't describe how happy I am right now.</p> <p>The product finally got a name last week. We chose 'User Stories' as the name of this product. This was followed by changing the code to say 'User Stories' instead of 'Feature Requests'. Every submission will basically be a 'story' and not a 'request'. Over the past two weeks I have been working with creating and viewing a new story. Me and my partner have been working on multiple pages that will fetch content from the backend in a particular format and display it to the user. Also, there is one page called 'New Story' page will be used to create the new stories. This page is now complete with all the backend connectivity and we have been testing it. Apart from this, based on discussions with the mentor I worked on creating wireframes for a few more pages. We decided to add a 'My Profile' page which will house all the information about the user (Profile picture, username, email, about etc). There will be two types of user profiles. One that the user opens up and can change the content that is being shown and the other is when some other user opens up your profile where they can see the information about you as well as your 'stories'. I worked on creating designs for this and after a few rounds of discussions they were approved. I have also been working on a 'My Stories' page but that is still under discussion so I'll probably talk about it next week.</p> <p>I did not face any issues this time around. The only places I got stuck were related to the backend connectivity and a few calls with my partner resolved all of them. <br> Like I said, I'll work on the 'My Stories' page this week and complete all the backend logic for the other pages.</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 06 Jul 2020 14:52:21 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-3/Weekly Check In 3https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-3-10/<p>Hello all!<br> <br> It has been about 4 weeks since the official coding period started and the first evaluation is here. The entire month has been productive and I am having a lot of fun.</p> <p>This last week I was mainly working on the <strong>New Request </strong>page. As discussed with the mentors I first worked on creating a wireframe for this page using AdobeXD. After a few rounds of discussions the UI was finalised and I started working. One by one I created the different types of inputs that the users will be offered when they access this page. Simultaneously I was working on adding styles for these elements as well. I tried my best to reuse the existing SCSS '<strong>classes</strong>'. While doing this I ended up refactoring the entire SCSS. Basic idea in mind while refactoring was to make sure that the styling becomes as generic as possible and a standard styling is followed for all elements of the same type across the project. Apart from this, based on discussions with the mentors, we decided to add a <strong>Rich Text Editor </strong>instead of the traditional textarea for users to describe their request. This would give a better user experience. My partner Aditya took up the job of adding this element and he did a fantastic job. While I Aditya was working on the Editor I was working on making sure that the page is responsive and can be used across devices having different sizes. </p> <p>I was comfortable with the work I did this last week and did not face any issues or got stuck anywhere.</p> <p>Now, we will be working on completing the backend connectivity for the New Request page. This will be followed by testing the page by making a few dummy requests and viewing them in the backend. Also, I would work on displaying the requests in the frontend and other aspects associated with it.</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 29 Jun 2020 04:42:07 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-3-10/GSoC 2020 Blog Post (#2)https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-2/<p>Hello all!</p> <p>I am 3 weeks into the official coding period and they have been great. A little background, I am working on the Frontend aspect of my project where I am using the ReactJS framework to build a UI for the EOS Feature Request web portal.</p> <p>Last time I talked about working on a language toggling feature, which was successfully built. I used the <strong>useTranslation </strong>functionality provided by the '<strong>react-i18next</strong>' package. This gave me a function that can be called to trigger the change in language. I created a dropdown menu with the available languages to do it. It required me to create separate files for the individual languages (basically all the text to be displayed in all the available languages). When a user triggers a change in language the application will change the file it is using to display the content, thereby achieving a change in the display language. Once this feature was completed and its PR got merged, I started working on creating a Navigation bar which will be used to access different pages/options in the web portal. I created the Navigation bar, applied the relevant styles and added the different functionalities that were decided. Also, since the web portal is going to be public (i.e. everyone can view it), I developed the navigation bar in such a manner that Non-Authenticated users can only see a subset of the options and Authenticated users have access to everything. Simultaneously, I was also working on creating the New Request page which will be shown only to the authenticated users where they can request a new feature. This involved creating a form with all the relevant fields that the user will have to fill up in order to make a new request. I am still working on this last feature.</p> <p>I faced some problems initially while creating the navigation bar. The issue was regarding its position and responsiveness. Took some time and help but I was able to resolve all the issues and the corresponding PR got merged. I am stuck on a particular feature in the New Request page. A user will be allowed to attach media (images/videos) as a part of their feature request, and I am thinking what would be the best way to achieve that. Basically, working on answering these questions: What formats should be supported? How these files will be stored on the server? What kind of file choosing mechanism I should provide to the user? etc.</p> <p>I'll wrap up with the New Request page functionality as soon as possible and then work on improving its UI based on inputs from the mentors and my project partner. Once, the entire New Request functionality is completed I will probably work on making sure that everything built is working properly and is inline with the expectations. This is to make sure that I come out of the first evaluation with a positive feedback.</p> <p>Thanks for reading</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 22 Jun 2020 05:00:09 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-2/Weekly Check In 2https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-2-6/<p>Hello all!</p> <p>It has been about two weeks into the official coding period and I think they have been pretty productive.  Previously I worked on setting up a few things that will enable me to toggle between different languages in my Frontend, so this last week I worked on implementing this feature across the Authentication module I was worked on before. Apart from this I worked on resolving a few UI issues present in my Frontend. These were minor issue relating to colouring and positions of different components. Majority of the last week was spent on designing what the pipeline for the portal will look like. This included creating a simple wireframe initially and then creating a Mock UI using AdobeXD. I along with my mentors and partner (Aditya Sharma) had a good discussion over these and I kept on incorporating all the suggestions. </p> <p>I did face a few issues regarding positioning of a few elements but my mentor gave me a few suggestions and then I was able to sail through.</p> <p>Right now, I am waiting for my PR with the language toggling feature to get approved. Also, once the design for the pipeline is finalised I will start working on creating the user dashboard.</p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 15 Jun 2020 09:52:03 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/weekly-check-in-2-6/GSoC 2020 Blog Post (#1)https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-1/<p><b>Hello all!<br> <br> The coding period officially started last week and me and my partner Aditya Sharma began working on our project. Like I said earlier I was working on the Authentication module and that’s what I did. A design (which was created in AdobeXD) of what the expected end product should look like was given to me, which I used as a reference while writing the React code.  I started with setting up a React application using the "create-react-app" bootstrap method. This was followed by adding a bunch of dependencies ranging from router requirements, axios method for backend communication, linting and formatting checkers etc. My partner had done this previously so he helped me in setting up all of these. Once the directory structure was set up I began working on the authentication module. As I mentioned in my last blog post I started working on the Authentication module in the community bonding period itself, so I had a basic version of the module ready. Main thing that I had to do now was to make the interface look like the one I received as a part of the design. This involved writing SASS (which is basically like CSS) for the different pages and components. I also spent a lot of time on making sure that my UI was responsive and adaptable on different screen sizes. I submitted a PR for the same which is currently being reviewed. Mentors have been very helpful and quick in their response towards my work. Their comments on the PR are insightful and I am working on resolving the issues pointed out by them.</b></p> <p><b>I was stuck at a few places this time around. The UI was responsive but it still had a few minor issues regarding overflowing of the text on resizing. It took me some time but I was able to resolve these issues. Other than this, my logic for the interaction with the backend (i.e Strapi) was not working for the Forgot Password page. We (myself and Aditya) decided to remove the logic from the code for this PR and work on it separately. </b></p> <p><b>Once this PR is approved, I’ll move forward with creating an option that can change the text-language for the portal. This was present as a part of the design given to me and currently I am trying to evaluate what is the best way to implement it.</b></p> <p><b>Thanks for reading.</b></p>dvijaywargiya@gmail.com (dvijaywargiya)Mon, 08 Jun 2020 02:35:56 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/gsoc-2020-blog-post-1/First Blog GSoC 2020 (Weekly CheckIn #1)https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/first-blog-gsoc-2020-weekly-checkin-1/<p><small><big><code><b>Hello all!<br> <br> This is Devesh Vijaywargiya, a final year undergrad at IIIT Hyderabad, India. I’m working as a student developer in GSoC 2020 in Python Software Foundation (Sub Org: EOS Design System)</b></code></big></small></p> <p><code><big><small><small><big><code><b>The community bonding period is over now, and I’d love to talk about what I did in this period.</b></code></big></small></small></big></code></p> <p><code><big><small><small><big><code><b>Majority of my time was spent on learning the React framework (or library) in depth so that I do not face any issues when I actually start with the coding. I received a design template from my mentors for the first module that I will be working on, and we had a good discussion about the nuts and bolts of implementing it. Some PRs were made as well. I set up the base directory structure for my repository and also added configuration files for JSDocs, which I will be using for documenting my code.</b></code></big></small></small></big></code></p> <p><code><big><small><small><big><code><b>As planned, I have my first task in hand. I will be working on the Authentication Module which will include creating a React frontend with pages having Login, Signup and Forgot Password functionalities. This will be followed by working with my partner on this project (Aditya Sharma, who is handling the backend aspect) to insert the relevant API endpoints for all the communications with the backend.</b></code></big></small></small></big></code></p> <p><code><big><small><small><big><code><b>Most of my work during the community bonding period was seamless, but to get a head start I started working on the coding aspect for the authentication module where I faced an issue with making the UI responsive. By responsive I mean that the users should be able to access the portal on any device of their choice and the UI should look perfect. To achieve this, I am using MediaQueries to change the CSS based on the size of the screen in pixels.</b></code></big></small></small></big></code></p> <p><code><big><small><small><big><code><b>That’s all for now.</b></code></big></small></small></big></code></p> <p><code><big><small><small><big><code><b>I’m looking forward to 3 months of coding and collaborating. </b></code></big></small></small></big></code></p>dvijaywargiya@gmail.com (dvijaywargiya)Sat, 30 May 2020 05:46:01 +0000https://blogs.python-gsoc.org/en/dvijaywargiyas-blog/first-blog-gsoc-2020-weekly-checkin-1/