Introducing Opentek - If it is about Open Source, it is on Open…

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 those who keep 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.

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.

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 hundreds 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 checked, 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

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

Dark theme because most of the visitors will be developers/techies and all the styles are made according to the industry standards.

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.

01:10

Watch in new tab

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.

After you are logged in, you can access the event page from the features section:

Opentek | Events

00:31

Watch in new tab

Events are loaded dynamically using JavaScript. Below is an event added inside the data object.

monthId varies from 0 to 11 as from January to December.

I am now using JSON files to store data and to put it in the DOM.

It works the same way the event page does. The data is loaded from the JavaScript file and the DOM is then manipulated.

Projects Page

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!

Created this website with React and the latest tools with the 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

GitHub Organisation: github.com/Opentek-Org

Opentek Repo: github.com/Opentek-Org/opentek

LIVE URL: opentek.netlify.app

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.

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 🙌.

Hope you liked the app and this article.

You can connect with me on Twitter & Github 🎈