Coding Project: Web Security

Due: December 12th, 4:00 PM

For this assignment, you will create TWO implementations of an article sharing web application. One version should be crafted entirely manually, while the other should be crafted entirely with the "vibecoding" tool replit. How you should approach your implementations is described below the requirements for the article share web app.

A note on implementation order

If your student ID is an even number, you should do the assignment by building the Vibecoded Implementation FIRST, followed by the manual implementation.
If your student ID is an odd number, you should do the assignment by building the Manual Implementation FIRST, followed by the vibecoded implementation.

In either case, do not start on your second implementation until the first is complete!

Article Share Requirements

The basic use case for the assigned web app is to allow users to share articles in the form of URLs posted to a common message board. Users should be able to
  • Post an article link to the common message board
  • View all article links posted to the common message board
  • Delete their own article links
Additionally, there should be an admin account automatically added to the system with the username and password admin. The admin account should have all capabilities of the user, and additionally should be able to delete posts from ANY user. The article share site should have persistent storage, though you may use a local backend storage system of your choice (sqlite, postgres, etc.). The entire site should be runnable locally. You should focus on security best practices in handling accounts, credentials, and data. A good reference for security considerations is the OWASP Top Ten

Manual Implementation

For the non-vibecoded version of the website, you should create a React frontend, which you may choose to deploy alongside any frameworks or libraries you choose. For example, you may choose to use a css framework such as Tailwind, though you need not do so - your site will be assessed entirely based on its functionality (so aesthetics are unimportant). You should create a node.js backend, though you are again free to use any server-side frameworks. Use the git version control system throughout development. You should regularly check in code, starting with an initial commit when you begin the project. The git log will be the basis by which your effort is tracked (see below).

Limit on Effort

Your team should spend no more than 20 person-hours on your manual implementation. Once this cap has been met, describe those features that you did not implement in time in a pdf document manual_log.pdf that is included with your submission. More details on this document are described in the Deliverables section below. both the implemented features and those features that you would have implemented given more time.

Vibecoded Implementation

In addition to the manual implementation, you must also create a version of the article share web application that is substantially generated by the Replit tool. A free account will provide a number of queries to the agentic programming interface.

Limit on Cost

If your vibecoded implementation is incomplete once you have expended the free token limit, do not purchase any tokens - just explain those features that you would have implemented given more tokens in a file named vibe_log.pdf.

Deliverables

You should submit to Canvas a single tarball containing a directory named P4. Within P4, include two sub-folders:

  • manual - this folder should include all code and artifacts necessary to run the manually-coded implementation. Additionally, at the top level of the directory, you should include two documents:
    • A file named README.md that contains any guidance necessary to configure, install, and run your code.
    • A file named manual_log.pdf that details the features that you implemented and any features that you did not implement in the time alloted.
  • vibes - this folder should include all code and artifacts necessary to run the vibecoded implementation. Additionally, at the top level of the directory, you should include two documents:
    • A file named README.md that contains any guidance necessary to configure, install, and run your code.
    • A file named vibe_log.pdf that details the features that you implemented and any features that you did not implement in the time alloted.