QueryJane - Development Update

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@kit.andres·
0.000 HBD
QueryJane - Development Update
QueryJane is a web application developed with Django that allows to connect with companies and experts in different sectors of the cannabis industry. Beta version is available [here](https://queryjane.net/).

<center>
![Screen Shot 2018-02-03 at 10.04.54 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517713541/hvugxklkbuusskjbaur9.png)
</center>

I have been working in different functionalities last week. Let me show you.
***
## New Features
### Added messages dashboard.
Created the inbox dashboard, to allow users to review all their received messages. Before, they only can check their messages in the inbox menu, in the application header. Now, when there are more than 10 messages in the inbox, the "View all" link will be available.

<center>
![Screen Shot 2018-02-03 at 11.04.24 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517717096/l24swbxullfk1dzggikr.png)
</center>

By clicking this link, users will be redirected to the "Messages dashboard":

<center>
![Screen Shot 2018-02-03 at 11.06.51 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517717254/xquekagtlram46uyja0h.png)
</center>

All received messages are visible here. By clicking a message, the content detail will be displayed in a modal:

<center>
![Screen Shot 2018-02-03 at 11.09.17 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517717380/wjouike0cxl5ahxloulj.png)
</center>

This is the same modal showed when users click messages in the "messages menu", in the header bar. This portion of code has been reused for this functionality, and the function to reduce the "New messages" counter has been unify using Javascript.

I have used the [generic class-based views](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-display/) provided by Django. In this particular case I used the [ListView](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-display/#listview), that allows to represent a list of objects. In this case, a list of messages filtered by receiver.

> The detailed code changes related to this feature can be found in this [commit](https://github.com/roadhousestudio/queryjane_app/pull/31/commits/dee03d741bc98c68ec75882505ba8f7b4a37b47e).

### Added notifications dashboard.
Created the new page "notifications dashboard", to allow users to review their notifications in a section dedicated to that purpose. Before, users only can check their new notifications in the notifications menu, in the application header.

<center>
![Screen Shot 2018-02-03 at 11.26.49 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517718506/xkp5asdu1zrtpp8vkg4q.png)
</center>

Same as how it works with the inbox messages, by clicking the "Show all" link, users will be redirected to the "Notifications dashboard."

<center>
![Screen Shot 2018-02-03 at 11.29.57 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517718616/qr5glqie4zfxfhi7s5qq.png)
</center>

Users can find all notifications in this page. It's a functionality very similar the the "messages dashboard". I have used the  [ListView](https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-display/#listview) generic Django view to implement this list of objects by the user for whom the notification is directed. The notifications detail is loaded using Ajax requests and showed in a modal.

<center>
![Screen Shot 2018-02-03 at 11.48.15 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517719730/cdy3wmiabmoyuwq0bix0.png)
</center>

> The detailed code changes related to this feature can be found in this [commit](https://github.com/roadhousestudio/queryjane_app/pull/31/commits/117737cc04db334f99eb8601d5189af622190b0a).

### Users can upload their profile picture.
Added profile picture form to the account settings. Users can upload an image file that will be visible on their profile detail.

<center>
![Screen Shot 2018-02-03 at 11.38.18 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517719126/pfehkkybhosjhh6gbxht.png)
</center>

By clicking  on the "Update"  link below the photo, the files explorer will be available and users will be able to upload their profile picture. The picture is loaded through an ajax request. This picture will be visible in the profile detail page.

<center>
![Screen Shot 2018-02-03 at 11.44.02 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517719464/xxbsjtk8vu63g3ydbquj.png)
</center>



> The detailed code changes related to this feature can be found in this [commit](https://github.com/roadhousestudio/queryjane_app/pull/31/commits/0ecc990857fce88a29c3166bc274a58b8218747d).

***
#### Code refactoring.
Code refactoring in the "account" app views. In the app views there were a lot of code. Now, views for "Notifications", "messages" and "profile" can be found in separate files. This will allow contributors to understand the code much more easily.

> The detailed code changes related to this code refactoring can be found in this [commit](https://github.com/roadhousestudio/queryjane_app/pull/31/commits/a6876fe9b341e143819e67bfc37c5e754c800dd1)
***

<center>
![Screen Shot 2018-02-03 at 10.23.10 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517714734/buanjqlm7hnwn4zoy4rq.png)
</center>

<center>
Find my Github account [here](https://github.com/aaquirogal)
</center>
***
### How to contribute?
[QueryJane](https://queryjane.net/) has been developed using the [Django framework](https://www.djangoproject.com/). You can fork the project, and run it locally is very easy. Follow the steps described in the [open source repository](https://github.com/roadhousestudio/queryjane_app) installation guide. The project has been configured using Docker. you only need to install [Docker](http://docker.com/) and follow these steps.

### Future work.
* E-mail notifications.
* Activate  Spanish site.
* Styles adjustment: I'm backend developer, and my skills as front-end developer are low. I will search for some help to adjust some sections styles.
* Advertising campaign.
* In order to allow people interested in contributing to the project to integrate more simply, I have created a [public board](https://trello.com/b/7fkft2vf) in trello. Now it is empty, but next days I will be configuring this board and adding very descriptive activities to do. I am sure that this will allow this project to grow, in which I am definitely in need of help. I will be sharing with the community here details about how this public board will work.

If you want to contribute, please join my [Discord](https://discord.gg/hAmBYg).
***
Have happy days ✌



<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@kit.andres/queryjane-development-update">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,