Introducing Torii ⛩️ Making participation to open source easy for everyone

Hello 👋

Gaurav This side, I hope everything is fine, on your side and if it is not fine, don't worry it would be : ) This article is regarding my project which I build during Clerk Hackathon It was a fun ride for me doing a project and getting back to my developer life. Thanks, Hashnode for this awesome opportunity. Here in this article, I am going to give a little brief about my project.

⛩️Torii - Backstory

Last few months all I did was binge-watched anime and regarding development I did nothing, I didn't have any project idea or motivation. So I browsed all popular GitHub repos and started contributing to them. Some of my PR's got merge and I was quite happy, Then I came to know about Red Hat Open Source Program and participated in it, and had an awesome experience. Now I have started attending meetups of various open-source originations. But It is quite hard to find projects I can contribute, Plus is Open Source Events and Programs provide awesome experience, but they are quite a little bit hard to find for beginners like me. Here Torii comes to the Help : )

Torii - Introduction ✨️

Most of the features of Torii could be access from the homepage and the navbar itself, I tried to keep the UI decent so most students like me use it(I tried to give my best at UI designing for the app) Plus adding dark mode was one the most important feature of it. keep the UI aside moving on to the next part.. torii has 3 important features: - Open Souce Events since it is a little bit hard to find what open source events are happing this month you see easily see events happenings this month and attend them, and if you about a event not listed in Torii feel free to add it : ) Also, you can get an overview of various open-source programs by selecting the month in which they are happing.. the one you click more info you will get the list of blogs and youtube videos related to that event. Not only that if are looking to new contributions just checkout the Advanced GitHub issue search in torii..

well, you can always add new Organizations, Events, Open Source Programs to Torii by clicking the plus button on the right corner but.. you need to sign in to the application, which is powered by Clerk.

Apart this.. torii also have

🌙 Dark Mode/🌞 light Mode

🇷Responsive

📧 Newsletter Adding a newsletter was also important since, The user might not be able to come to the app every month, but a monthly newsletter would help to remind them about all the events.

😌 Problems Faced

Well, I faced a lot of problems but I would like to mention problems which could help others.

While browsing the webpage I was facing a problem the next page was not loading from the top, it was either loading from the end or middle (I know it's a small issue but as a user, it can be a little bit bad experience), so I wrote my own component for that, maybe would be publishing a new npm package for that.

import {useLocation} from 'react-router-dom';

function ScrollToTop(props) {

    const  {pathname} = useLocation();
    React.useEffect(()=>{
        window.scrollTo(0,0);
    },[pathname])

    return null;
}

Also, there was a problem with the clerk Components, they were not supporting Dark mode... I got a really lot of help from the clerk discord server. You can easily get help if you are stuck at a place. I notice the clerk signs and SignUp component were loading after a while so added a class to them. So later I ended up checking whether the user has selected the dark mode or not. and after 2sec I am adding dark mode class.

JS

 const {colorMode , toggleColorMode }= useColorMode();
    const isDark = colorMode === 'dark';

    const addDarkClass= () => {
        if(isDark){
        setTimeout(()=>{
          var x = document.getElementsByClassName('cl-component')[0];
          x.classList.add('dark');
        },2000);
    }else{
        setTimeout(()=>{
            var x = document.getElementsByClassName('cl-component')[0];
            x.classList.remove('dark');
          },2000);

    }
    }

    React.useEffect(addDarkClass,[isDark]);

CSS Instead of targeting every class of clerk component I target the main class and inverted the whole hue and ended up writing one line of CSS.

.dark {
  filter: invert(1) hue-rotate(180deg);
}

;) dark mode in one line If you are using clerk, you can solve the issue by using following snippet in a snap

💻 Built with

• Reactjs
• Nodejs
• Express
• MongoDB
• Clerk
• React-Hot-Toast
• Charka UI

My Learnings

• Tried to make this Web App's UI as good as possible since I want more and more people to use it. I tried that every feature of this app can be accessed by the user in just three clicks (I read it somewhere it's a good practice) also, I did use the Same style illustrations and Components through the web app.Also, I did try to add some micro Interactions.
• Another Learning was Whenever you are stuck trying to find ask your peers, I was stuck with the Clerk components do not support the dark and light themes, I did ask my friends and Clerk's team. everyone helped me and it got fixed.
• Last and not least I implemented my sorting in the project according to the date, filter functions, Search functions.

Future RoadMap

I would be working on this project on weekends, I have to add a lot of information to toriii yet.

• Add to calendar feature (⏰ very soon)
• Share on social media much more....

Project Link

Live Link : - http://toriii.vercel.app/

Github : - https://github.com/tewarig/torii

Project update