When I want to arrange a party or just hangout with a few friends, there's one thing annoy me all the time. People live in different place, someone in south area, while the others from north part. So the best location will be somewhere close to every body. Another thing is you always need to create a new group in whatsapp or some other tool, and you have to make sure they have that chat app. Or you can just use message and send back and force to make sure everyone good on the time and place.
Why not we build a tool that can runs everywhere, can use as simple as possible and can solve our location issue?!
What it does
talkover.party is a web app when people have plan to hangout, but have no idea about where (even what) to go. They can have real-time chat, real-time location, and recommendation from yelp.
Let's see some scenarios:
- Jack wants to know if there is any sports bar near him, so he can use the function [Aroud Me]
- Chris and Anne wants to go for some Italian food after work. But they don't know where to go and they don't want to go far away from their place. So they can use [Between Us] after sharing link from [Chat With Friends]. Then they will only get Italian food in a circle area between them.
- Bob wants to hangout with Mike and Julian, they live in different places and have no idea if there's any good buffet between their places. First, Bob can use [Chat With Friends], then he will get a link and share it with Mike and Julian. When Mike and Julian open the link, they can see each other on the map and chat with each other in a private room. Anyone of them can use [Between Us] to find buffet which just in their area (user will see a polygon area which depends on their locations and numbers). At the same time, they can use [Between Us] to check if there's any buffet near one of their place.
How I built it
express.js - framework Socket.io - real-time function like chat, location yelp api - yelp place and data google map - map function
I built the app separately. At first, I built a public chat room by using socket.io. Then I implemented some drawing function on google map. And after that, I used yelp api to get data and integrated with google map. Then I tried to built them together and made them private by room. In addition, front-end and responsive part cost me a lot of time. But finally I got a UI looks okay.
Challenges I ran into
- To build a simple flow for user, I don't have user system (register, login, logout). And the problem it caused is how can I identify user and their status. Then I use cookie and socket id to solve this issue.
- What if the user close the page and return before cookie expire?! Because user may have tons of way to open/reopen the link, so I need to make sure every entrance works fine and can recognize user. Then I need to update their socket info.
- Security issue. People gonna chat in the app, how to make sure the security of their chat messages. I don't store them in my mongoDB, I just save user's socket id for routing message.
- Make the web app responsive, which enable user use the app on Mac, Windows, IOS, Android, wherever there's a modern browser (exclude IE :) ).
Accomplishments that I'm proud of
- I build the application by myself which feels really good (especially when I fix the responsive part)
- I learned many new stuff in short time and integrated them together
- My friends use it to find bar for their weekends
What I learned
- I learned the MEAN stack without A...
- I got deep understanding of cookie, socket, session
- I learned query in mongoDB
- I learned socket.io which can build real-time stuff easily
What's next for Talk Over Party
A lot, I have tons of plan and TODO list for this app.
- Add Angular.js to make front-end smart and pretty
- Add Redis to implement cache for better performance
- Important Combine yelp data and map data (maybe some other data) together to generate a new score for each yelp place
- Give user route when they decide which place to go
- Add event plan function
- Build app in IOS/Android