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.

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

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

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.

• Events Page

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.

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 loaded from the JavaScript file and the DOM is then manipulated.

• Projects Page
  1. The goal here was to add beginner-friendly projects and not projects like React and Vue
  2. All the amazing projects are open-sourced and are of good quality.
  3. As we should always value one's work, I have given credit to the Admin of the project.
  4. I have personally contributed to many projects like these and it was a great learning experience.
  5. I hope the community will help me list more and more beginner to advanced-level projects so that an individual can crack open-source programs easily.



Tutorials 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!

Future Plans 💡

• 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

Links 📎

• GitHub Organisation: github.com/Opentek-Org
• Opentek Repo: github.com/Opentek-Org/opentek
• LIVE URL: opentek.netlify.app

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.

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.

You can connect with me on Twitter & Github 🎈