Interiorize

Design Made Easy

Explore the Interiorize API Docs »

Active Development: 08/10/21 - 08/24/21

Interiorize was built for those who don’t have the knack or time to decorate their homes. Users are sent boxes of items based on their results from our style quiz. The style quiz asks users for their budget, what items they want us to avoid, and their room, style, and color preferences. Based on these responses, the Interiorize API will create the perfect interior design box for that user. Items can range from unique and quirky decor to beautiful art. Interiorize also offers a shop where users can browse through our inventory and purchase anything that captures their eye.

Make an account and get your personalized style box at Interiorize!

Demo

Features

• Style Quiz - The quiz gathers style information from users and stores their answers in our database. Once the form is submitted an order is generated based on the user’s answers.
• User Profile - The user profile displays the most recent order along with the last three previous orders. Users can update their style preferences. These changes will update their preferences in our database.
• Shop - Users can shop for items generated by our API.
• Shop Filter - Items in the shop can be filtered based on multiple queries such as color, style preference, and budget.
• Item Details - Each item in the shop has an details page where the user can add the item to their cart
• Cart - Total cost is calculated based on items in the cart. Items can be added and removed from the cart. An order can be “placed” (order will appear on the user profile page). The cart icon is also updated based on whether it currently contains items or not.
• User Registration - Users can securely register and login through Auth0

Technologies

• PostgreSQL
• Express
• React
• Node.js

Screenshots

Code Examples

PostgreSQL query used to select all user quiz data to populate the user profile page.

 static async getAllUserQuizData(user_id) {
        try {
            const response = await db.one(`
                SELECT user_id, budget, json_agg(json_build_array(color_one_id, color_two_id, color_three_id)) as colors, r1.color_name as color1, r2.color_name as color2, r3.color_name as color3, category_id, categories.category_name, style_id, tag_description as style_name 
                FROM quizzes
                INNER JOIN categories ON categories.id = category_id
                INNER JOIN tags ON tags.id = quizzes.style_id
                INNER JOIN colors as r1 ON r1.id = color_one_id
                INNER JOIN colors as r2 ON r2.id = color_two_id
                INNER JOIN colors as r3 ON r3.id = color_three_id
                WHERE user_id = ${user_id}
                GROUP BY user_id, budget, categories.category_name, quizzes.category_id, r1.color_name, r2.color_name, r3.color_name, tag_description, style_id; `
            )
            return response;
        } catch (error) {
            console.error('ERROR', error)
            return error
        }
    };

Sample of the generate order route and queries.

router.post('/generate-order', checkJwt, async (req, res) => {
    console.log(req.body);
    const { user_id } = req.body;
    //GET all items
    const allItems = await ItemsModel.getAll();
    
    //GET quiz info
    const quizData = await QuizzesModel.getAllUserQuizData(user_id);
    const budget = quizData.budget;
    const category = quizData.category_name;
    const style_id = quizData.style_id;
    
    //GET user inventory
    const userInventory = await ItemsModel.getUserInventory(user_id);
    
    //GET avoid tags
    const avoidTagsReturn = await UsersModel.getUserAvoidStrings(user_id);
    const avoidTags = avoidTagsReturn[0].avoid_tags;

    //FILTER BY BUDGET & CATEGORY
    const filteredByBudget = allItems.filter(item => item.price < budget);
    
    //FILTER BY CATEGORY
    const filteredByBudgetCategory = filteredByBudget.filter(item => item.category_name === category);

    //FILTER BY STYLE TAG
    let filteredByBudgetCategoryStyle = [];
    filteredByBudgetCategory.forEach(item => {
        //If the tags of the item contain the style tag ID, add that item to the new list
        item.tag_ids.forEach(tag_id => {
            if(style_id === tag_id)
            {
                filteredByBudgetCategoryStyle.push(item);
            }
        });
    }); 

This route also takes into account user inventory and budget. The route results in a single order that matches the user's style preferences and contains items the user does not already have. Since our database is not extensive, there is a possibility that there are no items matching the quiz and inventory criteria. In that case, the user is directed to the shop.

Process

Interiorize was designed to function similarly to the popular clothing subscription service, Stitch Fix. But without professional designers on our payroll, we needed to find a way to mock that personalized functionality with just software. To do that we created a mock database of 100 products gathered from Wayfair. These products were organized into a spreadsheet based on style (modern, farmhouse, contemporary, and bohemian) and room. Price, images, description, color, and brand were also collect from these items. This database is the core of Interiorize and allowed us to successfully mock the basic functionality of a personalized subscription service.

View the spreadsheet here.

Frontend design mockup can be viewed here.

Challenges

A big challenge for our group was working with a database of only 100 items. A bigger database of items would've allowed for us to create style boxes easier and more aligned with customer's style choices. At the moment, color preferences are stored, but not currently being used to filter items. A bigger database would've allowed us to filter items by color.

Working with our own API was both a challenge and an advantage. We could easily alter routes if we weren't getting the information we needed on the frontend, but some of the PostgreSQL queries eventually became long and complicated.

Goals

• Admin Dashboard - If Interiorize needed to be production ready for a business, it would need an admin dashboard. From the admin dashboard, employees would be able to see user's quiz results, recent transactions, and more.
• Reviews - Adding functionality for users to be able to review previous orders. Rather than displaying these reviews to the public, this information would go back to the "stylists" to better inform their decisions for the next box.
• Payment - During our two weeks of active development, we were not able to implement any sort of mock payment setup. Adding a payment page would have been the final touch to the ecommerce portion of the project.

Contributors

Sarah dePalo - Technical writer, user profile and style quiz design and functionality. Shopping cart calculations and item removal
Zach Gleeson - Homepage, shop intro, item details, and shopping cart design and functionality
Logan Cooper - Project manager, seeding and setup of database, setup of generateOrder and shopSearch routes
Nate Lee - Creating and securing API, frontend and backend deployment, auth0 integration, API docs

Don't forget to checkout the backend code and the API!