Repository

https://github.com/singhpratyush/wishqus

1. Introduction

Wishqus is a platform where people can share their wishes and see wishes from others. It has three major display modes -

1. Trending Wishes: Most upwished wishes from previous 3 days.

2. Latest Wishes: Live wishes as they are created on the platform.

3. Wishes by User: All wishes that have been made by a user.

2. Technology Overview

The project is built using React and Firebase. It was bootstrapped with Create React App and uses UIKit for styling components.

2.1. Auth Flow

Wishqus uses Firebase for authorization and supports Google Sign In only. Using the firebase SDK, it becomes quite easy to implement auth flow -

import * as firebase from 'firebase';

firebase.initializeApp({
  // Firebase config goes here
});

let login = () => {
  let provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

This method uses a popup window for authenticating the user. The app reads user's UID, profile image and full display name only and modifies none.

2.2. Format of Firebase Storage

Firebase's Realtime Database is used for storing all the details related to a user. The structure of the database looks something like this -

{
  "suggestions": [
    // An array of suggestions that come up in the wish input area
    ...
  ],
  "users": {
    "<user-id>": {
      "displayName": "<user-full-name>",
      "photoURL": "<url-to-user-photo>",
      "uid": "<user-id>",
      "wishes": {
        "<wish-id>": {
          // Wish object
          ...
        },
        // More wishes by the user
        ...
      }
    },
    // More users
    ...
  },
  "wishes": {
    "<wish-id>": {
      "createdAt": <utc-time>,
      "text": "<text-of-wish>",
      "upwishes": {
        "<user-id>": true,
        // More users
        ...
      },
      "user": {
        // Basic user object
        ...
      }
    },
    // More wishes
    ...
  },
}

This structure allows us to fire many reliable queries from the end user client -

1. Getting Trending Wishes: Trending wishes can be fetched by getting all the wishes from previous three days (using Firebase) and sorting them based on the number of upwishes (on the client side).
2. Getting Latest Wishes: This becomes easy as a key in wishes object tells us about the time when a wish was created.
3. Getting Wishes by a User: This can be retrieved by making firebase query about the user.

2.3 Firebase Database Rules

Having proper database rules is very important for a Firebase project as it protects unauthorized/invalid modification of data. The rule used for the project looks something like this -

{
  "rules": {
    "users": {
      "$uid": {
        ".write": "$uid === auth.uid",  // Only I can write on my user profile
        ".read": true,
        "wishes": {
          "$wishId": {
            "upwishes": {
                "$upwishUid": {
                  ".read": true,
                  ".write": "$upwishUid === auth.uid",  // Only upwish if authorized user is upwishing
                },
              ".indexOn": ["createdAt"],  // For faster time based queries
              }
          }
        }
      }
    },
    "wishes": {
      ".read": true,
      ".write": "auth.uid !== null",  // Only authorized users can create wishes
      ".indexOn": ["createdAt"],  // Faster time based queries
    },
    "suggestions": {  // All can read but no one can write except from admin panel
      ".read": true,
      ".write": false,
    }
  }
}

2.4 Firebase + Redux

Using Firebase with redux makes development much simple. We can simply listen to the firebase database using the SDK and update the redux store when needed. The updated store will seemlessly render the components that need rerendering, making the experience much fast for the user. Here is an example from the project which shows working of Firebase ref with redux actions -

import React from 'react';

class WishList extends React.Component {
    constructor(props) {
        super(props);
        this.startWishUpdate();
    }

    startWishUpdate() {
        this.databaseRef && this.databaseRef.off();
        this.databaseRef = this.props.getDatabaseRef();
        this.databaseRef.on('value', snapshot => {
            // Call action to update redux state
            this.props.wishActions.setWishes(this.props.category, snapshot.val());
        });
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.cetegory !== nextProps.category) { 
            // Need to show wish for new category now
            this.startWishUpdate();
        }
    }

    componentWillUnmount() {
        // Stop listening to ref
        this.databaseRef.off();
    }
    ...
}

3. Screenshots

Trending Wishes

User Profile

4. Roadmap and Future Plans

In future, I am planning to add the following features -

1. Donation system: For now, I am looking for direct PayPal links in a wish, but I came across various projects regarding online donations and they look promising. This is one of the main motivation point of the project for me as it may open new possibilities for many people.
2. Hashtags: For a more immersive experience, hashtags are important. This would help other find/target a specific set of people and look for their interests on the platform.
3. Replies to Wishes: This feature would increase user engagement on the platform and come up with a more relevant feedback mechanism.
4. Rewish: A user would be able to add other's wishes in their list.
5. Twitter Integration: A user would be able to make wishes directly from Twitter by mentioning our account. Users would also be able to post wishes directly on Twitter as they create them.
6. Follow: A user would be able to follow other users, hence enabling them to look at what their friends are wishing for.
7. Weekly Email Updates: Most of the time, people do not have enough time to go to a new platform and see what others are up to, they already have Facebook, Twitter, YouTube, and whatnot. Having a weekly email which would keep them engaged would help them stay up to date.
8. IDK, You tell me: This is an open source project and I request you the community to give their input on how they want the product to look like. So if you have any idea, please open an issue and let's discuss things over there.

5. Contributing to the Project

Contributing to the project is quite simple. If you see something that you would like to fix or if there is a new feature you would like to add, open an issue through Github issue tracker for the project (if it doesn't exist already) and create a Pull Request if you would like to send a patch.

I am currently looking for a helping hand that could help me write some test cases for the project. Nobody loves writing tests but if you are interested, let's talk.

Github Account

https://github.com/singhpratyush