App Links:
Authors:
- Huanyu Daniel Li github link
- Lei Huawen github link
- Brendan Tuckerman github link
A project as part of the General Assembly Software Intensive
Overview:
Blandbook is a social media platofrm that pulls together many of the features of sites like Facebook, Instagram, and Reddit. It allows users to set up an account, log in and see posts made by themsleves and other members of the platform. You can try out Blandbook with user account brendan@gmail.com, daniel@gmail.com or lei@gmail.com with password chicken.
Features:
Tech Stack:
Front-end: React, CSS
Back-End: Ruby on Rails, PostgreSQL, ActiveRecord
Thanks to Jennifer Ingram for this tutorial which was a huge help.
This part of the README aims to explain the chat function, which uses Rails' ActionCable --which replaces HTTP requests with WebSocket intergration
Gems:
- 'rack-cors' (to avoid CORS errors )
NPM Packages:
- 'axios' (needed elsewhere, but also used for HTTP requests)
- 'actioncable' (to form the connection with ActionCable in the back end)
We added the following route in our Rails routes file, which created a URL which we could use to form the connection between front and back-end:
Because we are not using HTTP requests, we instead need to create a channenl (app-->channels-->chatroom_channel). This channel allows the front-end (known as a consumer) to subscribe to channels in the back end. This allows us to transmit the infomration in as many of our chatrooms as needed. In the example below, we see that the channel controller uses stream_for and broadcast_to within the ActionCable class.
NPM Packages:
- React-bootstrap
- Action-cable-react
- Axios
- React-draft-wysiwyg
- Draft-js
- Draftjs-to-html
- React-router-dom
- Google-map-react
- Gh-pages
User can login with their exsiting account or sign up a new account with their email. User can change to sign in form and back to log in form, after signing up user will automatically log in and enter into their account. You can try out Blandbook with user account brendan@gmail.com, daniel@gmail.com or lei@gmail.com with password chicken
It uses React-bootstrap Button to style.
On the DashBorad page, user can see all users location in the Google map section.
If user click the avatar on map, they will get the basic information of users beside the map.
A bounding box is added to show all the users location when updated the website or add a new user.
It searches the name of users and the content of posts in one place.
It uses React-bootstrap Modal and ListGroup to style.
The search results are clickable and can jump to specific routes or follow | unfollow other users.
follow and unfollow functions will 'phone' FriendsList component to update list by 'Homepage' component
React-draft-wysiwyg, Draft-js, Draftjs-to-html are used in this website as the text editor. The editor can change the text formatting, add emoji, and upload Image(url). Draftjs-to-html is used to convert raw draftjs data to html data. Then use dangerouslySetInnerHTML={{__html: HTML_CONTENT}} attribute to show the correct formatting.