DEV Community

Cover image for I built an open source app where you make friends by helping them
Sowmen Rahman
Sowmen Rahman

Posted on • Updated on

I built an open source app where you make friends by helping them

Through this post, I shall be introducing you to the making of and showcasing my open source app HelpingHand and also talk about the brief journey of the HarperDB2021 hackathon from my perspective.

WebApp link: https://helpinghand.sowmenrahman.tech

THE IDEA

HelpingHand is an open source app that was built to serve exactly one purpose:
To help people who are in need of it. Every app user signs up on the app platform and then can find themselves open to helping people from various posts that the people have earlier made. This person can then reach out to these people if they feel that the post describes a problem that he/she/they can solve.

But there's a catch, if you're reaching out to a person you've never interacted before, both of your identities are kept secret, unless the post shares finds you useful and decides to make you his/her/their friend. In this way, nobody can know much about the person they are helping, unless both sides cooperate together.

When a user decides to make another user their friend, they can then view their posts either help seeking posts or social posts and chat with them on the context of the post. This is basicall what HelpingHand is. You can think of HelpingHand as a cut down version of StackOverflow, but users are anonymous until both users are ready.

WHY THIS IDEA?

Ever since I was a child, I have always wanted to help people. So I guess the idea for this project naturally sprung from the urge of wanting to help people, no matter how small the contribution might be. The idea might not be that much of a good one, but I really wanted to participate in a hackathon, and this was a golden opportunity for me to showcase my skills.

TECHNOLOGIES

  1. Frontend - React.js
  2. Backend - HarperDB integrated REST API
  3. Hosting - Vercel
  4. Version Control - GitHub

HRN STACK?

If you're confused after reading the title of this post, don't question yourself because it seems like that at first. HRN would stand for HarperDB, React and Node.js.
Now I'm pretty certain everyone's looking for the 'E' in the stack, but there isn't one.

Let me give you a little backstory to why I skipped the server for this hackathon. Although this hackathon ran for a decent 30 days, I built this app on just over 7 days starting on 24th June. As I had too much academic stress from my university, I realized building both the backend and the frontend won't cut it before the deadline. Fortunately enough, HarperDB came to the rescue.

Using it's awesome SQL/NoSQL integrated REST API, I was able to build the backend without needing an Express or HAPI server like I'd generally need. Don't get me wrong, this really isn't the best way of doing this, but it was the only way if I wanted to finish on time, considering the features I had planned.

PROJECT FEATURES

Authentication

Users signup as direct database users and communicate directly without the meddling of any server in between. However, this also means that people will have to create usernames that abide with the authentication rules provided by HarperDB, and it also makes the process of making batch read and writes more difficult as everything is done on the client-end. It's not ideal, I know.

Login page

Login page

Signup page

Signup page

Post sharing

Users are able to write posts and ask for help on the app. People can respond to these posts if they want to help them solve the problem. Posts can be of help type and social type. Only people you're friends with can see the social posts.

Post share

Searching

The top searchbar can be used to search for posts. Users may search targeting tags, title or description for posts.

Post search

Messaging

The core of the app relies on the ability to chat with people and communicate solutions for a certain type of problem. Users are able to chat with each other accordingly, but identities are kept hidden until one is satisfied with the help he/she is getting from the other person.

User view for public posts

User public post view

Before a user messages a person for help response

Before user sends message to post

After a user messages a person who needs help

After user sends message to post
After this, the help seeker can decide to reply or not as he wishes.

Notifications

The app also has minor notification support for when someone adds you as a friend or sends you a message. Currently, the notification system is not based on a websocket or external webhook server, and only updates on page refreshes, but these are all problems that can be mitigated with time, more on that on the roadmap talk that follows!

Notifications

Mobile-friendly and responsive layout

Thanks to some very handy breakpoint hooks and responsive layout binding, I was able to make this website fully mobile responsive.

PROJECT ROADMAP

As you may have realized, the project is far from completion (the fact that it's somehow working with only a week of work is amazing to me, all thanks to HarperDB). I am outlining some of the more important tasks for this project. These are however not arranged in any specific order, but however among all other things, I am seriously considering refactoring as the first priority. The tasks are

  • Refactor code (A LOT)
  • Implement clean architecture (this was a primary target, but got cut short)
  • Enable persistence for rest of the reducers, currently only auth reducer has persistence enabled)
  • Reduce client-side manipulation code, implement backend code for auth, and other GET and POST operations in an Express.js server
  • Implement support for adding custom media to posts
  • Implement websockets and mail support(depends on the server implementation)
  • PWA (progressive web-app)

CONTRIBUTION

I invite the community to collaborate on this open-source project, as I'll not be discarding the project after the hackathon. I shall be making changes to the UI and building the server as soon as I am able.

CHALLENGES

Working with HarperDB was a very unique experience as I could manipulate the database using both SQL and NoSQL languages. The main challenge I had faced was really the time constraint compared to the project's goal weightage since I started very late. One other thing I noticed about HarperDB was that it'd not let me run nested SQL queries, it always ended up with some error I couldn't solve. However, I managed to find alternatives anyhow. Working on this project made me realize my strengths and weakness specially considering database modelling and querying.

LINKS

Top comments (10)

Collapse
 
juanmiguelruadev profile image
Juan Miguel Rúa

Hello, Very interesting project!

I have been working as DevOps Engineer the last three years, but I have been working as Software Architect the previous eight years. Node.js (Next.js, React js), Python (Django, flask), and Java are my background programming language.

Please, take a look at my web juanmiguelrua.com and message me!.

Collapse
 
sowmenappd profile image
Sowmen Rahman

Hi there, this is an open source project. I’m not really sure in what context you want me to contact you 😅

Collapse
 
juanmiguelruadev profile image
Juan Miguel Rúa

jeje.. I am sorry. I though you were looking for collaborators from different fields (not only developers) to improve the architecture, architecture improvements to allow scalability and elasticity, etc..

Thread Thread
 
sowmenappd profile image
Sowmen Rahman • Edited

You're welcome to help with collaboration in any aspect that you like. Open source contribution from any dimension is allowed! If you want to talk about it, you can mail me.

Collapse
 
cb1o1 profile image
Cb1o1

I'm not really a developer and I haven't coded much since college (~15 years ago). I just follow and use lots of FOSS projects. I signed up here just to tell you that I'm extremely proud of you for making this. I'll spread the word as much as I can.

Collapse
 
sowmenappd profile image
Sowmen Rahman

Thank you so much, you’ve no idea how thrilled and motivated I felt after I read your comment!

Collapse
 
vineyrawat profile image
Viney Rawat

This is really cool 😊

Collapse
 
sowmenappd profile image
Sowmen Rahman

Thank you @vineyrawat !

Collapse
 
elwiss profile image
Oussama Maatallah

Do you need any Flutter dev?

Collapse
 
sowmenappd profile image
Sowmen Rahman

Hi there, this is an open source project. The project is react based. If you feel you can contribute, specially in the UX/UI side of things or even in the backend, feel free to email me