GSoC 2020 Blog Post (#3)
View Blog Post
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.
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.
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.
Like I said, I'll work on the 'My Stories' page this week and complete all the backend logic for the other pages.
Weekly Check In 3
View Blog Post
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.
This last week I was mainly working on the New Request 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 'classes'. 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 Rich Text Editor 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.
I was comfortable with the work I did this last week and did not face any issues or got stuck anywhere.
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.
GSoC 2020 Blog Post (#2)
View Blog Post
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.
Last time I talked about working on a language toggling feature, which was successfully built. I used the useTranslation functionality provided by the 'react-i18next' 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.
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.
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.
Thanks for reading
Weekly Check In 2
View Blog Post
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.
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.
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.
GSoC 2020 Blog Post (#1)
View Blog Post
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.
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.
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.
Thanks for reading.