Creating my side-project in 2 weeks

Second day: basic working cards

Welcome back to this second day of this serie. I made a lot of advancement today, so let's start now.

The design part
I ended up with this basic design for the cards, should be improved but i think it's good for now (also the buttons are not really the good ones, just to get an idea of the result).

I then started creating a very basic sidebar for the dashboard page, where you will be able to create boards, access them and see you cards. Here is the result, also need a lots of improvements :

The code part
I added two routes for this card system, where you can only get all the cards and update a card.

Route::group(['middleware' => 'jwt.auth'], function() {

    Route::get('cards', 'CardController@all');
    Route::post('cards/update', 'CardController@update');
});

Don't forget to add the jwt.auth middleware if you are also using JWT, and you also need to add a header when performing a request through your routes. Here is a exemple POST request with axios :

axios.post('/api/cards/update', data, { // A variable or an object
    headers: { 
        'Authorization': 'Bearer ' + token, // The token of the current user
    },
}).then((response) => {
    // Here you get back your response
});

The CardController then handle the requests and send back a success data which can be true or false - based if everything went smoothly.

And with this basic stuff I got a very cool and easy view of what can be the result of this application - also by adding a feature to make the cards movables : I simply registered a Vue directive with the id draggable

Vue.directive('draggable', {
    bind: (element) => {
        // Code to make the card movables
    }
});

and then i simply add v-draggable to the main div of the Card component to make it can move!

Here is it for this day, tomorrow I think i will be working on a custom right click menu, to create/delete cards, and also looking around to improve the design.