Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guicheffer/alien-registration-spa
👽 A spa of registration of Aliens
https://github.com/guicheffer/alien-registration-spa
aliens crud css3 es6 html5 jest localstorage nightwatch react reactredux redux spa stylus ufo webpack
Last synced: 22 days ago
JSON representation
👽 A spa of registration of Aliens
- Host: GitHub
- URL: https://github.com/guicheffer/alien-registration-spa
- Owner: guicheffer
- License: unlicense
- Created: 2018-03-13T04:51:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-26T01:13:36.000Z (almost 7 years ago)
- Last Synced: 2025-01-04T19:11:53.766Z (30 days ago)
- Topics: aliens, crud, css3, es6, html5, jest, localstorage, nightwatch, react, reactredux, redux, spa, stylus, ufo, webpack
- Language: JavaScript
- Homepage: https://alien-registration.herokuapp.com/
- Size: 911 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/
[](https://heroku.com/deploy)
## 👨🏻💻 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](https://atom.io/) as the editor.
~~what an inception 👀~~
- I used a [Kanban board](https://github.com/guicheffer/alien-registration-spa/projects/1?fullscreen=true) 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](https://webpack.js.org/) 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](https://reactjs.org/) because I'm familiar with and its the most fast way to begin it from zero. Also used [Redux](https://redux.js.org/) 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](http://nightwatchjs.org/)
- For the unit tests, it was used [Jest](https://facebook.github.io/jest/)
A few tests has been added (_I ran out of time_)
## Still TO DO
[Kanban Backlog](https://github.com/guicheffer/alien-registration-spa/projects/1#column-2363174) 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](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)