end to end testing with Cypress

Bolão – weekly update

Taking a while but i’m almost there, working on the last container, obviously the most complex. I was hoping to get this phase – containers actions to redux, auth, user registration, protected routes handling & centralize championships’ data – done by now but it’s clear that it’s a long task. And the end of the year ain’t gonna help. But i’m on the right way. At least it feels so. Code is getting really organized and soon ready to grow.

Btw, i moved all setStates of the page group detail to redux and i can feel a pretty big improvement in terms of rendering time. I’ll try to extract some data for comparison.

Bolão – weekly update

Still on the auth and account management part. It will take longer than i thought. But since i’ve set the next world cup as a beta objective, i’m good.

Spotted a very weird bug that changes team positions in fixtures without changing the scores. Went straight to the top on my Trello todo list.

I’m also on a big re-organization to move my requests to redux actions. This helps keep containers staying clean.

Bolão – weekly update

Weekly updates:

I’m on a large update to add accounts creation and authentication via Json Web  Token. Hoping to get it all quite ok by the end of next week.

Bolão – weekly update

Black Friday week at work. Didn’t do much.

Weekly updates:

Bolão – weekly update

Back from two weeks holidays to find out that a recent update screwed up indexes of matches within groups. Had to re-recreate the champions league group from start. This took a while. Also getting organized for next week.

Weekly updates:

Bolão – weekly update

Weekly updates:

Bolão – weekly update

Hey, i’m starting this post series about the updates i’m making on the Bolão app. Kinda like a log. Let’s see how it goes.

So far i have my alpha working online with:

Here’s an admin shot:

And a group details on the front:

Doing some ui adjustments little by little on this alpha for now and also working on a v1 version of the design on the side.

Weekly updates:

Bolão goes React at 6am

Yes it did. Quick explanation.

As said in my previous post, i was working on the second version of the app, mostly with Angular and i was growing impatient of not making consistent progress. Frustrated would be the word actually.

So i decided on a few changes that in my opinion now did have a very good impact.

1. Do it modern

I switched job. I am now, since march this year, working at Vtex in Rio working on an eCommerce platform. Hit the website for more. And since then, i’ve been working almost exclusively with React. See where i’m going right?

When you get started with SPA on Angular (1.X in my case) and move onto React, you start to wonder what you were doing before. True, those two guys are different, Framework vs Library. But oh boy. It’s so much faster to get up and going with React and after a while it just feels super natural.

2. Do it bad

Then, probably the most important move, i got motivated by my coworker Guilherme (he’s not aware, do not tell him) to “First do it”. Long story short:

First do it. Then do it right. Then do it better.

More details in his post about it.

I basically took my idea of the app, the way i’d be using it at first and ripped off tons of things. Non alpha-features.

No more user registration, login with encrypted password. I’ll be managing the admin part of the app by myself and with the help of a friend. Result: a tiny login by name input. Only. Case sensitive (sic!). And it does not matter at all, because it’s just about betting with friends. No need to store data, email, addresses…

Bam, move on the next unnecessary feature. Forget about style. That’s right, i set up the alpha version without a single line of css. Barebone html. Large jsx components, you got it, ugly. True. But during the time it’d take to prettify everything, i move on.

I won’t talk much about all of them but you get the main idea (especially if you’ve read Guilherme’s post by now).

3. Do it early

6am. What? Yes. I got tired of trying to work at night and not getting enough time to do such. Going out of work late, hitting the gym, having a beer with some friends… All those do not combine with a side project. At least not in the evening. That is why i am gradually moving on to wake up early. Still a work in progress though, you do not change a routine of getting up at 7:30 / 8am to 6am straight away. I still struggle some days, but it’s already paying off.

Since i wake up early, i have several hours of really free time when i can dedicate myself to the project or studying.  My head is clear in the morning, not tired of a whole day behind the screen. The place is quiet. All good. Plus, you get the extra feeling of being productive, of doing more in a day.

This post on Medium got me into making the switch.

Conclusion

I now have an alpha version of the app, with super basic features. Bare minimum. But it works, and i’m moving on to add extra one bit at a time. Fixing this massive setState in the middle, adding request’s results onto the screen, a bit of ui, adding a manifest.json, etc.

Bolão – a personal project

Hey, just thought it would be interesting to start writing about this personal project i have been working on for a while now and see how it evolves in the future.  It is called (for now) Bolão, which kind of means in english bet with friends.

Background.

Back in 2014, a good friend of mine, Gustavo, and me, were willing to to some bets between us for the upcoming World cup. Just for fun. The winner would earn a round of beer at the end of the tournament. We did not care about money and were just interested about the bets themselves.

We started on a rough piece of paper. Not even a clean one, true story. Writing down each group with their teams and Gustavo settled some simple score rules. Which we still use nowadays. We then went on like this up until the final phase and i eventually paid him a round of beers as we had won by far.

After this we felt like we could do the same for the current Brazilian championship and the Champions League.

We evolved to a Whatsapp group with friends and then to a Google sheet to organize things a bit better.

V0.

A bit later on, we started to use an online service that we had found to better the experience. It was no easy thing to find as we were only interested in betting for fun, no money involved. Very options out there for this (duh, no money involved, no one cares…). The UX was real bad, the UI only slightly better and we were not aware of the score calculation algorithm, which was quite frustrating.

This is when it hit me.

Man, you’re a developer and used to design a lot.

You did not find the good solution yet.

Fill the gap.

Build it.

V1.

This is where the fun comes in. I started a first version, static to actually mimic the Google sheet we used and semi automatize the process. The idea behind it would be, minimum UI to focus on the code, auto score calculation and manual data update.

Tech side.

AngularJS 1.5, Sass, Jade, Git, Npm & HarpJs. The online data would be stored with a free json storage service and manually updated.

Very few dependencies, ui-router (not even well set), angular-translate (titles only but operational) to separate content into constants and angular-cookies to remember the user’s choice concerning the language.

Here is a shot of the structure:

Still in use for the current Champions league at http://bolao.kevinch.com.

V2.

Ok. That looks… ok. But we are far from a real life app here. Yes. But it really was, no, is, a functional prototype for a start. And this is were i started the V2 a few months ago (remember, this a side project, it takes time).

V2 is a full app based on NodeJs for the backend, MongoDB for the database, Express for the connection between those two and Angular 1.6 for the frontend. Yes, the MEAN stack. You’re following, nice.

Based on the generator-gulp-angular,  it runs locally on a local MongoDB instance with Nodemon for backend hot reload. Online, it is currently hosted on Heroku with MongoLab. I managed to get both environments working fine and being automatically independent, development and production.

What? Screenshot time? Ok.

Rather simple.

I just managed yesterday to get the connection working to retrieve soccer data via football-data.org. A free service by Daniel Freitag that will allow me to retrieve data and focus on the app itself.

I spent a great deal of time trying to achieve this connection, mainly with the angular-footballdata-api-factory but for some (CORS) reason it just would not work. Finally got it up and running by creating endpoints with NodeJs and Express in my app to query the distant api. Frontend is just hitting the app’s api.

Next objective is to set up a proper login service. I am testing Stormpath as it looks like it would take care of all this for me. And for free with an awesome developer plan!

Tons of work to do and lots of ideas but it is on its way and we are getting organized with Trello, Bitbucket and many TODOs.

Btw, history repeats, i seem to always be the last of our bets. Gotta find bonus points methods to catch up.

I’ll keep on posting here about evolution.

Cheers.

Past Work

Soloteste

Design & development
Visit live site

Pousada Corsário

Design & development
Details Visit live site

Sydney Colombani

Design & development
Visit live site

Brecha

Development
Visit live site

Julia Queima

Design & development
Visit live site

Costa Brasilis

Design & Developement
Details

A3Interiores

Wp Development
Visit live site

ValorCafé e-commerce

Design
Details Visit live site

Oficina de Arquitetos

Development
Visit live site

Cani.tv

Development
Visit live site

Zee Champanheria

App design
Details

Rioow

Design & development
Details

ASBEA/RJ

Design & development
Details Visit live site

ValorCafé

Design & development
Details Visit live site

Livraria da Travessa

Design & development
Details Visit live site

Furafila

App design
Details

NETbureau

Design & development
Details Visit live site

About

So, i'm a developer from France currently living in Rio de Janeiro. I do code for the front-end side of the web with things like javascript, html, css, preprocessors, tasks runners, version control, frameworks, tdd, CI, Wordpress and others.

I do speak english, portuguese and french, read tons of books, love to play on a wake, bmx and snowboard and would like to travel to the Karakoram range, Tierra del Fuego and Mongolia.

I do appreciate you stopping by and admit i did abuse of the auxiliary verb do in this about.