A-in-depth look at my Confession app
Tags: react, firebase, redux, javascript
Published: 2021-11-23 14:49:45

**Finished Product Link** -https://conphession.netlify.app/
**Source Code** - https://bit.ly/3xjyYJ9

To contribute join our [SLACK Workspace](https://join.slack.com/t/confessions-talk/shared_invite/zt-y5rcmvd1-LuE8~NligOm1WKELGlNlKQ)

## What is Confession App?
**Confession** is a fully functional social media cum dating app which we developed for our fellow college mates so that they can post whatever they want to confess. They can confess publicly, privately and anonymously. Earlier our college mates were using an [Instagram page](https://www.instagram.com/svvv_secrets_and_confessions/) to do the same, which we believe is a less democratic way as its up to the admin of the page to selectively post the confessions. This triggered us to create an app which does the same in a more democratic fashion and with better minimalistic UI and even more features like chat app, therapy room, toxic comment detector etc.

## Objectives
We intend to achieve the following objectives by developing this app -
1. Create an online dating cum social media platform that replaces the existing dependence on an Instagram page.
2. Provide a safe place for our college mates to post confessions where they can confess publicly, privately, and anonymously in a more democratic way.

## Intended Audiences
Though we created this app for our college mates but its for anyone who -
1. wants to confess to their college crush.
2. wants a democratic platform to share his/her opinion publicly or anonymously.
3. wants a safe place for confessing privately while keeping their details confidential.
4. wants a platform where they can chat with their mates

## Features and Functionalities
1. **Realtime Update**
    1. This feature is made possible by technologies like React and Firebase Real-time Database.
    2. Any changes made to the database will be reflected real-time on the web page.

2. **Anonymous Confession**
    1. One doesn't need to authenticate to confess anonymously. If someone wish to confess anonymously, we have created a separate account for that. So when someone confess anonymously, it gets posted under the name of that account and not under name of user's account. So we have no way to know who have posted that confession.
    b. There is also a downside to confessing anonymously, user can't update and delete their anonymous confession. For now we decided to keep it that way.

3. **Authentication**
    1. Although you can anonymously confess on our platform, but in order to publicly confess and access some features one needs to authenticate. 
    2. Confession provides you two ways to authenticate - google authentication and email authentication
    3. Even after authentication, one can easily confess anonymously.
    4. To make the authentication possible we have used Firebase Authentication.
    
4. **User Profile and Profile Engagement**
    1. When user authenticate, a profile gets created with their chosen username.
    2. One can share their profile and also other's profile on other social media platforms.
    3. One can make changes to his/her profile, they can change their username, avatar etc
    4. One can also follow and unfollow other's profile. They follow their profile by default. So every user have at least one follower and following by default.

5. **Confessions CRUD**
    1. Once authenticated user can create, read, update and delete their confessions publicly. Though that's not the case with anonymous confessions.
    2. Users can also confess privately in the therapy room. This feature is under development though. Nobody will be able to see the private confessions except for the website admin and the user and the admin will make sure to keep those confessions confidential.

6. **Confessions Engagement**
    1. One can like and unlike the confession.
    2. One can share the confession.
    3. One can comment on the confession.
    4. One can report the confession. (*Under development*)

7. **Comment CRUD**
    1. Once authenticated users can comment on each other's confessions.
    2. User can perform CRUD operation on their own confessions.

8. **Nested Comments** (*Under Development*)
    1. Once authenticated user can comment on each others comment.
    2. We are keeping the comment reply thread to one level only for now.

9. **Responsive and Masonry UI**
    1. The web app is completely responsive. The UI is compatible with all the device. To make the website responsive we used Bootstrap with React.
    2. All the confessions are arranged in masonry fashion. For masonry look we have used an NPM package, react-masonry-css to do the job.

10. **Infinite Scroll** *(Under Development*)
    1. One should be able to see 30 confessions at a time in masonry pattern.
    2. Instead of doing it paginated way, we are using infinite scroll.

11. **Toxic confession and comment detector** (*Under Development*)
    1. Another problem we are anticipating with Confession App is **Content Moderation.**
    2. Instead of using man-power for moderating the content, we are planning to deploy an ML Algorithm to filter the toxic confessions and comments and hide them.

12. **Integrated Chat App**
    1. Confession also has an integrated chat app.
    2. For this purpose we are using an **React Chat Engine API.**

13. **Integrated Therapy Room for private confessions** (*Under Development*)
    1. One can confess privately to the site admin in the therapy room.
    2. The private confessions will be kept confidential at all times.
    3. Private confessions can also be posted anonymously.

## Limitations
1. **Update and Delete Problem with Anonymous Confessions**
    
    As I mentioned, Anonymous Confession doesn't goes under any user's account, it goes under a anonymous user's account which I have created for this purpose. So we have no way of knowing who created that anonymous confession. Since a user can only delete their own confessions and not others, therefore there is no way of updating and deleting anonymous' confessions.
    
    Though we can make changes to Database schema and associate that anonymous confession to the user's account, but then the site admin would know who created the confession which contradicts what anonymous confession stands for. So we decided to keep it that way.
    
2. **Content Moderation**
    
    An advantage that [that Instagram Page](https://www.instagram.com/svvv_secrets_and_confessions/) has over our app is content moderation. All the confessions goes through the page admin, and the admin choose which confessions to post and which not. Though that's not the most democratic way of posting confessions, but they have advantage of filtering the abusive and toxic once, which we don't have.
    
    To tackle this issue, we are creating a TOXIC confessions and comment detector. We are letting the algorithm decide which confessions to keep and which to hide. But there's another catch here, since we don't have enough data of the confessions now, we can't exactly train the model on our data, we have to rely on data from some other source, hence the model will be prepared accordingly.
    
3. **3rd party dependency for Chat App**
    
    As we mentioned, Confessions App has an integrated chat app for which we are using React Chat Engine. One limitations it poses to us, that it deletes the chats in a few days, therefore the users won't be able to see their chats after few days.
    
    To overcome this issue we are planning to create a custom chat app from scratch.
    
4. **SEO (Search Engine Optimizations)**
    
    We are using React library to build the user interface and it's not good with pre-rendering the page, hence our app suffers with SEO because search engines and web crawlers won't be able to see the content of the page as its not pre-rendered on server.
    
    To overcome this issue, we are planning to change the entire codebase of our project from React.js to Next.js, which is a react based framework and is good at Server Side Rendering and hence SEO.