Demo SiteDemo SiteThe purpose of Custom Corner is to streamline an interior designer's workflow by aggregating data from various vendors and then sharing the collection with their clients. Since the live deployment of Custom Corner is used by a company and only allows authenticated users, this site serves as a demonstration of the app's functionality. Custom Corner is a full stack MERN (Mongo, Express, React, Node) app that scrapes various vendor's sites for data to be displayed. The user has the ability to filter through this aggregated data and make selections to be shared with their clients. Sharing can be done through Pinterest or there is a built-in PDF creator that makes sharing easy as well. Let's explore the functionality of Custom Corner!
Custom Corner is hosted on the Google Cloud platform and is currently using Docker to run the application. There are multiple containers running on the server:
Once the user is on the landing page, they will be able to login with the administrator provided credentials. Access to Custom Corner without credentials is not allowed. Clicking the "Login" button brings up a modal where the user's credentials can be entered. Please see the video to see this in action.
When the user selects "Clients" from the dropdown menu, they'll be brought to a page where they can manage the clients in the system. By selecting different clients, the user can add itens to the correct collections. Also, when deleting a client, all associated saved items in that collection get purged from the database. Please see the video for an example.
The Tackboard is where all saved items for each client will be displayed so they can be further shared. It is sort of a staging area. Once a client is selected, the user can can sort through all the aggregated data to make their selections. The Navigation items are dynamically populated from the scrapes. Only the available items are displayed. All the data is categorized by room type into further subcategories. The filtering works via toggle switches. They are attached to each vendor. By toggling a vendor on/off, that vendors items will be either shown or hidden. This happens in real time. To add an item to the Tackboard, the user will click the red thumbtack in the upper right corner of each item card. Once an item is added to the Tackboard there is a toast notification letting the user know the selection was successful. Multiple clicks will add multiple iterations of the item. Each item has a description line. If the description is longer than the card has to display, the text scrolls by hovering over it. If the user needs more information about any particular item, there is also a link back to the Vendor's site directly to the item. Please see the video for a demonstration.
Once the user is ready to share the collection of items with their client, they can save the items to a Pinterest board of their choice. (Sharing via Pinterest was a request by the client) Clicking on the red "Save" button at the top right of the Tackboard brings up a window that allows the user to select an item to add to a Pinterest board. The pinned item will also link back to the original vendor's URL for that item. If the user is not currently logged into a Pinterest account, they are prompted to sign in or create an account first. Another way of sharing the collection is via the "Create BOM" button right below the Pinterest button. This creates a PDF that can be downloaded and shared. The PDF also has links back to the original vendor for each item. Please see the video for a demonstration.