Try it here! https://caldover-qa-with-realtime-chat.herokuapp.com/home
For further guidance see the "User Guide" section below!
Base QA Board app was developed with PHP and Laravel for a school project
This project extends the QA Board app and features a real-time anonymous chat for all registered users
I saw this as a great opportunity to learn more about JavaScript, React, and GraphQL and these are the exactly technologies being used to develop the chat room!
Originally, Laravel made it simple to include Vue.js scaffolding, but luckily for us Laravel 5.5 included a new preset to make integration of React components into Laravel based apps much easier!
The following commands will change the preset and install the new dependencies:
$ php artisan preset react
$ npm install
If you're interested, you can read more about Laravel Frontend Presets here!
The React component is built and stored in QA-Board-With-Realtime-Chat/resources/js/components
Once the React component is ready, the JavaScript must be compiled using
$ npm run dev
The compiled JavaScript can be found in QA-Board-With-Realtime-Chat/public/js and because we are using Heroku to host our app, we must of course push to Heroku!
Other Notes:
- Files for setting up GraphQL backend can be found in QA-Board-With-Realtime-Chat/resources/js/chat-server
- A App.test.js in QA-Board-With-Realtime-Chat/resources/js/components/app tests to see if the React component renders without crashing
For a bonus learning experience:
- I decided to learn about PostgreSQL and wound up replacing the originally used SQLite database that was used in the original QA Board project.
- I've added some UI changes to the navbar including:
- An updated Logo
- A separate link to the Home page (placed on the left side of the navbar, next to the Logo)
- A link to the Chat Room (placed next to the Home page link)
Fun stuff!
Proceeding this section you'll find the following:
- A Requirements Breakdown which highlights the details of the Epic and User Stories of this project
- A Solutions Breakdown which highlights how each User Story will be implemented in the project
- A User Guide to using the chat feature
| EPIC: | |
|---|---|
| Epic 1: | Anonymous Online Chat Room for all Registered Users |
| USER STORIES RELATED TO EPIC 1: | |
|---|---|
| Story 1: | As a user, I require a simple-to-use UI that can easily be accessed |
| Story 2: | As a user, I must have an anonymous username in the chat room |
| Story 3: | As a user, I must be able to send chat messages to all other users in real-time |
| Story 4: | As a user, I must be able to view chat messages from all other users in real-time |
| Story | SOLUTIONS TO EACH USER STORY: |
|---|---|
| 1 | Simple-to-use UI will be built as a React component and integrated into the Laravel project. The Laravel based frontend code will be updated to include a link to the Chat in the navbar |
| 2 | The state of the React chat component will include a property called "from" which has a value that will be updated to "anon" as a user enters the chat room. This will allow the possibility of a future update that will allow the user to set their own username before entering the chat room |
| 3 | Real-time sending of messages will be made possible with GraphQL mutations in the backend |
| 4 | Real-time viewing of messages will be made possible with GraphQL queries and substriptions in the backend |
- In order to access the QA Board and chat room, please login or register. The right side of the navigation bar will provide links to the Login and Register page.
- From the home page, click the link labelled as "Chat". The Chat link can be found on the left side of the navigation bar.
- Type a message in the message box and press enter to send your message
- Message history can be viewed in the large center portion of the UI. The oldest message appears at the top of the chat history.
Tip: To truly witness the real-time aspect of the application, try opening two browser windows side to side and send messages through each!