A website for leaving and sharing reviews of dryers and washers in apartment complexes because I'm sick of accidentally using the bad one. Removed notes on the old website I was building.
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
- Proper HTML element usage
- Links
- Text
- 3rd party API placeholder
- Images
- Login placeholder
- DB data placeholder
- WebSocket placeholder
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 - The header and footer is the same on each page, and the main body changes
- Navigation elements - I spent about 2 hours messing with this, turns out I had just not copied the code to import bootstrap correctly which is why it didn't look good. Should be decent now.
- Responsive to window resizing - The two tables (find.html and browse.html) are behaving funky when the screen gets too wide and that I cannot solve on this lack of sleep and looming deadline, however everything else seems to keep looking pretty when the page changes shape into weird shapes
- Application elements - There are spans and stuff, could be better probably
- Application text content - There is text on there for sure
- Application images - I put a little AI generated logo of a dryer with some stars on it. It isn't much but it made a lot of sense in my head.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - Used NPM and organized the files in the way that VITE expects
- Components - Different pages are different components
- Router - The index.jsx routes between pages
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 - Everything mocked, except the page where you call an API doesn't actually do anything yet BUT the form to submit info that will be passed to the API works so I think that's the important part for this deliverable? Feel free to correct me.
- Hooks - I used useState a lot, I did not use useEffect, I'm not 100% sure I understand what it does BUT from what I do know I don't think I need it for my project? Again, feel free to correct me.
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 set up an express backend following the instructions
- Static middleware for frontend - I have my react pages like app.jsx and the various pages from the react deliverable
- Calls to third party endpoints - In src/find/find.jsx I call the overpass API to retrieve data on local laundromats
- Backend service endpoints - Service endpoints for logging in and out, creating accounts, leaving reviews of dryers/washers, getting reviews stored in the backend.
- Frontend calls service endpoints - Login calls login and create account endpoints, once logged in any page can call logout, review page calls review endpoint to add a new review, browse page calls endpoint for getting reviews from the backend
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- User registration - Creating an account calls mongo to store user info in the database
- User login and logout - Logging in and out endpoints call mongo to update user info
- Stores data in MongoDB - Backend endpoints call methods from database.js which interact with the mongo database
- Stores credentials in MongoDB - User credentials are stored in mongo database
- Restricts functionality based on authentication - Verify user endpoint is called before proceeding to other endpoints, such as viewing reviews on washers/dryers or leaving reviews
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 - I used the same peerProxy idea that simon websocket uses to listen for websocket connections
- Frontend makes WebSocket connection - I borrowed the gameEventNotifier class from simon but renamed everything to be less... gamey, the browse and review .jsx files use it
- Data sent over WebSocket connection - Review page sends an event notification when a review is left by a user on a washer/dryer
- WebSocket data displayed - Browse page shows a popup when another user leaves a review stating the username and apartment complex
- Application is fully functional - Roger that. Feels really freakin' good