Ostaa (Part 2)

Assignment 9 for CS 337

This is part two of a two-part assignment for 337. In part one, you were supposed to build a server with an API for a simple online marketplace app called Ostaa, and a simple client for adding users and items. In part 2, you will have to add a user login/authentication functionality to the server, as well as make the client more feature rich, so that users can log in, create a post, search for items, and purchase items from other users. This won’t be nearly as polished as a “real” online market such as OfferUp or Mercari, but hopefully you still learn a thing or two.

Accounts and Login

If you completed part 1, you should already have a User document type in the schema of your database, with a both username and password fields. However, in the last part, there was no functionality to actually allow the user to log in. In this assignment, you should make index.html be a login/account creation page, as shown in the animation.

The user should be able to either log in or create an account. Creating an account should add a new user on the server database. If the user tries to log in with an incorrect username and password combination, the user should not be allowed into the app. If the account credentials are correct, the user should be taken to home.html to start interacting with the application.

You are NOT required to salt and hash your passwords, but you are required to keep the user logged in via sessions / cookies. Getting the account creation, login system, and session tracking may require changes to your server from the previous PA.

Listing an Item

After a user is logged in, he or she should be able to “post” or “list” an item for sale. As shown in the animation, there should be a “Create a Listing” button that takes the user to a new page with a form to make a post. After submitting the listing, the user should be taken back to home.html. Then, the user should be able to search for this post, as well as see it when clicking on the “View your Listings” button.

In the example in the animation, the user is able to actually select an image from the file system to upload to the server. Then, when viewing the search results, the user can actually see the accompanying image. This particular part of Ostaa (uploading an viewing real images) will be extra credit. If you don’t want to work on this extra credit feature, you can just have the image field be a text box with an image name, and you don’t have to actually display any image in the various results on the right side of the UI. Take a look at this blog post for more information about how to handle an image upload using NodeJS.

Searching and Purchasing

The user should be able to use the search bar to perform keyword searches on all items posted to the site, including items by the current user and other users who have posted. The search should match any substring in the description of a post. Notice the way it works in the animation below.

When viewing search results, the user should be shown a button to give him the option to purchase the item. After being purchased, the status of the item should change from SALE to SOLD in the database. The item should show up in the results when the user selects to view his purchases. Also, when a search is later performed, the “Buy Now!” button should be replaced by text indicating that the item has already been sold.

File Structure

As you are probably familiar with by now, this is roughly what the apps file structure should look like:

/ostaa
    > server.js
    > live.txt
    /public_html
        > index.html
        > post.html
        > home.html
        > ?.js
        > ?.css

You are welcome to add more files/folders if needed. The live.txt file should contain the live address that the app can be accessed at.

Going Live

As with PA 9, for this project, you are required to get this application set up live on the internet, using digital ocean, as I have shown in the past. You should include a file named live.txt in the same directory as server.js. This file should have just one line in it, representing the address that your web app is running on, so that we can go and test it. You are required to leave it up-and-running for at least 3 (72 hours) days after the assignment due date so that we can check.

Deadline and Submission

You may work on this project in pairs. You may not change teammates between PA 8 and 9, however you may choose to work on the project solo if you do not want to continue working with your teammate from PA 8. For this assignment, you should zip up the entire ostaa directory and submit that to Gradescope. The project is due by 7pm on November 8th, 2023.