👽 Coding test in react+redux+webpack+html5+css3+js+stylus+bla+bla+bla
This mini-project is to shows up my knowledge with hype frameworks, libraries, React and flux data model, styles, javascript (es6), modern bundles and etc.
make install
should install packages and dependencies
Please make start
to have the project clean, to build and to run
or:
make build
should build the project in dev modemake run
starts on localhost in port3000
👉🏼 http://localhost:3000make watch
watches for changes and compile needed codemake clean
clears theapp/
folder (responsible for the dist files)
Please, access 👉🏼 http://alien-registration.herokuapp.com/
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 as the editor.
what an inception 👀 -
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/alien-registration-spa/projects/1?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. Also used Redux for controlling global states (specially for aliens registration, our modules its where actions and dispatchers are located)
- For the e2e, it was used Nightwatch.js
- For the unit tests, it was used Jest
A few tests has been added (I ran out of time)
Kanban Backlog The To Do
thing column you can check here:
https://github.com/guicheffer/alien-registration-spa/projects/1#column-2363174
This application should show up the possibility of working with any framework, using the concept of mediator, where you can add any event into any component anytime you want to.
There are some other considerations I listed right here:
- Yep, I'm sure you're wondering (Can an Alien be multiple species at same time?). Answer is: YES! Aliens can be multiple type of species at the same time (I don't even know if that's possible 😷)
- What about if I were a full stack developer? (specially on this code challenge). Please read the final text on this readme
- IMO a good code doesn't need comments spread out.
- CSS Animations;
- Order attributes in CSS alphabetically;
- Atomic commits;
- Commit on master, just like this repo... (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.js, 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);
...I would:
- ...definitely build an API for saving and updating aliens data. this API should consist:
- having a Node.js as the backend service
- a Redis or even a Mongo db running as the database
- express for our route service
- ...a AWS t2 for having our API running in prod environment
- ...be using our current React+Redux for hitting the APIs and bringing data
- ...be using axios, this should be a better idea (best ajax polyfill)