Rollerskate racing is a fun app used to design a rollerskate, view past rollerskates that have been created, and then race your rollerskate against other players. It's a fun app that allows creativity as welll as competition.
Note
Fill in this sections as the submission artifact for this deliverable. You can refer to this example for inspiration.
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.
Rollerskate racing is a fun game that allows both creativity and competition. It's all about designing the coolest rollerskates and then using that rollerskate to race against other players. When designing each skate, you can choose the color, type of design, and the color of the laces as well. Then... you RACE. Fastest skate wins!
This is a basic mockup for the rollerskate racing game. You can see that there are three sections for the game. Because this is my first time working with developing a website I'm going to be keeping the UI pretty simple, but still visually interersting for the user.
Down below I will be making in the sequence diagram. I just still need to learn how that works.
sequenceDiagram
actor You
actor Website
You->>Website: Replace this with your design
- Secure Login
- Ability to design a skate and save it to your profile
- View the skates that were previously made
- Race your skates against others
- View the leaderboard for the fastest times
I am going to use the required technologies in the following ways.
- HTML - HTML Pages for login, landing page, skate design, skate library, and skate racing.
- CSS - Make it adaptable to all of the different screens
- React - I will use react to allow the user to move between screens
- Service - I will use API's to allow the user to publish scores to a global leaderboard, and maybe one day you can even add friends and see their skates
- DB/Login - The user needs an account to see their totally wicked skates! They should login before starting
- WebSocket - This is what will be used to allow the user to see the other skate times
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](https://chaseashton.click.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - I made 5 HTML pages. The login page, the landing page, and then a page for each of the actions that the user should be able to do. Now there is a place to view their skates, design skates, and race their skates.
- Proper HTML element usage - I included most of my code inside the body element of my HTML, and then used paragraph, header, div, link, and image elements for the contents
- Links - Links were added between the pages to allow for ease of navigation.
- Text - Text is used to add descriptions to each of the pages, as well as convey important information about the skates themselves.
- 3rd party API placeholder - I added a leaderboard where the user is able to see the top skates a times
- Images - I made my own image assets using a design I found on the internet. I used an image of a rollerskate I found and then customized it in Adobe Illustrator and then I made them SVD's to allow for ease of rescalability.
- Login placeholder - There is a place for the user to sign in, but it is not yet functional.
- DB data placeholder - The user then is able to see the skates they have created
- WebSocket placeholder - This is also part of the leaderboard, seeing the times of other skates.
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 - I became very familiar with Bootstrap header and footer elements and used their examples to construct visually appealing yet concise headers and footers. The Body element
- Navigation elements - I was able to finish working on the screens where the user will be able to design their skates and view their designed skates. You are able to navigate with ease from one thing screen to another and back
- Responsive to window resizing - The app is able to resize and rearrange based on the screen size. This was particularly easy because of the grid system that Bootstrap uses
- Application elements - As has been mentioned before I designed all of the different pages using the bootstrap elements. Breaking each thing down into it's rows and columns allows for a very organized and orderly layout.
- Application text content - Using CSS I was able to import fonts from google and use those fonts to add style to each page.
- Application images - All of the images used in this project are svg's to allow for ease of resizability and to take up less storage. Effects were applied to present the images in an organized manner.
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 used it to bundle my react code
- Components - I changed my components to now be react file
- Router - Added routing between the different pages using NavLinks, and Navigate
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 - The Skate Clicker Game is now fully functional! You can design a skate, add it to your library, and equip it to then use it in the game.
- Hooks - There are react variables used throughout the app specifically the user data.
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 created the service folder that
- Static middleware for frontend - There is middleware to verify that the user is logged in before using an endpoint
- Calls to third party endpoints - Included a button to get Chuck Norris Jokes :)
- Backend service endpoints - I created several backend endpoints to get and modify the data such as clicks, skates, equipped skates, and leaderboard
- Frontend calls service endpoints - The front end calls those endpoints
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- User registration - The user can create and account and it is created in my MongoDB database
- User login and logout - The user can Login and Logout
- Stores data in MongoDB - All data is stored in MongoDB
- Stores credentials in MongoDB - Credentials are stored in MongoDB
- Restricts functionality based on authentication - You aren't able to do things unless you are signed in
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 implemented the live leaderboard on the back end
- Frontend makes WebSocket connection - The connection is then made on the frontend
- Data sent over WebSocket connection - Whenever the user clicks the skate the message is sent to the client
- WebSocket data displayed - That data/message is then visible in the leaderboard on the landing page
- Application is fully functional - The APP WORKS!!! WOOT WOOT PARTY TIME!! TIME TO CELEBR8