• 

  LockdIn

How We Built It

LockdIn is primarily a Chrome Extension built using the following technologies:

Chrome Extension: We used Chrome's in-built APIs and development tools to manage data storage and session management for the extension and its landing page.

HTML, CSS, JavaScript: The core development of LockdIn is rooted in web technologies, utilizing HTML for structuring, CSS for styling, and JavaScript for dynamic functionality. We also utilised JavaScript to inject data into YouTube and modify the site's CSS stylesheet to add a thumbnail blurring feature.

Good Planning: Our development process was guided by meticulous planning, and complemented by outstanding communication. This meant that each team member was always working on a task that best suited their skills and experience and allowed us to achieve a lot more than we would've working individually.

Challenges We Ran Into

While creating LockdIn, we encountered many challenges that tested our problem-solving skills, and required us to effectively collaborate in order to progress.

Chrome Security Issues: Initially, we implemented inline Javascript functions in our html code to add functionality to buttons and text inputs. This triggered a Chrome Extension security warning, which prevented the Javascript functions from running. To overcome this challenge, we had to completely revitalise the framework we were using to make it more sophisticated and secure, which also helped future-proof our project.

Chrome Data Storage: Without a Back-End server, effectively managing data storage was tricky, and required us to be very creative with the in-built Chrome Browser Cookies.

Accomplishments We're Proud Of

We managed to accomplish quite a lot in our time working on LockdIn. Here is a list of the achievements we are especially proud of:

YouTube Thumbnail Blurring: Since our extension was centred around boosting user productivity, we decided to incorporate a few features to prevent unwanted distractions. One of the more complex examples of this was the YouTube Thumbnail blurring feature, which allows the user to toggle a blur effect on YouTube Thumbnails to prevent "clickbait" distractions. Our solution made the toggle take effect without the user needing to refresh the page, which made the extension much more seamless and pleasant to use.

Serverless Landing Page: Utilising the Chrome Extension to create a serverless landing page for university students was a great achievement, especially given the challenges we faced surrounding data storage.

Clean UI: Once everything came together, we were very proud of the UI we created and its overall flow and consistency. We made sure to pay close attention to small quality-of-life details and provide dynamic feedback to users when they interact with the landing page.

Positive Impact: Overall, we feel like we have solved a problem that many University students face, and we are excited to see how this will positively impact the study habits of our users.

What We Learned

Our experience with LockdIn taught us valuable lessons:

Hackathons are Fun: Being the first Hackathon for most members, it was an enjoyable and educational experience. It provided insights into rapid development, creative problem-solving, and the joy of building a project under 48 hours as a team.

Teamwork is Motivating: Working collaboratively in a team was motivating. We were in awe to see what we were able to accomplish as a team in under 48 hours. Furthermore, as a team, we were able to assist each other and share our knowledge, as well as tackling a challenge together to come up with a solution.

What's Next for LockdIn

Looking forward, our plans for LockdIn include:

Chrome Web Store: We aim to make LockdIn readily accessible to Monash students by publishing it on the Chrome Web Store.

Partnership with Monash University and other institutions: We look forward to potential partnerships with Monash University to integrate LockdIn into students' studies. We would also like to expand our userbase and create custom solutions for other institutions.

Continuous Improvement: We are committed to ongoing improvement, collecting user feedback to enhance existing features and continue to refine our UI.

Enhanced Look and Feel: We will continue to improving the visual and interactive aspects of LockdIn to create more engaging and asethetic extension.

Break Timer: We need to implement the feature where the LockdIn header and the background lock changes to a green colour when the "break" timer is on for the Pomodoro timer, as we did not have time to implement this in the 48 hour period.

Calender and Timetable: Unfortunately we did not have time to finish this feature, but we plan to allow students to add their timetable into the Chrome "new tab" page and have it displayed for easy access.

These steps reflect our dedication to making LockdIn an ever-evolving and impactful tool for students.

TEAM PHOTO

https://imgur.com/a/mZRcss6

Built With

• chrome
• chrome-storage
• css
• html
• javascript
• redactiveai