This application is a simple magic 8 ball responder, wherein a user types in their question and is given a simple answer. It incorporates all the usual 8-ball responses, but also throws in some random ones that may surprise you. It requires a login, so that it can store the number of times you received a certain response, and lets you know whether someone else has entered the 8-ball website.
For this deliverable I did the following:
I checked the box [x] and added a description for things I completed.
- Proper use of Markdown
- A concise and compelling elevator pitch
- Description of key features
- Description of how you will use each technology
- One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.
Do you feel paralyzed by choice in this increasingly consumer focused world? Do you need an excuse to not work on homework? Do you need to know whether a certain someone likes you? Well, the magic 8 ball waits to answer these pressing questions and bring you completely relevant and truthful advice.
But wait there's more, this 8 ball isn't just your everyday, run-of-the-mill magic 8 ball, it is more accurately named the COSMIC 8-Ball, on account of it's cosmically large set of answers (including weather reports and random cat facts).
- login and logout capabilities!
- Additional responses than the usual ones!
- Answers your deepest questions! (provided you don't care so much about the quality)
- Lets you know if someone else is logged on as well
- Displays a list of all the answers you've received upon request
I am going to use the required technologies in the following ways.
- HTML - Pages for login and displaying the 8-ball.
- CSS - look and feel of the website, color scheme and fomatting for desktop and smartphone viewing.
- React - Interaction with buttons and handling changes between web pages.
- Service - Retrieves information about the weather, random cat facts and random dog facts.
- DB/Login - stores information about the user's questions and answers. Also securely stores user information and verifies login information.
- WebSocket - Displays a notification on the side bar whenever another user has joined the COSMIC 8-Ball. Though I might allow players to provide answers to other players if that would be possible?
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages I added 4 html pages to my website. the obvious index.html, about.html, yourStats.html, questionAndAnswer.html
- Proper HTML element usage - I included all the necessary elements in my html pages, including heads and body sections, headers, footers, and main sections. I included forms where applicable, and images and so on.
- Links - I included links between each of the pages of my website, and I included external links in my about.html document.
- Text - I included text where possible and gave some brief descriptions which I will finish writing by later deliverables.
- 3rd party API placeholder - I included a placeholder description on the questionAndAnswer.html page that will eventually be populated by random facts and other things.
- Images - I included a basic image on every page, along with some placeholder text because I need to finish creating some of the art that I will be uploading.
- Login placeholder - I have completed a login portion on the main page of the website.
- DB data placeholder - I have included a table on the yourStats.html page that includes a placeholder table that will be populated by the database data i include.
- WebSocket placeholder - I have included a placeholder text describing how I will incorporate websocket through displaying the usernames of those people who have just received answers from the 8-ball as the current user is thinking of a question to ask.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Header, footer, and main content body - Each of these sections has received attention to the coloration and placement. They are also responsive to sizing.
- Navigation elements - The navigation elements have gotten an overhaul, they're now much more visibly pleasing.
- Responsive to window resizing - Using flex and the bootstrap CSS framework, my website is very responsive to window resizing.
- Application elements -the application elements that I knew how I wanted to style, I did so. However, there are some elements that I could not decide on how to style, and those have been left as simple paragraphs for now.
- Application text content I used the bootstrap framework, as well as a little bit of CSS to make sure that the text looked like it fit the rest of the deliverable.
- Application images - I drew one main image in procreate and included that throughout the website, though I would like to do a few more smaller scale images.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - I installed Vite and bundled my web application according to the structure that Vite expects.
- Components - I create the proper references to the stubbed components as
.jsxfiles, and then made sure they worked. - Router - The routing between login and other components does work, and it works quite well!
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - I completed all the functionality I promised in the original deliverable. Questions and random answers work, though future updates will implement calls to external api for random answers including images.
- Hooks - I added all necessary hooks and implemented all functionality.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - I included node.js and created the http service using Express.
- Static middleware for frontend - I added all the necessary middleware to serve the frontend.
- Calls to third party endpoints - I did not complete this part of the deliverable.
- Backend service endpoints - Added all necessary backend service endpoints.
- Frontend calls service endpoints - I did complete this part, I added all necessary calls to the service endpoints.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- User registration - Users can still register, but their credentials are now stored in MongoDB.
- User login and logout - Users can still login and logout as normal, the landing page still updates accordingly, but, again, their credentials are now stored in MongoDB.
- Stores data in MongoDB - I implemented storing user data in MongoDB, so that the user can click on the "your stats" page and see all the questions they've ever asked and all the answers they've received. Maybe someday I will need to implement periodic cleansing of the database. I wonder if simon is as intelligent about that.
- Stores credentials in MongoDB - I implemented storing user credentials in MongoDB, so that the user can log in again even if the website is restarted.
- Restricts functionality based on authentication - My code does restrict functionality based on authentication. You cannot access your stats page or the question and answer page without logging in.
Further evidence that I have completed this deliverable 
.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - The backend server does listen for websocket connections.
- Frontend makes WebSocket connection - I did complete this part of the deliverable, frontend makes a websocket connection to the backend.
- Data sent over WebSocket connection - Data is sent over Websocket connection.
- WebSocket data displayed - my Websocket data is displayed at the bottom of the website, and I have worked on displaying the data in a good looking way.
- Application is fully functional - I have almost completed this part of the deliverable, but I have not yet completed the additional webapi part.