Introducing Opentek - If it is about Open Source, it is on Opentek ⚡️
Bye! Bye! to all the tiring Google Searches
Hello everyone 👋,
This is the first hackathon I'm participating in Hashnode & I thank Hashnode for this opportunity.
I am happy to introduce my new app Opentek to you all 📣
Are you one of them who keeps on searching about events, programs, tutorials, and beginner-friendly Open Source projects on Google, and most of the time the last date of the program/event has passed?
Then this is the app for you.
Introduction 💜
Opentek is the number one source for Open Source Development. We're dedicated to giving you the very best of tools, resources, and projects, with a focus on Collaboration, Code, and Networking.
The problems I am trying to solve:
No need for excessive Google search to find events, programs, or resources.
I am personally in many communities but the problem I found there was they deal with broad domains and due to this Open Source gets neglected.
This is a community that will be exclusive to promoting Open Source Development and Networking.
There are 100's of resources in the market and it is hard for a beginner to find the right one and not waste his time so I have curated videos that a beginner can follow blindly and can benefit from it.
In my Sophomore year I missed many Open Source and Community programs because I was not aware of them and when check, the last date for the same usually gets over. I do not want anyone to miss such amazing programs and events due to this.
All these problems led me to create Opentek
Tech Stack Used 🖥
I usually see in the previous hackathons most of them built their projects using all the latest tech and frameworks but to make it super beginner-friendly to contribute to, I used the old school tech:
HTML5: Skeleton
CSS3: Styling
Bootstrap 4 and 5: Responsive mobile-first
JavaScript (Server and Client Side): For Loading Data
Auth0: User Authentication
Font Awesome: For Icons
Rough Notation: A small JavaScript library to create and animate annotations on a web page
Tiny PNG: For compressing and optimizing images
Discord Server Widget
Google Analytics: Records Website Traffic
Netlify: For Hosting
Name.com: For Domain Name
UI/UX 🎨
Dark theme because most of the visitors will be developers/techies and all the styles are made according to the industry standards.
Code Quality 👮♂️
Prettier and ES Lint are used for good code quality so that everyone will be able to work. Comments are used from a beginner's perspective throughout the codebase.
Walkthrough of Opentek 📌
- Landing Page
- Log In Page
If you are a new user, click Log In with your credentials. Below is the login screen powered by Auth0.
Auth0 docs were really helpful and it was my first time using their service.
If a user does not Log In, the Events and Programs page will be inaccessible for them
- Events Page
After you are logged in, you can access the event page from the features section:
Events are loaded dynamically using JavaScript. Below is an event added inside the data
object.
{
{
monthId: "0",
Data: [
{
event: "1",
details: {
eventName: "JIIT Open-Source Developers Circle",
eventDate: "22/01/2020",
eventDesc:
"JIIT Month of Code is an online programme by the open-source club of Jaypee Institute of Information Technology, JIIT Noida-128, the JODC, focused on introducing students to open source software development and documentation writing.",
eventurl: "https://jiitodc.netlify.app/events",
eventImg: "../images/events/jodo.png",
},
},
{
event: "2",
details: {
eventName:
"International Conference on Open Source Software and New Perspectives ICOSSNP",
eventDate: "11/01/2022 - 12/01/2022",
eventDesc:
"ICOSSNP aims to bring together leading academic scientists, researchers and research scholars to exchange and share their experiences and research results on all aspects of Open Source Software and New Perspectives.",
eventurl:
"https://waset.org/open-source-software-and-new-perspectives-conference-in-january-2022-in-singapore",
eventImg: "../images/events/icossnp.png",
},
},
],
},
monthId
varies from 0 to 11 as from January to December.
UPDATE
I am now using JSON files to store data and to put it in the DOM.
- Programs Page
It works the same way the event page does. The data is being loaded from the JavaScript file and the DOM is then manipulated.
The Event and the Program page will keep updating regularly as we have the data of more and more events/programs. I could have used a backend for this but I want the community to help me create the largest resource website regarding Open Source.
- Projects Page
The goal here was to add beginner-friendly projects and not projects like react and vue
All the amazing projects are Open Sourced and are of good quality.
As we should always value one's work, I have given credits to the Admin of the project.
I have personally contributed to many projects like these and it was a great learning experience.
I hope the community will help me list more and more beginner to advance level projects so that an individual can crack open-source programs easily.
If you have an Open Source well-maintained project and want to add it here, you can raise a PR here and I will add it to the list.
- Tutorials Page
The goal here is to fill it up with handpicked and the best-rated videos by the community. The content on this page is more than enough for a beginner to get their hands dirty on Open Source. No more watching low-quality videos and then end up regretting that the content was poor.
The data is being loaded using async and the id is from the URL of the video
{
id: "uj4fy4kpaOA",
title: "Love Babbar",
subtitle: "About the Video",
para: "This video includes an overview of Git and Github, complete practical use of all the git commands IN JUST 33 MINUTES",
},
- About Us Page
I have created a very minimalistic about us page including the team members section and CONTRIBUTOR list section (data from github.com/Opentek-Org/opentek/graphs/contr..) being added automatically as soon as someone contributes to the project.
We have our newsletter too and a lot will be planned!
Future Plans 💡
Creating this website with React and the latest tools with help of the community through Open Source programs.
Adding Progressive Web App (PWA), So you can even install it on your device 📱
Sorting out projects according to beginners, intermediate and advanced levels.
Taking Opentek to various Open Source programs for more and more community work.
Adding Hackathon Page and Updating it according to month-wise.
In-Built blog posts related to Open Source and Networking.
Animations
Creating projects under Opentek and Open Sourcing them.
Conducting Community Own OPEN SOURCE PROGRAM
Links 📎
GitHub Organisation: github.com/Opentek-Org
Opentek Repo: github.com/Opentek-Org/opentek
LIVE URL: opentek.in
Contribute 💥
If you want to contribute to this project or want to join this cause then you can join our Discord Server where we can work, collaborate, share resources and build the OPEN SOURCE-focused community.
This is a beginner-friendly project on purpose so that everyone can easily contribute if they have their basics sorted. You can check the GitHub Repo for all the necessary information regarding Contribution and Code Of Conduct.
Conclusion 🎯
I really enjoyed working on this website. I had the idea long ago but due to our very own Hashnode and Auth0, the idea is now live!
⭐the Open Source Repo here as it will give me a lot of motivation. It needs your support 🙌.
Our valuable Contributors👩💻 :
After launch:
Hope you liked the app and this article.