johnpgr / code-racer

Code Racer

Welcome to Code Racer, a community project built with Next.js, Tailwind CSS and TypeScript. 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!

Features

• Code snippet games
• Multiplayer races

Technologies Used

• Next.js : A React framework for building server-side rendered and statically generated applications.
• NextAuth : For user authentication.
• Prisma : Next-generation ORM, it provides a clean and type-safe API for submitting database queries
• Tailwind CSS : A utility-first CSS framework for rapid UI development.
• TypeScript: A typed superset of JavaScript that provides enhanced tooling and developer productivity.

Contribution

We welcome contributions from the community! If you'd like to contribute to Code Racer, please follow refer to CONTRIBUTING.md, but 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

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

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

If you have any questions, suggestions, or feedback regarding Code Racer, please feel free to reach out to us at in the WebDevCody discord server

Happy coding and enjoy the race!

Related Youtube Videos & Progress

1. Community Project Announcement Video
2. First Q&A Livestream and Community Project Live Coding Session

How To(s) - A newbie section

Check the logs of Post

Run the command - docker logs --follow code-racer-postgres

code-racer's Issues

[FEATURE]: Reconnect User to Game Feature

Feature Summary

Implement a Reconnect Feature.

The game doesn't support reconnections. When a user disconnects from a game and tries to reconnect (by refreshing the page), they won't be reconnected to the game they were currently on.

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE]: Feature flag to merge with upstream

Feature Summary

Add feature flags that checks a .env MULTIPLAYER=true to disable the multiplayer feature, and enable it on dev server only.

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE]: Link Result to RaceParticipant

Feature Summary

Have the Result be linked to RaceParticipant after a race ends.

Code of Conduct

• I agree to follow this project's Code of Conduct

[BUG]: Multiplayer matchmaking based on snippetId

Description

The Matchmaking logic is going to assign users to a race based on the randomly selected snippet, so if a lot of snippets exist on the language selected, two users are most likely never going to enter the same race.
Changing that to enter races based only on the same language would fix this.

the match making function:

async function raceMatchMaking(
  snippet: Snippet,
  userId?: User["id"],
): Promise<RaceType> {
  if (userId) {
    // For logged in user, we choose race if:
    // 1. its snippet is the same
    // 2. hasn't started or ended yet
    // 3. all participants are logged in user
    // 4. race's participants has not reached maxiumun capacity
    // TODO: 5. participants stats most suitable to current user

    let availableRace = await prisma.race.findMany({
      where: {
        snippet: {
          id: snippet.id, 
        },

Why it's a problem:

  const snippet = await getRandomSnippet(searchParams.lang);
  // ...
  let raceToJoin: RaceType | null = null;
  //...
  //Fetch available races and join one. if there none, create one.
  raceToJoin = await raceMatchMaking(snippet, user?.id); 

(optional) What browsers are you seeing the problem on?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE]: Better multiplayer UI

Feature Summary

I haven't put much work in making the multiplayer UI look good.

Currently:

• Waiting screen:
  
• Countdown screen:
  
• Loading results:
  

Code of Conduct

• I agree to follow this project's Code of Conduct

[BUG]: Race results not loading

Description

I probably yeeted some code logic in race.tsx and it's not generating any results after the multiplayer race ends.
Hangs here forever:

(optional) What browsers are you seeing the problem on?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE]: Add Race history

Feature Summary

Create a new table, or just store the current user's races in localstorage.
Create a page for the user to look for his race history, and maybe later add a feature to replay that race

Data:

• timestamps
• race participants position
• average cpm
• etc

Code of Conduct

• I agree to follow this project's Code of Conduct

[FEATURE]: Private races

Feature Summary

Add private multiplayer races for only ppl with invite link

Code of Conduct

• I agree to follow this project's Code of Conduct

[BUG]: User can join same race with same account

Description

It's maybe a good idea to not allow this behavior, for obvious reasons

(optional) What browsers are you seeing the problem on?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct