mnowi

[mnowi]

Last Post

This is my last post, as this is my last week before the deadline and there is still quite a lot of work to be done. I’m focusing on finishing up the dissertation.

[mnowi]

Diagrams, design, testing

This week I’ve made diagrams, conducted testing and finished up writing design section of the report.

[mnowi]

Report

This week I’ve finished Market research  for that section, managed to add quite a lot of material in the implementation section. I have also conducted an online survey which was posted on my private social media accounts. I also showed the app to some of my friends and family(my partners family to be more exact, as my family lives in Poland) and I was suprised with the responses I got. The feedback was very positive and I’m quite excited :)

[mnowi]

Dissertation

This week I started writing the dissertation. Now when the code is finished, I managed to plan next steps for writing the report. I have already started my Market research and Impementation section, as it will be quite long.

[mnowi]

Cleaning the code

This week I’ve been adding comments to the code and cleaning code for unused variables etc. There were a lot of files that needed to be rearranged, after that some errors occurred and it took a while but I managed to solve them. 

[mnowi]

Exploring new profiles

 I have added a functionality where users can display a list of all users. Then, users can click on an icon “add to contacts” and this will save the new users avatar, username and uid. This is how the list of contacts looks like.

[mnowi]

Basket

This week a basket functionality has been added. Before, there was a basket icon that didn’t work.

After insightful research i managed to add this functionality.

The Proceed to checkout button does’nt do anything at the moment. 

[mnowi]

New CSS added

This week I have made my application more appealing.  

Posts:

Profile:

Search user : 

[mnowi]

Adding to Saved Posts

More functionality which is connected to the previous post has been added. Now if the user likes or dislikes a post, the post is saved into a list of posts. The link directs to a page which renders Post component.  Here is a list

From the list page, users can go to the post page and  remove the post. The post is displayed in an exactly same way as in Posts page. Although a change needs to be done - add a new field to the Post document - “uid” , in this way users can be redirected to the post as the pathname is using the uid.

[mnowi]

Liking Posts/ Unliking

This week I have implemented liking and unliking functionality which is automatically dispalyed after a user clicks on the icon. The user can only once like an image (can unlike and then like it again). This prevent users from liking posts more than one time. New icons under each posts:

[mnowi]

Private Chats

This week I’ve been researching how to implement private chat functionality. I have found Rizwan Khan’s implementation which I have then studied. I managed to alter it and use in my application. 

[mnowi]

Forum

The forum has been the most challenging part so far, I managed to implement features such as:

- add a new forum (takes a photo and a title as input),

- chat within each forum (each chat is a separate page with messages).

- messages written by the currently logged in user are displayed on right side with their avatar, the rest of the messages by other people displayed on the left side. The messages are accessible by other profiles.

Here is a snipped from the database:

 Here are some snippets of how it looks at the moment.

Create a Forum is a button, when the user has clicked it, a modal appears as follows:

Here is how inside of one of the forums looks like:

[mnowi]

More Social Media Functionalities

As I’ve mention in the last post, I will demonstrate some more functionalities such as: Search for Users and Explore Profiles. Search for Users page displays a modal, where the user can enter a username of a user to be searched for.

The user searches for “marta”. The profile information is displayed as well as 2 buttons: one showing posts of the user, the other one showing products of that user

The user clicks on Show Posts button:

--------------------------------------------------------

As shown below, all posts made by the searched user are now displayed.

User clicks on Show Products button:

-------------------------------------------

In the snippet below you can see 2 more icons I’m working on at the moment - add to favourites and remove from favourites. At this point, user can comment, see other comments, see recent review and leave a review.

For simplicity and better appearance, I have deleted some users from the database (since I’ve used usernames such us testuser4, testuser3, xxxxxxxx, ec). Here is how the Explore Page looks like. It renders all the users in the database.

[mnowi]

Search

Unfortunately, Cloud Firestore doesn't support native indexing or search for text fields in documents. Firebase suggest using using a third-party search service - Algolia, which enables full text search of the Cloud Firestore data. Algolia is only available for the upgraded (paid) version of Firebase.  I understand that downloading an entire collection to search for fields client-side isn't practical, although that was the only approach available for free. In this post I will show how I implemented a search function.

------------------------------------------- This snippet shows how the products page looks like. In the Header, there is an icon for main page, shop, search icon and basket.

As I don’t currently have many products for sale, the search was immediate and the “product” appeared on the page. The user needs to only click off the modal to close it.

This search only supports a query where the input matches exactly the title. This as well as handling a case where no item is found will be added in the future.

New Header icons:  arrow back going to the main page, shop, social media posts the Earth icon takes to the page with more social media features such as: forums, private chats, searching for users, discovering profiles etc.

Earth icon takes the user to social media features page. I am using Material UI icons, this particular icon seemed to be the most appropriate, as it lets the user to connect with others. Below is a snippet- the Forum and Private Chats are not implemented yet, although I will demonstrate how Search Profiles and Explore Profiles look like in the next post.

[mnowi]

Adding a product for sale

As the application I am currently implementing is a social media marketplace,  users will be able to add private posts as well as products for sale. 

In this post I will show how I’ve implemented features such as: adding a product for sale, rendering all products on one page(products as links), rendering just one product with more information: reviews and comments, as well as an add to basket button.

There is a new collection “products”, where each item is a document and is saved with an unique id:

Inside the document there fields such as: title, description, price, username, timestamp, uid (and avatar not visible in this picture). There are also 2 sub-collections: one for reviews, one for comments.

The snippet below shows what comments sub-collection looks like inside. The fields of a document (one comment) are: avatar, text, timestamp, username.

The snippet shown below shows the review subcollection. The fields are: ratetext(how many stars from 1 to 6)

The snippet below shows how the product looks like on the main products page. The picture and basic information is a link, when clicked, more information is displayed on a single page.

A modal opens when the user clicks on the button “Add a Product for Sale”.

The button <Upload> is disabled until all the information is entered.

When the user clicks <Upload>, the product is added on a snapshot and rendered on the top of the page (all items are displayed in descending chronological order, similarly to posts).

When user clicks on leave a review:

(The css styling will be perfected later).

Recent Reviews (in descending chronological order as well):

Here is how the comment section (displayed just below the product on the page of a single product) looks like at the moment.

[mnowi]

Adding a post

 The image below shows a simple post :

Firstly, on the top of the post an avatar of the user who uploaded the post is displayed, then the username, image, and below username and caption. In this post I will explain how I implemented a single post, a page rendering all posts, how to add a post as well as comment section.

Below the post, the comment section is displayed (avatar and username of the user who added the comment and the comment) as well as an input field for comment. In the footer, an icon button is displayed. After the user has clicked the button, a modal opens, where the user can input the post data.

[mnowi]

Cloud Firestore Data model

As I have already previously shown how to add users to database and update their profiles, I believe it is vital to describe the database model I am using.

Cloud Firestore is a NoSQL, schemaless document-oriented database, where data is stored in documents, which are organized into collections.

Each document contains a set of key-value pairs.

All documents must be stored in collections.

Documents can contain subcollections and nested objects, both of which can include primitive fields like strings or complex objects like lists.

The best way to store messages  is by using subcollections. A subcollection is a collection associated with a specific document.

You can create a subcollection called messages for every room document in your rooms collection:

Documents in subcollections can contain subcollections as well, allowing you to further nest data. You can nest data up to 100 levels deep.

Deleting a document does not delete its subcollections.

------------------------------------

At this point, my application has only one collection called “people”, each document has a unique name - uid. Below is a snippet showing the documents in collection people:

Each user - document has fields such as: uid, username, forename, surname, bio, age, imageUrl(avatar photo).

-----------------------------------------------------

****************UPDATED*******************

Documents in Collection People are being saved as their username (not uid).