CredLocker

CredLocker - Your OneStop place to learn, secure and have fun gaming in the cybercrime and cyber attack theme.

Comment

Inspiration

My teammate, Ms. Somasree Nandi recently found herself in a tricky spot where BSNL had her number blocked on the grounds of cybercrime. Later it was found false yet her number remain blocked. This came to her as not only troublesome but also was a big harassment. From here the inspiration came to secure people's digital data and enlighten them regarding cybercrimes and cyberattacks, and how they can protect themselves from it.

What it does

CredLocker is a AI driven web service app, that provides a gamified learning experience to the users and provides security tools that work based on AI responses that are 99% correct in terms of whether user's digital data is secure or not. Key security tool is dark web leak scan.

How we built it

Backend: Node.js and Express.js handle the server-side logic, routing, and API proxying.

Frontend: We used HTML5, CSS3, JS and EJS (Embedded JavaScript) for server-side rendering, allowing us to pass data dynamically to our views.

Styling: We built a custom CSS framework from scratch featuring a "Cosmic Security" theme. This includes Glassmorphism effects, neon gradients (Electric Violet & Cyan), and responsive layouts without relying on heavy UI libraries like Bootstrap.

APIs: We integrated the IPQualityScore AI API to handle the heavy lifting for fraud scoring, URL scanning, and dark web monitoring.

Visualization: We implemented Chart.js to render real-time data visualizations for the analytics dashboard.

Challenges we ran into

One of the biggest hurdles was handling the API responses for the "Request Log." The API returned inconsistent key names depending on the request type. Creating a "Dark Mode" glassmorphism theme looks great, but ensuring text contrast and legibility on top of blurred, semi-transparent backgrounds required a lot of fine-tuning with RGBA alpha channels and backdrop filters. Apart from this we had minor challenges like error handling and bug fixes.

Accomplishments that we're proud of

We are proud to be able to create a MVP that successfully visualize the "Fraud Score" as a dynamic progress bar that changes color (Green to Red) based on risk levels. It makes complex JSON data instantly understandable for the user and built a secure backend proxy system so that our API keys are never exposed to the client-side, maintaining security best practices.

What we learned

We learned that this was much difficult to implement in a short duration than we thought of. Moreover we understood that we need a cybersecurity expert on this or we need much better knowledge in this domain to be able to deliver the final market ready product.

What's next for CredLocker

Adding database to persist data. Creating better content for the gamified learning section. Implement Google OAuth so that easy login and sign up can be done. Adding more security tools. Keeping the product up to date with current and future cybercrimes and cyber attacks.

Share this project:

Updates