Forem: Jiayi

Goodeed - DO Hackathon Submission

Jiayi — Fri, 08 Jan 2021 12:48:50 +0000

🤝 Goodeed

A neighbourhood/community platform that allows people to connect, make friends around you and post on what they want to borrow such as tools, games, books or anything that they would want to use probably once.

📋 Category Submission:

Program for the People

📎 App Link

https://goodeed-app-ugrpa.ondigitalocean.app/

📸 Screenshots

✏️ Description

Features for this app includes:

Post on what you would like to borrow and they'd show up for people who are close to you
Private message users
Comment on posts
Keep tab of what's borrowed

👩🏻‍💻 Link to source code

https://github.com/annacjy/goodeed-app

🔒 Permissive License

MIT License

https://github.com/annacjy/goodeed-app/blob/main/LICENSE

😎 Background

The idea came about recently when I wanted to do a DIY project and needed a tool or I wanted to play a PS4 game but I only want to only play it once and wouldn't mind if it's a loan. Those were the times I wish I could have one of these apps.

One of the main features is that the posts shown would be sorted close to you. Real time private messaging is also another important feature although people can comment on posts, perhaps the users wouldn't want to write something for the public to see such as time and place of where to meet etc.

💪 How I built it

I took an opportunity participating in this hackathon to learn an entirely new tech stack and it was definitely worth it. I've been wanting to learn GraphQL for quite some time now so this was a great chance to get my hands dirty.

Deploying to DigitalOcean App Platform has never been easier. DevOps is something that's still rather intimidating to me but this sort of lifts all of the complication and time off a deployment process which is a HUGE plus for me. The instructions are also very clear and the CI/CD integration with Github repository works great. I really am a fan of the 1-click deployment which just makes deployment process as simple as it should be.

👀 Additional Resources/Info

Tech

Apollo
GraphQL
Next.js (React)
SASS
Socket.io

DB/Cloud storage

MongoDB Atlas
Cloudinary

Infinite scrolling with GraphQL and Apollo

Jiayi — Tue, 05 Jan 2021 17:44:20 +0000

By participating in this hackathon, I've technically learned how to build API in a totally different way than what I've used to which is REST API. I'm discovering Apollo methods such as fetchMore which I think it's super cool!

So, one of the features I had in mind for the Goodeed app is infinite scrolling. Eventhough I don't have a lot of dumb data, I'd still love for this to be a new-thing-I've-learned.

In the midst of investigating on how to implement this, I found Apollo's fetchMore which suits my requirement perfectly, but not quite...

To jump start this project as quickly and as "cheap" as I can, I've decided to use MongoDB Atlas as the database so I don't have to worry much about DB and concentrate on the rest. One of the requirements for the app is to always sort the posts by the location of the user first (closest to farthest), then by recent date.

Since I've chosen to use the free tier cluster, there are some MongoDB methods that are not permitted such as aggregate or mapReduce which is what I would use IDEALLY. But oh well, I guess I'd have to use Javascript methods which is quicker and easier but not as performant and it looks like a dirty workaround 😅.

Okay so let's get started. First, I have a gql query of GET_POSTS and I'm using Apollo's useQuery to get posts when the page is mounted.

  const GET_POSTS = gql`
    query GetPosts($offset: Int) {
      posts(offset: $offset) {
        content {
          ...
        }
        hasMore
      }
    }
  `;

    const { loading, error, fetchMore } = useQuery(GET_POSTS, {
    onCompleted: data => {
      const { content, hasMore } = data.posts;
      setPosts(content);
      setHasMorePosts(hasMore);
    },
  });

Notice the fetchMore in the useQuery destructured properties? This is a function/method given by Apollo to basically re-use the GraphQL query but you're free to pass the variables.

What I want is that when the user scrolls down and reaches the bottom of the page, I want to fetch more posts. So here's where the offset comes in. I have an onScroll event that I've attached to the div containing the posts like so

<div onScroll={onScroll}>...</div>

and here's the code for the implementation

  const onScroll = e => {
    // if div is at the bottom, fetch more posts
    if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
      // if there are no more posts to fetch, don't do anything
      if (!hasMorePosts) return;

      setTimeout(() => {
        setIsFetchMoreLoading(true);
        fetchMorePosts();
      }, 300);

      return;
    }
  };

  const fetchMorePosts = async () => {
    setOffset(prev => prev + 1);

    const fetchedMore = await fetchMore({
      variables: { offset: offset + 1 },
    });

    const { content, hasMore } = fetchedMore.data.posts;
    setPosts(previousPosts => [...previousPosts, ...content]);
    setHasMorePosts(hasMore);
    setIsFetchMoreLoading(false);
  };

Alright, it seems pretty straightforward. The onScroll event will listen for scroll events and if the user is at the bottom of the page, I want to fetch more posts. However, if there's no more posts to fetch, I just want to return and do nothing.

In the fetchMorePosts function, I'm calling Apollo's fetchMore with new offset variable. I'll show what's happening in the resolver now.

const resolvers = {
  Query: {
    posts: async (_parent, { offset }, { db, loggedUser }, _info) => {
      if (!loggedUser) throw new AuthenticationError('you must be logged in');

      const { location } = await db.collection('users').findOne({ username: loggedUser.username });

      let posts;

      const allPosts = await db
        .collection('posts')
        .find()
        .toArray();

      const sortedByDate = allPosts.reverse();

      // mongodb mapReduce not supported for free tier cluster :(
      // Workaround -> handle sort using JS methods

      if (location) {
        const compareDistance = (postLat, postLng) => calcDistance(postLat, postLng, location.lat, location.lng);
        // sort by distance (closest -> farthest)
        posts = sortedByDate.sort(
          (a, b) => compareDistance(a.location.lat, a.location.lng) - compareDistance(b.location.lat, b.location.lng)
        );
      } else {
        posts = sortedByDate;
      }

      // sort by offset

      if (offset) {
        // if offset is not null (not the initial fetch)
        const newOffsetValue = offset * FETCH_LIMIT;
        const payload = posts.slice(newOffsetValue, FETCH_LIMIT + newOffsetValue);

        return { content: payload, hasMore: !!payload.length };
      } else {
        const payload = posts.slice(0, FETCH_LIMIT);

        return { content: payload, hasMore: !!payload.length };
      }
    }
  }
}

The offset is from where do I want to start and limit is how many do I want. So, on the initial fetch where offset is undefined (which falls in the if(offset) else block), I want to give them the posts from 0 - LIMIT (let's say 5). And the next query from fetchMore will give us the offset of 1, and now we will slice the array by (5,10).

I'm also returning hasMore in the response as I wanted to handle the fetch more loading state on the frontend side.

I've learned a lot and will be doing so even more. It's also been a while since I've coded in React so... fair game. There's definitely a more efficient way of sorting the DB on the server and handling UI on the client (I chose to use react state instead of Apollo's inMemoryCache). Perhaps with more time and resources, these things can be improved :)

Until then, happy hacking! 🚀

Private chat using Socket.io

Jiayi — Mon, 04 Jan 2021 16:23:03 +0000

Hey guys! I haven't been updating the series here but I have made quite a lot of progress on the Goodeed app. One of the features of this app includes a private chat and what better technology to use for real time communication than Socket.io.

The idea is that if the user wants to know more about the item they want to borrow or they're not comfortable leaving those details such as where and when to meet in the comments, they can choose to message the other privately. So, basically it is a 1-to-1 chat.

There are a few ways to go about creating socket connections and to make a private messaging feature work but after a few attempts, I've decided to do the Rooms route in which a chat will be held in a room where there can only be a maximum of 2 participants. Check out more about Socket.io rooms here.

Socket.io requires both server and client integration to work. The flow would be to create socket instance on the server and upon connection, the socket will have access to events to either listen or receive them. The client does pretty much the same thing, only that the client will connect to the server's port.


const { Server } = require('socket.io');

const io = new Server(res.socket.server);

io.on('connection', socket => {
  console.log(socket.id + ' ==== connected');

  // creating a room name that's unique using both user's unique username

  socket.on('join', roomName => {
  let split = roomName.split('--with--'); // ['username2', 'username1']

  let unique = [...new Set(split)].sort((a, b) => (a < b ? -1 : 1)); // ['username1', 'username2']

  let updatedRoomName = `${unique[0]}--with--${unique[1]}`; // 'username1--with--username2'

   Array.from(socket.rooms)
        .filter(it => it !== socket.id)
        .forEach(id => {
          socket.leave(id);
          socket.removeAllListeners(`emitMessage`);
        });

   socket.join(updatedRoomName);

   socket.on(`emitMessage`, message => {
      Array.from(socket.rooms)
           .filter(it => it !== socket.id)
           .forEach(id => {
              socket.to(id).emit('onMessage', message);
           });
        });
      });

    socket.on('disconnect', () => {
      console.log(socket.id + ' ==== diconnected');
      socket.removeAllListeners();
     });
   });

So let's walkthrough this a little. I found that a single connection can indeed join multiple rooms which is not what I want. When the user clicks on a chat, we want to emit join from the client side with a string that has both participants' unique usernames like username1--with--username2. This shows that username1 and username2 has to join a unique room. Since there are two clients here, the roomName is sorted in a way that is currentUser--with--whoTheUserWantsToChatWith. So a sort needs to happen so we generate a unique room name that the two participants can join the same one.

Socket.io automatically creates a unique id for a connected client and that id itself is a room. For example, logging socket.rooms when a client (let's take username1) with a socket.id (123123) is connected will give us

Array.from(socket.rooms) // ['123123']

Before joining a private chat room with username2, first we need to make sure there is only 1 room which is the socket.id 123123 (like the example above), and no other rooms. If there are other rooms though, we need to leave that room with socket.leave(roomName) and remove emitMessage listener.

Then we'll join the client

socket.join(roomName)

console.log(Array.from(socket.rooms) // ['123123', 'username1--with--username2'])

Now it's time to emit a message from the server to the client.

socket.on(`emitMessage`, message => {
      Array.from(socket.rooms)
           .filter(it => it !== socket.id)
           .forEach(id => {
              socket.to(id).emit('onMessage', message);
           });
        });
      });

Here I'm listening an emitMessage event and a message parameter that client sent over. Now I only want to send the message IN the only room that client is in but not its own socket.id. Once a filter is done, there I am pointing to the unique room and emit an onMessage event that the client is listening with the message.

Also, not forgetting to disconnect the socket and removing all listeners once the socket is no longer in use.

On the client side, we're gonna set up event listeners that match the server's. In order to join a room, we would do something like this

// user: username2, anotherUser: username1
socket.emit('join', `${user}--with--${anotherUser}`);

To send a message to the server, the client will need to emit emitMessage event with the message.

// send message
 socket.emit(`emitMessage`, "Hello world!");

To receive message from the server that's being emitted from onMessage event:

// receive message
socket.on('onMessage', msg => {
console.log(msg) // "Hello world!"
      });

Have fun coding :)

JWT Authentication with Apollo

Jiayi — Tue, 22 Dec 2020 15:23:51 +0000

One of the features for this app is to have an authentication system without using OAuth. This implementation would be slightly new to me as I've never used GraphQL API.

The authentication flow is the same as how one would use in a REST API.

Server (backend) will create the routes or mutations as they call it in GraphQL to perform authentication logic.
The client will call the mutations, passing the necessary parameters such as username and password to the server.
The server would handle the logic via jsonwebtoken to sign or verify the user and of course encrypt the password to store in the database.
After a successful signature, server will return a valid token and client will store it.

I have a few routes that I want to protect and they must be logged in as the app's user to be able to make those requests. This is how I made it work.

// pages/api/graphql/index.js
import { ApolloServer } from 'apollo-server-micro';
import { makeExecutableSchema } from 'graphql-tools';
import resolvers from './resolvers';
import typeDefs from './TypeDef';
import jwt from 'jsonwebtoken';

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

let db;

const apolloServer = new ApolloServer({
  schema,
  context: async ({ req, res }) => {
    // AUTHORIZATION
    let loggedUser;

    const token = req.headers.cookie ? req.headers.cookie.split('token=')[1] : '';

    if (token) {
      const user = jwt.verify(token, process.env.JWT_SECRET_KEY);

      if (!user) throw new AuthenticationError('You must be logged in');

      loggedUser = user;
    }

    // DATABASE
    if (!db) {
      // connect to db
    }

    return { db, loggedUser };
  },
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default apolloServer.createHandler({ path: '/api/graphql' });

In the apollo server entry point, I'm making use of the context object to achieve this. There I'm verifying the token via jsonwebtoken. If there is a user signed with that token, I'm setting the loggedUser as the user that's verified and returning it in the context object. Now I have access to loggedUser in the resolvers as well.

// pages/api/graphql/resolvers.js

const resolvers = {
Query: {
    posts: async (_parent, _args, { db, loggedUser }, _info) => {
      if (!loggedUser) throw new AuthenticationError('you must be logged in');

      return await db
        .collection('posts')
        .find()
        .toArray();
    },
  }
}

I want to protect this posts query from not-logged-users so I'm simply putting a check before returning desired response. The client can now handle it however they want with that error :)

So far, this is working rather nicely 😂. I'll continue posting on the development process in the next posts. Happy hacking!

DO Hackathon app idea

Jiayi — Sun, 20 Dec 2020 12:32:55 +0000

For this Hackathon (which is my first ever hackathon btw 😅), I'm planning to build an app where people can post on what they want or need to borrow, of course with the intention to return to owner and it's going to be called Goodeed.

Why? 🤔

The idea actually sparked when I needed a specific tool recently for a DIY project but I don't want to buy one just for one use. I wish there was an app where the users who are close to you could lend you the tool. So as you've read, yes it is a "Program for the people" app.

Features ✌️

There are a few main features I have in mind for this app:

The app will have an authentication system (users must login to see the posts)
The posts will be sorted by distance from your location. It just makes sense.
Users will have the ability to create posts, comment on them, private message the users for further information on the "transaction", and manage what was borrowed.

Tech stack 🚀

The stack that I have planned for this app will mainly be Next.js, GraphQL, and Apollo. I picked Next.js because of the possibilities of API routes for the backend and it generally reduces the complexity of setting up the server. GraphQL API is something that I have been wanting to learn for a LOOOOONG time now and this is the best opportunity to do it! Socket.io will also be used for the private messaging feature in the app.

The next posts will involve more code (I promise 😉)

Now... onto coding! Have a great hackathon everyone!