Home Inventory app with Node and React

Purpose

Use this app to keep track of the items that you own. Your home inventory can serve as documentation of asset values for insurance coverage and claims and for charitable contributions. Alternatively, use the app as a wish list of items that you want to purchase or receive as a gift. Or if you’re a follower of the voluntary simplicity lifestyle, use the app to become more aware of how little you own and the future purchases you want to avoid.

App features include category filtering, custom categories, image uploading, and personalized inventory accounts via Google authorization.

While home inventory tracking is the original purpose of the app, it can be repurposed to track almost anything, e.g., vinyl records, baseball cards, comic books, stamps, coins, etc.

Getting started

1. Install dependencies:

    npm install
   

2. Open s3bucket-name.js and enter your AWS S3 bucket name:

    export const s3bucketName = 'YOUR_AWS_S3_BUCKET_NAME';
   

3. Create a Google App from the Google Developers console.

4. Create an .env file and enter your secret AWS and Google credentials and your ROOT_URL (which may differ from the example below depending on your local dev setup):

    export AWS_ACCESS_KEY_ID='YOUR_SECRET_AWS_ACCESS_KEY_ID'
    export AWS_SECRET_ACCESS_KEY='YOUR_SECRET_ACCESS_KEY'
    export GOOGLE_CLIENT_ID='YOUR_GOOGLE_CLIENT_ID'
    export GOOGLE_CLIENT_SECRET='YOUR_GOOGLE_CLIENT_SECRET'
    export ROOT_URL='http://localhost:8080'
   

5. If you're using Travis, you'll also want to add the encrypted credentials to the .travis.yml file.

6. Likewise, if you're deploying to Heroku, you'll want to add your encrypted API key to .travis.yml and create vars in Heroku for your env variables and mLab (or other MongoDB service) database URL.

7. Start the development environment:

    npm run dev
   

8. Run local tests:

    npm run test-local
   

9. When you’re ready for production, generate a production build:

    npm run build-prod
   

Screenshots of features

Fig. 1 – Google authorization

---

Fig. 2 – View all items

---

Fig. 3 – Filter items by category

---

Fig. 4 – View a single item

---

Fig. 5 – Edit an item

---

Fig. 6 – Add or edit categories

---

Fig. 7 – View account information

Technology used

• Server
  • Node
  • Express
  • Passport
• Client
  • React
  • Redux
  • React Router
• Styling
  • Tachyons
• Database
  • MongoDB
  • Mongoose
• Testing
  • Mocha
  • Chai
• Services
  • Amazon Web Services – S3
  • Google Authorization
• Deployment
  • Heroku
  • Travis
  • mLab