Merge branch 'webdevcody:main' into webdevcody#648-invalid-race-post-request

Author: bkbCodes

Diff for: .gitignore

@@ -4,3 +4,6 @@
 
 # MacOS generated files
 **/.DS_Store
+
+# VS Code generated files
+**/.vscode/*

Diff for: CONTRIBUTING.md

@@ -28,61 +28,77 @@ You will need to [install docker](https://www.docker.com/get-started/) on your l
 
 If you do not have docker, go here to download and install: <https://www.docker.com/get-started/>
 
+If you see error starting db on M1 mac, you may need to update your docker config file at `~/.docker/config.json`
+Your file should look like something like this:
+
+```
+{
+        "auths": {},
+        "currentContext": "desktop-linux"
+}
+```
+
 If you are getting WSL error when you launch your desktop docker application, go here and follow these steps for windows: <https://learn.microsoft.com/en-us/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package>.
 
 ## Installation
 
 To get started with Code Racer locally, follow these steps
 
-1. Fork the repo
+1. Make sure you have installed Docker locally (See above Prerequisites)
 
-2. Clone your fork
+2. Fork the repo
+
+3. Clone your fork
 
    ```sh
     git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/code-racer.git
    ```
 
-3. Navigate to the project directory
+4. Navigate to the project directory
 
    ```sh
    cd code-racer
    ```
 
-4. Create a .env file inside the project's packages/app directory.
+5. Create a .env file inside the project's packages/app directory.
 
-5. Copy and paste variables from `packages/app/.env.example` into `packages/app/.env`
+6. Copy and paste variables from `packages/app/.env.example` into `packages/app/.env`
 
-6. Install NPM packages
+7. Install NPM packages
 
    ```sh
    npm i
    ```
 
-7. Start the database
+8. Start the database
 
    ```sh
    npm run dev:db
    ```
 
-8. Start the app dev server
+9. Start the app dev server
 
    ```sh
    npm run dev:app
    ```
 
-9. Start the web socket server
+10. Start the web socket server
 
-   ```sh
-   npm run dev:wss
-   ```
+```sh
+npm run dev:wss
+```
 
 Open your browser and visit <http://localhost:3000> to see the application running.
 
 ## Working on New Features
 
-If you're new to github and working with open source repositories, I made a video a while back which walks you through the process:
+If you're new to Github and working with open source repositories, I made a video a while back which walks you through the process:
 [![How to make a pull request on an open source project](https://img.youtube.com/vi/8A4TsoXJOs8/0.jpg)](https://youtu.be/8A4TsoXJOs8)
 
+There is also a new video explaining how you can contribute to this project:
+<br/>
+[How to contribute to open source projects (our community project walkthrough)](https://www.youtube.com/watch?v=dLRA1lffWBw)
+
 If you want to work on a new feature, follow these steps.
 
 1. Fork the repo
@@ -105,26 +121,30 @@ git checkout main
 git pull upstream main
 ```
 
-## Before Submitting Pull Request
+## Before Submitting a Pull Request
+
 Before submitting a **Pull Request**, you should
+
 1. Check your code safety with Linter and TypeScript, and make sure your code can build successfully.
 
 ```sh
 npm run pr:precheck
 ```
 
-2. (Optional) Do an E2E test to ensure application function properly
+2. (Optional) Do an E2E test to ensure application functions properly
 
 ```
 npm run e2e -w @code-racer/app
 ```
+
 ## Code of Conduct
 
 ### Our Pledge
 
 In the interest of fostering an open and welcoming environment, we as
 contributors and maintainers pledge to making participation in our project and
-our community a friendly experience for everyone, regardless of any experience to give everyone an opportunity to contribute in this project.
+our community a friendly experience for everyone, regardless of any experience
+to give everyone an opportunity to contribute in this project.
 
 ### Our Responsibilities
 

Diff for: packages/app/LICENSE renamed to LICENSE

@@ -1,66 +1,102 @@
 <div align="center" >
-  <img src="./packages/app/public/static/logo.png" width="60" alt="">
+  <img src="./packages/app/public/static/logo.png" width="60" alt="code-racer-logo">
   <br/>
   <h1>Code Racer</h1>
 </div>
 
-<br/>
-
 <div align="center">
-Welcome to Code Racer, a community project built with <a href="https://nextjs.org/">Next.js</a>, <a href="https://tailwindcss.com">Tailwind CSS</a> and <a href="https://www.typescriptlang.org">TypeScript</a>.
-Code Racer is a multiplayer coding game where developers can compete against each other to solve programming challenges in real-time. Sharpen your coding skills, challenge your peers, and have fun while racing against the clock!
+  Welcome to Code Racer, a community project built with <a href="https://nextjs.org/">Next.js</a>, <a href="https://tailwindcss.com">Tailwind CSS</a>, and <a href="https://www.typescriptlang.org">TypeScript</a>.
+  Code Racer is a multiplayer coding game where developers can compete against each other to solve programming challenges in real-time. Sharpen your coding skills, challenge your peers, and have fun while racing against the clock!
 </div>
 
-## Features
+<div align="center">
+  <!-- TO ADD more Badges use -> https://shields.io/ -->
+
+  <img alt="GitHub contributors" src="https://img.shields.io/github/contributors-anon/webdevcody/code-racer">
+  <img alt="Repo License" src="https://img.shields.io/github/license/webdevcody/code-racer">
+  <img alt="Website Status" src="https://img.shields.io/website?url=https%3A%2F%2Fcode-racer-eight.vercel.app">
+
+  </div>
+
+
+## Table of Contents
+
+- [:rocket:  Features](#features)
+- [:hammer_and_wrench:  Technologies Used](#technologies-used)
+- [:handshake:  Contribution](#contribution)
+- [:lock:  License](#license)
+- [🙏🏻 Acknowledgements](#acknowledgements)
+- [:envelope:  Contact](#contact)
+- [:clapper:  Related Youtube Videos & Progress](#related-youtube-videos-progress)
+
+<a id="features"></a>
+
+## Features &colon;rocket&colon;
 
 - Code snippet games
 - [Multiplayer races](./packages/wss/README.md)
 
-## Technologies Used
+<a id="technologies-used"></a>
+
+## Technologies Used &colon;hammer_and_wrench&colon;
 
-- [Next.js](https://nextjs.org) : A React framework for building server-side rendered and statically generated applications.
-- [NextAuth](https://next-auth.js.org) : For user authentication.
-- [Prisma](https://www.prisma.io) : Next-generation ORM, it provides a clean and type-safe API for submitting database queries
-- [Tailwind CSS](https://tailwindcss.com) : A utility-first CSS framework for rapid UI development.
-- [TypeScript](https://www.typescriptlang.org): A typed superset of JavaScript that provides enhanced tooling and developer productivity.
+- [Next.js](https://nextjs.org): A React framework for building server-side rendered and statically generated applications.
+- [NextAuth](https://next-auth.js.org):For user authentication.
+- [Prisma](https://www.prisma.io):Next-generation ORM, it provides a clean and type-safe API for submitting database queries.
+- [Tailwind CSS](https://tailwindcss.com):A utility-first CSS framework for rapid UI development.
+- [TypeScript](https://www.typescriptlang.org):A typed superset of JavaScript that provides enhanced tooling and developer productivity.
 
-## Contribution
+<a id="contribution"></a>
 
-We welcome contributions from the community! If you'd like to contribute to Code Racer, please follow refer to [CONTRIBUTING.md](./CONTRIBUTING.md), but we have these base guidelines:
+## Contribution &colon;handshake&colon;
 
-- Fork the repository.
-- Create a new branch for your feature or bug fix.
-- Make your changes and test thoroughly.
-- Commit your changes with clear commit messages.
-- Push your branch to your forked repository.
-- Submit a pull request detailing your changes.
+We welcome contributions from the community! If you'd like to contribute to Code Racer, please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). We have these base guidelines:
+
+- Fork the repository
+- Create a new branch for your feature or bug fix
+- Make your changes and test thoroughly
+- Commit your changes with clear commit messages
+- Push your branch to your forked repository
+- Submit a pull request detailing your changes
 
 Please ensure that your code adheres to the project's coding standards and conventions.
 
-## License
+## License &colon;lock&colon;
+
+<a id="license"></a>
 
 The Code Racer project is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.
 
-## Acknowledgements
+<a id="acknowledgements"></a>
+
+## Acknowledgements 🙏🏻
 
 Code Racer wouldn't be possible without the valuable contributions and support from the open-source community. We would like to express our gratitude to all the contributors and acknowledge the following libraries and resources used in this project.
 
 A big thank you to all the developers who have helped shape Code Racer into what it is today!
 
-## Contact
+<a id="contact"></a>
+
+## Contact &colon;envelope&colon;
 
-If you have any questions, suggestions, or feedback regarding Code Racer, please feel free to reach out to us at in the WebDevCody [discord](https://discord.gg/4kGbBaa) server
+If you have any questions, suggestions, or feedback regarding Code Racer, please feel free to reach out to us at in the WebDevCody [discord](https://discord.gg/4kGbBaa) server.
 
 Happy coding and enjoy the race!
 
-## Related Youtube Videos & Progress
+<a id="related-youtube-videos-progress"></a>
+
+## Related Youtube Videos & Progress &colon;clapper&colon;
 
 1. [Community Project Announcement Video](https://www.youtube.com/watch?v=-n6tV3RPjGc)
 2. [First Q&A Livestream and Community Project Live Coding Session](https://www.youtube.com/watch?v=BQXXBsHXfak)
+3. [How to contribute to open source projects (our community project walkthrough)](https://www.youtube.com/watch?v=dLRA1lffWBw)
+4. [You need to write tests when this starts to happen](https://www.youtube.com/watch?v=PzrhclEQp-M)
+5. [CodeRacer had a major security issue](https://www.youtube.com/watch?v=FigpqBGqwK4)
+6. [Stop calling prisma inside server components](https://www.youtube.com/watch?v=sLIoCfKK5SA)
 
 <details>
   <summary>
-  <h2>How To(s) - A newbie section</h2>
+    <h2>How To(s) - A newbie section</h2>
   </summary>
 
 ### Check the logs of Post