HOME FIT OUT

The client wanted to optimize and redesign the admin dashboard for more convenient and fast usage, which included:

– Data processing optimization

– Creating an API for the client-side using React.js

– Building a new admin panel based on the existing database architecture of the old admin panel.

• Orders:

– shows a list of ordered rooms with furniture

– ability to see order details and change them.

• Rooms:

– shows the list of pre-designed rooms and custom rooms requested by the customers

– ability to create custom rooms from the existing list of furniture.

• Furniture:

– furniture overview in different categories

– ability to add new items, review, edit and delete any item on the admin panel.

• Product Categories: shows all the furniture categories (e.g. dining chairs, desks, etc.) and room categories (e.g. living rooms, dining rooms, bedrooms).

• Style Reports: are created after customers take a style quiz. Style reports show potential customers their individual style.   

– shows the style reports and users’ requests for custom-designed rooms

– ability to create a custom design for a room interior according to a customer’s individual style request and to share it with the customer.

• Logistics: gives an overview of all the freight carriers, home delivery agents and furniture suppliers that HOME FIT OUT uses to move furniture from suppliers to customers’ homes.

• Purchase Orders: 

– shows all the purchase orders for the furnished rooms 

– admin’s ability to create furniture orders for furniture suppliers and send the request via email.

• Last Mile Quotes: shows all the quotes that HOME FIT OUT requests from home delivery agents for each of the orders.

• Access Management: manages roles and access to different parts of the admin dashboard.

• Tax Rates: shows the tax rates for each US state and each Canadian province.

• Users: an overview of all the registered users.

• Countries: shows all countries available for delivery.  

• Settings: presents different variables that are used, e.g. what email account to use for sending emails, how to calculate room pricing, what room shapes to use for the room planner.

• Coupons: shows all the created coupons that can be applied for getting a discount.

when the developer pushes something into a certain branch, CircleCI runs all the tests. In case of successfully passing the tests, all changes are deployed automatically to the development server.

Authorisation process

The challenge here was to combine the authentication of the old admin panel with the new admin panel. 

A React-created application doesn’t exist on any kind of domain, it has its own one. This project had a pre-existing website domain. Plus, there was no direct communication with the back-end and every request went through React. So, our team had to create an admin panel on a separate subdomain to ease the authorisation flow.

The task was to create a flawless process of switching to the new admin panel without losing an authorisation.

Ruby device

We used Ruby devise gem for solving an authentication issue. 

Current admin authentication flow: 

1. An admin logs into the main site.

2. After successful authorization, the application sets cookies with the encrypted session_id of the logged-in admin.

3. This cookie is available for subdomains as well, so our react application has access to it.

4. Upon each request to the API, the React application sends this cookie with each request.

5. API decrypts cookies and gains access to the user session.

Image storage optimization

The issue: the images weren’t stored on the platform. They could be accessed via the links which led to third-party servers. Since only image links were stored, images used to drop out because some furniture items were out-of-stock on a third-party server, thus images became inaccessible too. 

In addition, the images used to overload the system as they took a lot of space and weren’t resizable. 

AWS S3, AWS CloudFlare

We took all the image links and uploaded them to AWS S3, a storage server and resized them. Plus, we distributed these images via CloudFlare CDN – Amazon’s content delivery network that speeds up the time load.

Now the images are not dragged directly from the server, they are stored in the CDN and users get access to the nearest local server from where the image has been dragged.

This way not only have we optimized the image upload but also accelerated the page time load and reduced the server load.

Optimization of the products list

The issue: the list loaded all products at once which a browser couldn’t handle. That is why the page load time was long. 

We added filters, pagination and sorting by fields

This reduced the load on the back-end, sped up the browser’s work and made the search for products clearer and more structured.

September 2018 — 2019