https://github.com/guicheffer/your-box
🎁 A simple React app which shows up gift boxes from all over the world
https://github.com/guicheffer/your-box
bem css javascript js react smartbox stylus website
Last synced: 2 months ago
JSON representation
🎁 A simple React app which shows up gift boxes from all over the world
- Host: GitHub
- URL: https://github.com/guicheffer/your-box
- Owner: guicheffer
- Created: 2018-02-03T01:12:36.000Z (about 7 years ago)
- Default Branch: production
- Last Pushed: 2018-02-22T05:43:07.000Z (about 7 years ago)
- Last Synced: 2025-02-25T23:52:32.860Z (2 months ago)
- Topics: bem, css, javascript, js, react, smartbox, stylus, website
- Language: JavaScript
- Homepage: http://your-box-by-guicheffer.herokuapp.com/
- Size: 686 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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/): http://your-box-by-guicheffer.herokuapp.com/**
⬆️ This project was deployed on [Heroku](https://dashboard.heroku.com/) 🙂
If you want to deploy this project on your Heroku account, simply click on the button below:
[](https://heroku.com/deploy)
## 👨🏻💻 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](https://atom.io/) for the editor.
~~what a inception thing~~
- I used a [Kanban board](https://github.com/guicheffer/your-box/projects/3?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/your-box/projects/3?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.
### 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](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](https://github.com/guicheffer/your-box/projects/3#column-2128623) The `To Do` column you can check here:
https://github.com/guicheffer/your-box/projects/3#column-2128623
**Extras**:
- [ ] Style
- [ ] Add a critical style into pages
- [ ] Create views with A/B tests config
- [ ] Setup
- [ ] Circleci or similar tool
- [ ] Improve error pages
- [ ] 404 style
- [ ] 500 style
- [ ] Add needed unit tests
- [ ] Add extra e2e tests
- [x] Make a nice-to-read README.md