White Board App | Hasura Internship 2017

As in my previous posts, I’ve described about all screens of my app  White Board.  You can check here — App Screen 1 (UI + Backend Integration) If you are familiar with my previous post and app idea then you know what I did before, otherwise just check my app… medium.com App Screen 2 (UI + Backend Integration) Task 5.1 Hasura Internship. Week 5 task medium.com App Screen 3 (UI + Backend Integration) Task 6.1 Hasura Internship Week 6 Task medium.com This one is for user feedback about my app and testing of the app for any bug. When I completed my app with required functionality as I described in MVP in my first blog post at the beginning of my journey. Idea for an APP | First step to internship This article is about my brainstorming for an idea which can be used an MVP. medium.com Testing and fixing bugs is one of the important part in order to build a successful application. Anyhow a person can’t do this all alone, so it is a better way to get feedback from ot...

If you followed my previous posts about my app’s 1st and 2nd screen features, then read this post. Otherwise you can check those here App Screen 1 (UI+Backend Integration) App Screen 2 (UI+Backend Integration) 3rd Screen As I told in my previous posts about first two features of my app  Whiteboard,  in this one, I am going to talk about 3rd screen of the app. The third screen contains info of groups. To open the Groups page Menu Click on Groups Click on the gear icon on top right corner. It will open a menu as shown in the picture. Click on the  Groups  to open groups page. UI of 3rd screen looks like the image below Groups There are two parts of the page, first one in the right side is list of the groups in which user is connected, and on the left side part, information about the selected group is shown. Main feature of this page are Create a new group. Add an user to a group. Creating a new group To cr...

In my previous post I integrated First screen of my app  Whiteboard  with back-end code. Check it out  App Screen 1 UI+Backend Integration . In this post I am going to tell you how I integrated UI of 2nd screen of my app with database and back-end. Group chat As I told in my previous blog that first screen or the main feature of my app is drawing on a canvas and other users may see that in real time. The next main feature is that users be able to share their thoughts and exchange messages through group chat. UI User interface for group chat is same as shown in the picture. It contains only basic features for now. Will add more feature such as  time of the message . As shown in picture, there are two types of chat bubbles. One with the gray background is for group members, as their username is also present in there. The other one with blue background is for you (the logged in user). When the page is loaded or refreshed, all message from the cu...

If you are familiar with my previous post and app idea then you know what I did before, otherwise just check out my  White Board App Idea  a nd also check out the  Prototype for White Board . So after setting all things up such as design & database & API request queries, It was time to elaborate all those in code. So first I did was to write the code for the front-end of each screen and after that it was time to integrate them with back-end and database. App’s first screen Here goes the UI of my app’s main screen which comes after successful login or signup. In here you can that the screen is divided into two parts, one for  group chat and other for  whiteboard . I actually integrated two screens in one because it becomes messsy when you need to switch between these two. Now we can chat as well as draw on the same screen, no switching required. For now, I’ll talk about only whiteboard because the chat is another feature so I...