[Toyota.com Clone]
The Toyota.com Clone(partial clone of the real site) is a full stack application focused on allowing a user to click on a vehicle from the build and price tab(on top right of real site). Currently the demo only allows for the user to click on a 2017 Toyota Tacoma. You are able to choose a grade, cab & bed, configuration(motor), color, package, and accessories. The summary tab shows all of your selections with the total price at the bottom. You can select 'request a quote' and send the info to a dealer. The dealer info is not currently hooked up but everything else is functional.
HTML/SASS
AngularJS
JavaScript
Node.js
MassiveJS
Express
Express-sessions
SQL Postgres (ElephantSQL)
GULP/Babel
I first used some Google Chorme extensions to scrape the site for photos and data on the vehicles. I used Elephant SQL to host 7 tables of data.
I built out 7 separate views using anuglar custom directives(components). Using ng-show/hide with ng-init to initiate the grades pages as the first view, users can go back and forth between pages seamlessly with no reloading. My site is much faster than Toyota's site.
For each view you see nice boxes with all the possible options to select from. I used ng-repeat to display data from the back-end and then generate all the remaining boxes with that info. This was useful but did cause some interesting challenges. Some of the bullet points had 5 options and some 4 or 6. I used ng-if to basically not have empty slots.
The dynamic changes that occur throughout the site were the hardest part. First of all, scope became an issue. You can select options on each page view and so I had to isolate the scope using custom directive scope isolation to not have the clicks activating the button on all views. I used the main view controller scope to start off with the base information of the SR-5 grade then updated scope to whatever the user clicks on. In this case I hooked up the TRD with photos too.
The select button changes classes onClick and adds new content, the blue checkmark, as well. This actually was tricky because I was using ng-repeat. To make it work I used the $index and ng-class to solve for this and allow only one at a time to change.
On each item selection I sent a post to the summary page on the back-end so that it functions similar to a cart. I ng-repeated over the sumary object to display the info. There was some really tricky stuff I had to do to get the totals to show up right and show up at all. I had to use a controller that was over all the views to track all the data. The numbers were strings from the database and the commas caused them to not be easy to work with in terms of math functions. So I had to turn them into a number, do the math, then back to a string for display.
Reverse engineering Toyota's site was not easy as I thought it would be. This part was a challange mainly because my tables were not set up properly to handle the photos in a different way than I origianlly set up the carousel to handle them.
I decided not to use Bootstrap but then later realized I needed it. Instead of being able to use it later which caused major styling problems I had to build the carousel and modal from the ground up. They are literaly straight JS.
[Selecting TRD Grade - changes the pictures dynamically from backend along with price/title on the carousel]
