My GSoC 2024 Week #1 Update: A Solid Start

Photo by Markus Winkler on Unsplash

In the previous article, I shared my story on how I got into GSoC 2024 after I failed to get it in 2023. If you haven’t read it, here’s the article link. In this one, I’ll briefly describe what I’ve done during my first week of the GSoC official coding period. What’s in this for you? I hope you get to know how things work behind the scenes through this one in GSoC.

The Project

Before getting into what I’ve done, I’d brief a bit about the project I’m dealing with. The aim is to develop a platform to publish research papers where the submitted articles get reviewed and rated by individuals anonymously and also by communities. It’s like Reddit for research papers but with anonymous reviews, ratings, and comments. What problem is this solving? Let’s say you’ve produced a top-notch research paper as a part of your thesis and want to publish to reputed organizations like arXiv, PubMed, doi, etc… Guess what! You can upload a research paper in this website and get a lot of valuable feedback from wide variety of individuals. It’s similar to open-review website but with more user friendly interface enhanced with an anonymous rating. So you could say it’s solving some sort of a real problem.

What to know more? Read this: https://neurostars.org/t/gsoc-2024-project-idea-11-1-a-social-web-tool-to-facilitate-rating-and-commenting-on-research-reports-350-h/28263/21

My Objective

There are two main parts for this website: Frontend and Backend (that’s obvious, right). The front end is currently designed using ReactJS and TailwindCSS (no Typescript🥲) and the Backend uses Django and DRF with a PostgreSQL database.

I’ve discussed and somehow convinced my mentor that I would like to shift the codebase from ReactJS to NextJS with one hell of a long chat in the proposal period. Here’s the more surprising part: I made a shift to Django Ninja from DRF (during the organization interaction phase) without informing my mentor. By showing code optimization in terms of a number of lines of code, simple-to-use folder structure, and less complex code I was able to convince my mentors. Honestly, I couldn’t have convinced them to shift to Django-Ninja if I shared my idea beforehand. I developed all the authenticated related models and community-related models equipped with 28 API endpoints during 4 working days (This kind of helped me convince them along with a 23-page (more than my GSoC proposal pdf!!) Google doc describing why it’s better than the current codebase) .

With this, my objective has been set. To revamp the entire codebase (both the front end and back end) from scratch. Sometimes you have to convince people through actions rather than words.

NextJS and Typescript : Revamped Frontend

I’ll describe what I’ve done in points. I think reading in points is easier than reading paragraphs (see ChatGPT answers (they’re tuned to satisfy humans’ reading psychology)). This will let you know some of the important steps you need to look into while setting up a NextJS and Typescript Project.

1. Previously the pages weren’t designed using any Figma-like software. I’ve designed the pages using pixso software (an open-source alternative to Figma, please give it a try). Do youknow what the real advantage of doing this is? With the help of the design, you can pre-decide what reusable components you have to implement in your NextJS and Typescript code. Really saves a ton of time.
2. There wasn’t a standard prettier, eslint setup in the previous codebase. So I thought why not bring every developer on the same page with common standards and rules for streamlined development? Hence I’ve integrated husky, eslint, prettier, and lint-staged to my project. How did I find these? Google definitely helps. Here’s the article you can refer to see what I mean: https://medium.com/yavar/setting-up-a-eslint-prettier-husky-and-lint-staged-integration-with-typescript-in-next-js-13-14-68044dfae920 (It describes how to set up your project with husky, eslint, prettier, and lint-staged)
3. Now the stage is set. Time for spending some late nights writing code. I’ve started writing code battling with TailwindCSS, making reusable components, and writing a hell lot of Typescript interfaces. The major discoveries I’ve made during this phase arereact-hook-form , react-query, orval, and zustand. I’ve realized how these made the development process way easier than I anticipated. Props to this article through which I’ve discovered these libraries. https://serhii-kucherenko.medium.com/top-stack-for-scalable-next-js-project-80e1fc7b3a35 (Give it a read, I highly recommend it)
4. I’ve implemented 10+ pages in a week battling a lot with CSS. I made use of shadcn to replace the material ui in the previous codebase (Honestly, I think there isn’t any replacement I feel like I am doing everything from scratch)

Revamped Backend: The Django-Ninja Way

1. The folder structure and code complication of the previous codebase was a bit terrible. All the view sets, serializers, and models are dumped into one single Python file respectively. There is just eternal scrolling.
2. I made a clean folder structure with no more than 300–400 lines of code in one file. You know what the craziest part is. The number of lines of code you have to write to implement, for example, an Login API endpoint in Django-Ninja is literally 80–90% less than DRF.
3. Also, the previous codebase similar to the frontend doesn’t have proper formatting, coding standards, or rules. So, I’ve set up black, flake8, pre-commit config, poetry, conda virtual environment, and docker (for deployment). In my opinion this is one of the best setups for any Python Project.
4. I implemented every API endpoint (WIP) with appropriate models from scratch by spending good number of hours. I do remember the hours I’ve spent figuring the solution to a straightforward problem. Yeah, I’ve been through the typical frustration of software engineers when their code doesn’t work and have felt elated when the code works and have no freaking clue why it has worked.

Conclusion

That’s it! I thought it would be beneficial to me and people who aspire for GSoC 2024 to write articles describing my progress. Hope you’ve wasted your time reading this. Just kidding! Hope it helps. See you with another article next week! Follow for more.