guicheffer / alien-registration-spa

👽 A spa of registration of Aliens

alien-registration-spa

👽   Coding test in react+redux+webpack+html5+css3+js+stylus+bla+bla+bla

Introduction

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.

Preview

🖥

💻

📱

Install

make install should install packages and dependencies

Run

Please make start to have the project clean, to build and to run

or:

• make build should build the project in dev mode
• make run starts on localhost in port 3000 👉🏼 http://localhost:3000
• make watch watches for changes and compile needed code
• make clean clears the app/ folder (responsible for the dist files)

⭐️ TL;DR

Please, access 👉🏼 http://alien-registration.herokuapp.com/

👨🏻‍💻 Development process

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 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)

Testing

• 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)

Still TO DO

Kanban Backlog The To Do thing column you can check here: https://github.com/guicheffer/alien-registration-spa/projects/1#column-2363174

⭐️ Considerations

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.

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

• 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);

⭐️ If I were a full stack developer

...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)