- This app is hosted on Heroku: https://aqueous-spire-23184.herokuapp.com/
- Use the username "admin" and password "password" to log in as an administrator.
- Please zoom out if you can't see the "log out" button in the navigation bar when logged in!
Hosting the App Locally
If you would like to run this locally, I've added steps for how to do so below. The apps requires you to initialize the database using some JSON files. Please execute the following:
npm install mkdir data mongod --dbpath=$PWD/data mongoimport --db farmdb --collection items --type json --file models/itemlist.json --jsonArray mongoimport --db farmdb --collection avatars --type json --file models/avatarlist.json --jsonArray
Note that the user database is initially empty. The first registered user will be set to be the administrator of the web app.
Product Description (Overview)
The web app I've created is a (quite small) web-based farming game. In this app, users own a "farm" in which they can plant various fruits, wait for them to grow, and then harvest them. Users can then visit a marketplace and post "listings" through which they can trade their goods for (fictional, virtual) currency.
Aside from the core farming and trading mechanics, users are also given the ability to customize their "avatar" by selecting from a variety of available assets. Every user also has a small profile page where they can set a status/profile message. Other users who visit the user's profile are able to see some basic information about the user's farm, as well as what the user has written in their profile message.
Log In Page
When a user first visits the site, they are presented with the "Log In" page which prompts them for a username and password. If the user tries to log in with invalid credentials (either blank input or mismatched username/password pairs), a notification message appears to inform the user of their failed attempt. Upon successful login, users are redirected to their farm.
Also on the "Log In" page is a link to the registration page.
As indicated by the title, the registration page allows visitors to sign up for a new account. On this page, visitors must enter a unique username, a password for the account, and select their initial avatar appearance.
If the user enters a username which already exists, they are presented with an error message and prompted for a new name. Upon successful registration, users are redirected to their farm.
Each newly-registered user is given the following to begin with:
- 5 of each item
Note: The very first registered user in the system will be marked as an admin of the web app!
Index Page (Inventory & Farm)
The main page of the web app displays both the user's inventory and their farm. The inventory is fairly straightforward: it displays a list of all items owned by the user, as well as an indicator of how many of each item they own. The inventory is re-fetched every time the user reloads the index page, or when the user harvests an item from their farm.
A user's farm is represented by individual "slots" in the farm. Every user begins with 3 farm slots at first, but additional slots may be purchased using virtual currency. The cost of additional slots goes up in proportion to how many times the farm has already been upgraded.
To interact with the farm, users must click on a slot. When a slot is clicked on, a modal window pops up with information about the slot. This information includes:
- The name of whatever is planted at that slot (if nothing is planted, displays "Empty Slot")
- A timer indicating how much time is left until a plant can be harvested
- Action buttons depending on the status of the slot
- If there is a plant: buttons for harvesting and removing the plant are visible
- If there is no plant: buttons for planting seeds are visible
These actions are further explained below:
- Harvest: If a plant is fully matured, clicking "Harvest" will revert the slot to "empty" and the user will randomly receive 2 - 10 of the harvested item, which are added to the user's inventory.
- Remove: Reverts a slot to "empty". The user will not receive what they planted back.
- Plant X: Removes one item from the user's inventory and plants it in the farm slot.
It takes 30 seconds for a plant to fully mature, and the image displayed for the plant changes depending on how far along in the maturation process the plant is:
- A plant that is less than 15 seconds old will be displayed as a tiny sprout
- A plant that is between 15 and 30 seconds old will be displayed as a... bigger sprout thing (I'm clearly not good at agriculture)
- A plant that is 30+ seconds old will be displayed as a bush, and is harvestable
In the marketplace, users can add listings to buy / sell items. Clicking on "I want to buy something!" or "I want to sell something!" will bring up a form for users to fill out. If the user provides valid input, a new listing is added to the marketplace. Depending on whether a "buy" or "sell" listing was added, money or item(s) will be removed from the user's inventory.
When a listing is clicked on, one of three things may occur:
- If the listing is owned by active user, the listing will be removed, and items/money will be returned to the user
- If the listing is not owned by the active user and is a "buy" listing: the user will lose 1x the item on the listing, and receive money based on how much the original poster was willing to pay
- If the listing is not owned by the active user and is a "sell" listing: the user will earn 1x the item on the listing in exchange for whatever the cost of the item was listed as
In the last two cases, once the quantity for a listing reaches 0, the listing is removed from the marketplace.
In this page, users can see a list of all registered users in the system. For each user in the system, there is a row containing the head of the user's avatar, as well as the user's name. At the top of the page is a search bar which users may use to filter the list of users. Clicking on a user's row will bring you to that user's profile page.
Users may see information about other web app members through profile pages. Every user has a profile page which displays basic information about their farm, their avatar, and a status/profile message. The profile message can be set when a user is viewing their own profile and clicks on the message box.
The farm slots in a profile can be clicked on, and will bring up a modal window which contains the name of that slot, as well as an image of whatever is planted there.
On the left side of every page (sans log in, register, and the admin panel), users can see their avatar. Clicking on the avatar will display a modal window through which users can customize their avatar by cycling through premade assets. Changes to an avatar are saved upon clicking "Save Changes".
The avatars of other users are viewable in the following pages: "Marketplace", "User Search", and "Profile".
The Admin Panel is accessible only by users marked as admins. If a user is an admin, a link to the Admin Panel becomes visible in the user's navigation bar.
(If a regular non-admin user attempts to access the page, they are presented with a "you are not authorized to view this page" message.)
The Admin Panel displays information about all users in the database in a table. In each row, the following buttons are available:
- View Full Info: displays a more comprehensive list of details about the user
- Update User: allows the admin to change some information about a user, such as their password, avatar, and how much money the user has
- Delete User: allows the admin to permanently remove a user from the database. A confirmation window is displayed in case the admin clicks the button on accident
assets/ css/styles.css # All the styling for the web app images/ # Contains all the image assets for the web app scripts/ # Client-side JS files; the names are pretty self-explanatory models/ # Database-related files avatarlist.json # A file used to initialize the "avatars" collection itemlist.json # A file used to initialize the "items" collection models.js # Server-side JS file defining schemas and the connection to the database routes/ # Server-side JS files for processing and handling requests avatar.js # Used to handle requests related to avatars farm.js # Used to handle requests related to farms routes.js # Collection of all other requests views/ # All the client-side views server.js # File used to launch the web app
The web app makes use of MongoDB with five collections:
users: Keeps track of registered users
listings: Keeps track of marketplace listings
items: Keeps track of items available in the web app (maps item names to their image paths)
avatars: Keeps track of avatar assets available in the web app
farmslots: Maintains information about all farm slots