2017 is coming and it is going to be HOT Hayyyyy God! How do I know? Check this thread that Mark Essien started and you will fear for the dear life of your next year goals. People are not smiling.
Many were realistic goals, you know? Mostly people starting businesses and getting better at some things like my incredibly talented friend Victor Fatami, and Mr. Mark was at the background dropping bits of sensei-level advice for them.
I didn’t drop mine.
Someone already said what I want to achieve and that is to be a Google Dev Expert by the end of the year. Simple.
To achieve this I am going to be releasing 100 projects between the next 150 days. Then I will join the January set of remote interns at Hotels.ng. This post is the first attempt at that. Now Ire Aderinokun who is a google dev expert -in case you didn’t know her before now, is this very intelligent front end developer, plus she has a piercing oh chisos! sorry Timi — she says she doesn’t know React/Redux YET, what do you think someone who is receiving fire from Prosper (another Google Dev Expert) will do?
Go out and build stuff! So I learnt most of React in 4 days. And solved this small application problem with the library. The problem was set by this company TextMaster that were looking for Senior level React developers, but will it kill a guy to try. Nope.
It will frustrate me? Yes! It will make me have back pains, and I will feel like “Lord Take Me, Just Take Me Lord” ? Yes! I will become an hermit and lose all my friends and social life in the process? Yes! Maybe not. Honestly I don’t know this life ehn. I will tell you what TextMaster replied when I submitted my solution.
Here’s the question:
Github link: https://github.com/textmaster/tm-react-checkout
## The problem
TextMaster’s quest for global domination has prompted us to open a supermarket — we sell only three products:
```
+ — — — — — — — | — — — — — — — | — — — — -+
| Product Code | Name | Price |
+ — — — — — — — | — — — — — — — | — — — — -+
| FR1 | Fruit tea | $3.11 |
| AP1 | Apple | $5.00 |
| CF1 | Coffee | $11.23 |
+ — — — — — — — | — — — — — — — | — — — — -+
```
Our CEO is a big fan of buy-one-get-one-free offers and of fruit tea. He wants us to add a rule to do this.
The COO, though, likes low prices and wants people buying apple to get a price discount for bulk purchases. If you buy 3 or more apples, the price should drop to $4.50.
Our check-out can scan items in any order, and because the CEO and COO change their minds often, it needs to be flexible regarding our pricing rules.
Clicking the product buttons adds items to the basket, the items in the basket are listed and the total is displayed.
Extend this system so that it supports the buy-one-get-one-free and three-or-more discounts. Ideally the system will show the user which discounts are being applied, but it’s not essential.
## Running the project
The project uses [create-react-app](https://github.com/facebookincubator/create-react-app) as a starter kit.
To run it the steps should be:
* ensure you have a recent version of node and npm
* `npm install`
* `npm run start`
## Submitting your solution
The purpose of this test is to verify your abilities to code and see how you architect an application.
Finally, please note that even if you have questions about the test we will not answer them, do what you think is best.
Here’s my solution:
Github link: https://github.com/AyoAlfonso/checkoutadvanced
Detailed Explanation ofThe TextMaster Application Developed
Problems:
1. For the 3-Apple $4.5 Discount :
STEP 1
In the product.js folder that contains the ‘model’ or data of the application, I took the ‘productInfos’ objects(our data) and added a second discount option for the Apple buyers, named it “3-Apples Discount” — Product code is “AP2”. This makes it easy for other developers to read.
Effect:
When the application reads data from this object, it will include the product item “3-APples discount” and display on the “view” for the users to see.
2. For the Fruit Tea Freebie:
STEP 2
I created a folder that will house every future freebie we were giving customers for each product called the “AuxBasketTotal” (in the componnent folder), since the main basket total was called “BasketTotal”. Then I created extra property fields for the freebie like this :
FR1: { value: 3.11, name: ‘Fruit Tea’, freebie: 1.00 },
AP2: { value: 4.50, name: ‘3-Apples Discount’ , freebie: 0.00},
instead of the former format
FR1: { value: 3.11, name: ‘Fruit Tea’},
AP2: { value: 4.50, name: ‘3-Apples Discount’ },
This is good software design since it helps us if we want to give extra freebies in the future for other products.
Below this I added :
export const getProductFreebie = (itemCode) => (
productInfos[itemCode].freebie
);
To sort the type of data needed for step 2
STEP 2
In the “reducers” folder which is where the logic of the application is I added a folder called “auxcheckout” that would later be used by “AuxBasketTotal” to print out data.
All parameters remain. Except the data accepted into this file. Since we are only using the freebie data:
Imported by:
import { getProductFreebie } from ‘../config/products’;
Adding
export const getTotal = (state) => (
getProducts(state).reduce((total, current) => (
total + getProductFreebie(current)
), 0)
);
This will give a end total for only freebies given.
- Container.js in AuxBasketTotal file will pick this data up by this code :
import { getTotal } from ‘../../reducers/auxcheckout.js’;
Extra steps
i. Added a text to make it easy for customers to understand
{(total) + “ Free Fruit Tea(s) For You!” } in AuxBasketTotal\Components.js
ii. Changed the CSS of the AuxBasketTotal to blue.
.app__auxbasket-total {
font-size: 2em;
font-weight: bold;
margin-top: 1em;
color:blue;
}
End Result:
This repo has been uploaded to Github without the node_modules so that you can you know download and prod about on your own.
So the gist I wanted to tell you about the CTO of TextMaster; He just said “Ogbeni uuuumm, ummm, I don’t think you solved it the way we wanted, this is hard to say but your solution is just so basic”.
Truth be told I wanted to die, I turned blue, I started to cough abrasively, I later got hold of my self. But I reflected and thought about it, maybe someone who had more experience than I, had just simply written a more clever algorithm. If you have a better way of doing this please tell, I would love to pick your brain on this.