danerainbird / thingrepository

Node.Js and MongoDB-powered database for storing information about things you've purchased.

The Thing Repository

A simple Express and MongoDB-powered webapp that can be used to store information about the things you have bought.

Authentication is handled by Auth0, using the express-openid-connect Node module.

Setup

• Create a Auth0 account.
• Install MongoDB.
• Run npm install to install all required modules.
• Create a .env file and fill it with the below details:

PORT
MONGO_DB_URL
SESSSECRET
AUTH_BASE_URL
AUTH_CLIENT_ID
AUTH_ISSUER_BASE_ID

• SESSSECRET refers to a long, random secret value used for Auth token generation.
  • You can run node -e "console.log(crypto.randomBytes(32).toString('hex'))" to get a value for this.
• The final three values can be obtained from the Auth0 Dashboard.

Running

Run node .\app.js and navigate to localhost:8080, or whichever URL you have provided as the base URL.

Caveats / Limitations

This is a hobbyist project, and probably shouldn't be used in a real-world environment.

• This does not work on Internet Explorer. All requests coming from an IE UA string will be redirected to a page that asks the user to update their browser.
• I am not a programmer by trade - I can program, just not amazingly. As a result, the code here isn't the most efficient. If you see something that could be made better, please raise a pull request!

thingrepository's Issues

Make profile page informative

Currently, the profile page just displays the user's name( in this case, an email address or Google account name), which is a waste of pages.

We should make this page more detailed - it might be cool to include (in no particular order):

• The user's icon (pulled from Auth0?)
• The total amount of items a user has
• The total price of all items collected
• Anything else that comes to mind as I go

Ability to edit existing items

Existing items are currently static and cannot be edited without directly accessing them through MongoDB or MongoDBCompass. Editing would improve usability.

Format the table better for responsive displays

Presently, the main thing table is "responsive" via the below code in main.css:

.thing-table-child {
    width: 85vw;
    height: 75vh;
    overflow: auto;
}

While this does technically work, it doesn't look amazing. A better option would be to remove the image column after hitting a certain breakpoint, or change to display: block to create a vertical list at a specific view width.

Add search functionality

If a user has a long list of items, it might take a long time for them to scroll through all of the listings to find a specific one.

A search function that looks for matches in the descriptions or name field would aid in usability.

Fix error popups

Error popups currently show on the left hand side and only ever say the same error. This needs to be updated to actually good for the user.

Change API endpoints to send JSON data rather than redirecting

At present, the addThing endpoint performs a reload of the /things page. Every single time this endpoint is accessed, a HTML template is filled with values by EJS and then forwarded to the user. This happens every single time the user adds an item, and is network and processing-expensive, particularly when the user has to add many items.

The better option would be to change the addThing endpoint to provide JSON data of the added item upon successful adding, and use client-side JS / JQuery to update the table.

When the user loads the page again (such as navigating away, or using F5, the page should load as per usual, generating an HTML file via EJS templating)

Add filters

Similar to #9, adding some simple filtering would increase usability.

For example, to find all items over $50, a user could search for "price > 50".

Create README

As of present, there is no documentation for required packages and setup process. A READMEmd would fix this.

Add logging functionality

It might be useful to add some form of logging for administrative purposes. For example:

IP Address _____ uploaded _____ at _____
IP Address _____ deleted _____ at _____

These should only need to exist for a relatively short period of time.

Create package.json and clean up imports

Due to a mistake on my behalf, there's no package.json for this project, and there are a large number of "required" modules that are completely unnecessary.

Having a package.json will allow for npm install to be run, which means the entire node server can be set up much easier and faster on places other than my workstations (such as for cloning, or deployment to a live server)