Working remotely has increased due to the pandemic and it has defenitely made it hard to work, hack, learn, or just be productive in the same chair. Most of the times we make a list and it gets lost in a pile of papers, or even piled up snack wrappers and cups from throughout the day (or days). Then you write it online but get lost in the blackhole of Youtube and other social media apps. This is where HackTabs comes along to facilitate the process of making lists and increasing productivity. Its allows users to create tabs, dividing their work into categories, and get the job done without to many distractions (except you can change the color of your background, but thats it!). The tabs or To-Do portion is distraction free and can be used by anyone, however, the rest of the site (Forum and Resources) is designed for underrepresented hackers in the tech field. In the Forum, users will be able to browse common topics that other users have encountered, as women or underrepresented inidviduals in the field and be able to connect with them via comments. In addition, in the Resources tab you will find various topics such as Interviews, Scholarships, and Opportunites all meant to assist users and having the best shot at success in the field. There is also an Inspiration board with images and quotes to motivate underrepresented individuals to do something great. Overall, users can connect but a lot of the social aspects where limited as we are all guilting of losing track of time on social platforms. Nonetheless, I was inspired by sites like Trello and scholarships sites like Fastweb Scholarships. Even though, a lot of these scholarship sites make it hard to find opportunities for women and underrepresented minorities, it inspired the forum and resources portions of my site. The logo is simple and modern, however, the slash creates a triangle which is the strongest shape to emphasize that together we can help each other and succeed despite being underrepresented in the field.

What it does

HackTabs a site thats is both practical and creative. On one hand it is a simple, customizable list-making app and on the other it is a small platform to inspire women and underrepresented minorities in tech by providing a medium to speak about common issues/trends as well as giving resources aimed to fuel success. It also has a forum and resources area to inspire and connect users.

How I built it

For the front end development I used HTML, CSS. To add functions like changing the background and adding a text editor, I used jQuery libraries and CKEditor. Meanwhile, to design the logo, I used Illustrator and Photoshop. Finally, I used Premiere for the video, and Pixabay and Pexels for the images on the site.

Challenges I ran into

I defenitely ran into a lot of challeneges, when it came to styling the buttons and makkng the site responsive. It was also hard to get other parts(buttons and tabs) of the site to respond to the change in the background color. In addition, it was my first time using jQuery libraries as well as a text editor, which both took me some time to get. I also would have liked to include more content but due to the time I had to leave to produce the video, I decided to limit the sample content of the site. Finally, not having experience in backend really made it hard for me to save user information in parts like the Sign up and To-Do.

Accomplishments that I'm proud of

I am really happy I completed the project. It is my first virtual hackathon and my first time working on a project alone. Even though the site didn't have a back-end, I know I learned no aspects and tools to make the front-end dynamic and fucntional.

What I learned

I learned more about making sites interactive, functional, and appealing to the eye by integrating editors and features such as changing the background to make it user friendly. I also learned how to include sign up pages with basic functions like ensuring that the user inputs the password twice which was a small step forward for me as I dive into handling user information and hopefully saving/ retrieving it from a database.

What's next for HackTabs

I plan to continue making the site responsive and adding content to it in order to host and publish it.

Share this project: