"Very Secure Website"

Home page
Lighthouse Test for mobile layout
Lighthouse Test for desktop layout
Completely secure admin login
SQL Injection exploit found!!
Encryption test
Mobile layout with burger menu

Inspiration

The inspiration for our project was at first looking at what domain names were available for free on tech.study, we found that pleasedonothack.us was available and we got the idea to create a website where you try to hack into a parody website.

What it does

The website itself has multiple pages where a user can submit data or interact with the website with many insecure interfaces (e.g. a publically accessible admin login with a very weak and obvious username:password). After a user discovers these insecurities, they are greeted with a popup informing them of what the insecurity is and resources on how they can prevent these attacks as well as an increment to their score.

How we built it

We built it in WebStorm using Next.JS framework, Tailwind CSS and MUI. We used GitHub for collaboration and Vercel for deployment. We used an agile development model.

Challenges we ran into

Client-server separation, as Next.JS uses server-side rendering by default. We have a lot of interactivity so we had to specify client-side rendering for many elements as well as use React's useEffect() to load audio files after A LOT of testing. This issue delayed deployment for over two hours and we have not mentally recovered.

Another challenge we ran into was getting used to the Next.JS framework as from university we have primarily done web development in Ruby. Using this ended up being intuitive and libraries such as MUI made implementing professional looking elements much easier

Accomplishments that we're proud of

The UX works well on both mobile and desktop.
Implementing many fun sound effects and visual effects (e.g. confetti!)
Performance of the website (we have attached a Lighthouse test result image below)
It runs doom

What we learned

We are a team made of members with varying skill and knowledge sets so we all took different things away:

James: I learned how to use Next.JS as well as more experience with how React works. This is also my first time deploying a website so my experience on that was great.

Jack: I came into this weekend already being fairly experienced with Next.JS - so for me, this project was more about developing my ability to rapidly design, implement, and test a web-based project.

Shamis: I have zero experience using WebStorm (a JetBrains IDE) and Next.JS so I learned to use them during this project. As I am the only first-year student on this team, I learned a lot about cyber security and common mistakes that cause poor website security.