your box

Code test in react+webpack+html+js+stylus+bla+bla+bla for smartbox

Introduction

This mini-project is to shows up my knowledge with hype frameworks, libraries, React data treatment, styles, javascript, modern bundles and etc.

Preview:

Install

To install things and dependencies: make install, simply do it!

Run

To build the project, just make build;
To watch for updates on the project, just make watch;
To have the project clean (clear build folder), just run make clean;
To clear build folder, install things AND build the project, run this MAGIC command: make start
If you have any help with Makefile's make commands, please do: make help

You feeling tired to do those run tasks? Just access here: http://your-box-by-guicheffer.herokuapp.com/** ⬆️ This project was deployed on Heroku 🙂

If you want to deploy this project on your Heroku account, simply click on the button below:

👨🏻‍💻 Development process

Considerations

This application should show up the possibility of working with any framework, using the concept of elements mediator, where you can add any event into any component anytime you want to.

Technologies

Some of the technologies stack was handpicked because of preference in working with! Check below some of the tools and tech stack with their screenshots on it too!

I used Atom for the editor.

~~what a inception thing~~
I used a Kanban board for the project management at all, GitHub Project Board was the one. You can check right here how my Kanban worked in details: https://github.com/guicheffer/your-box/projects/3?fullscreen=true
I chose Webpack for bundling this project assets once I had to do 3 different exercises inside only one repo (better to read and review). Actually many advantages were included on this decision!
I chose React because I'm familiar with and its the most fast way to begin it from zero.

What makes/made me happy on every project (including this code challenge)

CSS Animations;
Order attributes in CSS alphabetically;
Atomic commits;
Commit on master ... (kidding, in general...PRs, please 😜);
Usage of caniuse.com (I mentioned that on the smartbox interview...I really searched and still search for some attributes in CSS sometimes);
Usage of new technologies, choice among frameworks and libraries;
- Vue, React, Angular and Knockout...love 'em 🖤
Usage of Mobile First designing and development;
To Study in general;
Usage of emojis ❤️ (I really LOVE this thingy);

Testing

EE2 tests

I ran out of time and didn't add any e2e unfortunately 😔

obs. you don't need the watch command on the project to be running the tests locally!

Unit tests

Unfortunately saw no ~~advantages on~~ useful unit tests for this project.

TO DO

Kanban Backlog The To Do column you can check here: https://github.com/guicheffer/your-box/projects/3#column-2128623

Extras: