Digital Closet

Live Website
Demo Video

The main goal of Digital Closet is to help users dress stylishly. It aims to do so by allowing users to catalogue and organize their clothes digitally and by providing them with outfit recommendations based on the clothes they have in their digital closet.

Tech Stack

Client: React, Redux, Cloudinary

Server: Node, Express, Bcrypt, Sequelize ORM, PostgreSQL

Features

Upload and save images of clothes.
Group images to form outfits and save for future reference.
Provides weather information to help plan outfits.
Provides outfit recommendations based on clothes in user's digital closet.
Mobile responsive.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

WEATHERAPI_KEY

ZENSERP_KEY

CLOUDINARY_NAME

CLOUDINARY_API_KEY

CLOUDINARY_API_SECRET

Installation

Below are instructions for users with Windows OS.

Install Node.js, npm, and git if you haven't already.
Clone the project into the directory of your choosing on your local machine.

git clone https://github.com/stephwuh/digitalCloset.git

Install related dependencies while in project directory.

npm install

Create .env file at the root of the project.
Create Cloudinary account and connect it to project.

This project uses Cloudinary's media platform to save image files to cloud storage.
www.cloudinary.com
Retrieve 'cloud name', 'API Key', and 'API Secret' from Dashboard under Account Details.
Input Cloudinary information into .env file as follows:

CLOUDINARY_NAME='cloud name'
CLOUDINARY_API_KEY='API Key'
CLOUDINARY_API_SECRET='API Secret'

'cloud name', 'API Key', and 'API Secret' needs to be surrounded by quotations.

Create Zenserp account and connect it to project.

This project uses Zenserp's google image search API for the outfit recommendation feature.
https://zenserp.com/google-image-search-api/
Retrieve 'API Key' from Dashboard under API key.
Input API key into .env file as follows:

REACT_APP_ZENSERP_KEY='API key'

'API Key' needs to be surrounded by quotations.

Create WeatherAPI account and connect it to project.

This project uses weatherapi to provide users with weather information.
https://www.weatherapi.com/
Retrieve 'API Key' from Dashboard under API key.
Input API key into .env file as follows:

REACT_APP_WEATHERAPI_KEY='API key'

'API Key' needs to be surrounded by quotations.

Install PostgreSQL server.

https://www.postgresql.org/download/windows/
Setup password during installation.

Install PostgreSQL client GUI (Postbird).

https://www.electronjs.org/apps/postbird
When the installation finishes and the program opens, enter in the username and password set above in step 8 to connect to your locally running Postgres instance.
Create a new database (database tab -> create Database).

Sequelize setup.

Input database name, user ID, and password set in steps 8 and 9 into the .env file as follows:

SEQUELIZE_DATABASE_USER_ID='user ID'
SEQUELIZE_DATABASE_PW='password'
SEQUELIZE_DATABASE_NAME='name'

Name, user ID, and password needs to be surrounded by quotations.

License

MIT

mreitmaj / digitalCloset