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

Search for a command to run...

What a great idea! I'll take a look into it shortly!! Thanks Gaurav Tewari.
🤩🤩🤩Thanks
Liked the app Gaurav Tewari, looks like this project deals with a real world scenario well. Thanks for building such an awesome app 🥁
😅😅yup, it deals with real-world scenarios glad to hear from you : ) . Thanks for drumRoll 🥁🥁 (I can hear this emoji )
This an amazing project it would be of real help for beginners like me can I ask where you got the images, that you use on the website? I would love to use them when I build something, someday
I would love to see what you build someday... ping me when you are done I would love to see what you have cook : ) These are illustrations from https://icons8.com/illustrations (jungle illustration) I got to know about them from Ankit Kumar Sharma 's blog https://ankits.hashnode.dev/7-best-illustration-resources-to-use-in-your-next-project
Well, the app really looks sweet and simple and adds a lot of value. Is Clerk authentication serving any purpose here? I might have missed the usage of the sessions but please explain if there is any usage of the Clerk's session in the backend or even in the front-end if there is something specific to a user.
yup it is, if you want to add some data to the app, for example, any event, you need to sign in then only you can access the form, those add data routes are been protected by the clerk you can access them directly, the clerk is saving my sweet app from being spammed. : )
What a super awesome project! I love it, and the article is very well-written :)
🤩🤩🤩 So Glad you liked my work
Thanks
sure can;t wait to see what you are building in this hackathon
Awesome work Gaurav! Really liked the app and the UI. So impressive! There are some issues tho for which I created a PR and an issue with a solution. I hope my contributions make it better 😉.
wow!! glad to see you loved the UI. I just saw them. and thanks for you so much.. for contributing. your contributions are doing great work.. keep working : )
I am so glad you liked it.
Hi, Hope you are doing fine... 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 AnonMsg which you to give and take Anonymous feedback from anyone. Feedback has al...

Welcome to JavaScript baazi a blog series where we go through common interview questions in JavaScript and understand everything around them. Firstly What is Promise.all() ? So... Promise.all() take an array of promises as input and then return a pro...

In this blog, we are going to build a QR code scanner and generator in Next.js. QR codes are currently powering everything in the world. from payments to id cards, everything has a QR code on it. Here in this small demo we will be building a small de...

Welcome to JavaScript baazi a blog series where we go through common interview questions in JavaScript and understand everything around them. Hmm... So what is the flattening of an array? basically in flattening we reduce the dimension of an array.ba...

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 MeowForms which allows you to build custom back endless for free. I have made my small side projects in ...

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
My Learnings
Future RoadMap
I would be working on this project on weekends, I have to add a lot of information to toriii yet.
Project Link
Live Link : - http://toriii.vercel.app/
Github : - https://github.com/tewarig/torii
Project update
