This content originally appeared on Level Up Coding - Medium and was authored by Adijsad
My GSOC Week #10–12 Update: Work till it is done
The coding period has officially ended. And I’m here to share my progress over the last 3 weeks. If you ask how my experience has been so far I would say it’s been a good ride hitherto and I have come to learn a lot. In technical terms, I have learned the best practices to set up your project, write optimal code, write unit tests, design best practices, etc…
Brief Intro to My Project
Before bragging about what I did, let me brief you about the project I’m dealing with. The objective is to design a platform where people can submit their research papers and get them rated and reviewed anonymously by communities or individuals. It’s similar to openreview.net but with a better rating and review system and improved design. On a technical level, it’s all about writing code for frontend and backend which one can do by following the tutorials available on YouTube. But what inspires me the most while working on this project is trying to solve a real-world problem where most of the research papers get little attention as they’re dumped into a pile of research papers published yearly. Our website addresses this challenge by giving individuals the chance to rate and review a research paper on which people put their blood, sweat, and tears to complete.
Here are some crucial updates and learnings in these last three weeks. I have not explicitly worked on these features previously but admired them when I visited websites in general.
Update #1: Implemented Higher Order Components (HOC) to protect auth-related pages and more…
After implementing all the core features I am enlisted to I came to realize that I have to implement the following important features
- Unauthenticated users mustn’t be able to access some particular pages.
- Users who are already logged in should be redirected back if they try to visit auth-related pages.
- Article (or Community) Dashboard pages must be only accessible to the author of the article (or community).
I researched quite a bit on how to implement these features and realized I could implement them by making use of higher-order components (HOCs). Here’s the blog that helped me understand this: https://www.dhiwise.com/post/implementing-next-js-protected-routes-a-step-by-step-guid.
There were certain challenges I faced along the way that led me to tweak the logic I implemented for the above features till last week. Here are some of the challenges I faced while implementing them:
- NextJS Router doesn’t have any function that gives you the pathname of the previously visited page. Because of this, I was unable to redirect the user to the previous page right after they log in. I used router.back() for a while and realized it didn’t work in certain cases (where the user visits the login page directly for the first time or when he/she logs in after resetting their password). I learned from the following blog on how to keep track of the current and the previous paths using session storage.
https://www.grouparoo.com/blog/getting-previous-path-nextjs
It essentially tells you to just keep track of the previous and current pages using usePathname (present in NextJS 14) hook and then use if-else conditions to redirect the user to the appropriate page. - The “auth store” I’ve implemented using zustand didn’t have the functionality to check whether the accessToken is fetched from the local storage or not as there is a certain delay in fetching the access token from the local storage or cookies. This restricted me from displaying a nice loader in between for a better UI/UX.
After addressing these challenges, I was able to implement the three features I mentioned above essentially modifying authStore.ts and creating two higher-order components (I think I can merge them into one later). Here are the other two higher-order components I implemented if you are interested in transferring the logic to your website.
- SciCommons-frontend/src/HOCs/withAuthRedirect.tsx at main · m2b3/SciCommons-frontend
- SciCommons-frontend/src/HOCs/withAuth.tsx at main · m2b3/SciCommons-frontend
Update #2: Continuously track the session expiration status of the logged-in user.
I learned a clever way to implement this feature i.e., the user should be logged out automatically after their session expires. At first, I thought of sending continuous requests to the backend to check the expiration status but realized it burdens the server. I later utilized the local storage by creating two variables that keep track of session expiration time and its status. I check for the session expiration status continuously (every minute) by fetching the necessary info from the local storage (no backend involved) and displaying a dialog when the token expires. Here’s the code if you’re curious about how I implemented it. https://github.com/m2b3/SciCommons-frontend/blob/main/src/HOCs/CheckSessionExpiration.tsx
When the user logs in again they will be redirected to the page they were previously visiting (that’s the logic I implemented as a part of “#Update 1”).
Update #3: Implemented dark mode without using 'dark:’ prefix in Tailwind
Our website has a dark mode feature which I incorporated using dark: over all the React components present in my project. However, I realized later that this is a cumbersome and inefficient approach. So I made use of the CSS variables concept in TailwindCSS and overrode some of the default colors (gray, green, and blue) making them adaptable to dark mode essentially eliminating the need to write dark: prefixed classes. Here’s the file you can skim through if you want to implement this or know about this for your future use: https://github.com/m2b3/SciCommons-frontend/blob/main/src/app/globals.css
Update #4: Made the pages mobile responsive simultaneously
Similar to the dark mode if you want to make all the pages mobile responsive using TailwindCSS you need to use prefixes like sm:, md:, lg:, etc… I want to reduce the usage of these. I implemented a custom tailwind plugin that makes the text size adaptable across all different screens. Credit to the following discussion from where I borrowed this idea: https://github.com/tailwindlabs/tailwindcss/discussions/10191
Update #5: Learned and implemented atomic operations in Django
Much of the above updates didn’t involve dealing with the backend extensively. Upon testing our website a bit there was an interesting issue popped up. For a POST API endpoint where multiple objects are created in the database, I overlooked the case where one or more objects fail to be created. If an object creation is failed and the previous object is already created in the database led to erroneous results. I wrapped the logic using with transaction.atomic() across all the POST API endpoints where multiple objects are created essentially making the operations atomic.
Summary
These are all the major features I spent my hours in the 3 weeks. There are also other bug fixes, code rewrites, and minor features implemented simultaneously. As always I hope you can benefit from the learnings shared from my experience and apply them to your projects. I want to write one more article briefly summarizing my overall GSoC experience and leave some tips for people who aspire to be GSoC contributors one day. Until then have a good day and take care.
GSOC Week #10–12 Update: Work till it is done was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Adijsad
Adijsad | Sciencx (2024-08-25T15:16:44+00:00) GSOC Week #10–12 Update: Work till it is done. Retrieved from https://www.scien.cx/2024/08/25/gsoc-week-10-12-update-work-till-it-is-done/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.