webdevcody / 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!

Table of Contents

• 🚀 Features
• 🛠️ Technologies Used
• 🤝 Contribution
• 🔒 License
• 🙏🏻 Acknowledgements
• ✉️ Contact
• 🎬 Related Youtube Videos & Progress

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 refer to 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 🔒

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
3. How to contribute to open source projects (our community project walkthrough)
4. You need to write tests when this starts to happen
5. CodeRacer had a major security issue
6. Stop calling prisma inside server components
7. Working on our Community Project Code Racer (Next, Tailwind, ShadCN/UI, Prisma)

How To(s) - A newbie section

Check the logs of Post

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

code-racer's Issues

Create a Page Which shows Leaderboard

• Display fastest users
• Display users with most points

[TASK]: Setup project level auto-format with prettier

Task Summary

Currently, there's no project config for formatting.
Since there are multiple contributors, each with their individual prettier config, many files are formatted differently.
This is already bad, but the real pain is that in each commit, touched files are being formatted again and again differently, leading to big and messy commits.

We should add some project config for formatting, which will ensure that each contributor working with prettier will use the same formatting rules as everyone.
We should also take into account contributors who don't have prettier vscode extension installed, and should force the code to be formatted all the same.

I suggest to do the following:

• Add prettier as a dev dependency
• Create formatting config file for prettier (.prettierrc file)
• Populate the .prettierrc with accepted rules (This is the part I'm not sure about what rules exactly to use - Perhaps Cody can decide?)
• Run a one-time format script for all files to ensure all files are synced with the new formatting rules
• Create format pre-commit hook to be run on every commit

A guide on how to configure prettier: https://khalilstemmler.com/blogs/tooling/prettier/

Would love to get endorsement for this issue since this can be a cross-project change which will make changes in all files.

Acceptance criteria

• All files have the same formatting
• All future commits will be auto-formatted by the same formatting rules.

Any Additional Context

No response

[TASK]: env variable validation

Task Summary

will ensure env variables exist by parsing process.env instead of using non-null assertion (! or ?? "")

Acceptance criteria

• [] dev server errors when an env variable is missing

Any Additional Context

• zod

Create Pull Request template to normalise them

Additionally, possibly issue templates

[FEATURE]: Link to Snippet on Dashboard

Feature Summary

change game id to snippet id, and allow the user to click that snippet id to take them back to the race page with that snippet loaded for them to race again with.

Acceptance criteria

• a user shall be able to race against a snippet from clicking the snippet id in their dashboard

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

[TASK]: Create Race Progress Tracker Component

Task Summary

Create a component that shows all racers on a horizontal line and their profile pictures above the line

Acceptance criteria

• A component should exist that shows a racer's progress and its profile picture
• With the use of this component, we should be able to depict all racer's progress and their info.

Any Additional Context

No response

[TASK]: Create component for user infomation

Task Summary

Can i be assigned to this, as i believe this will be a reusable component.

Acceptance criteria

• User information is moved into a separate component

Any Additional Context

No response

Create a Header

• add logo
• add some links
• add account avatar

[FEATURE]: Add minimum characters to snippets

Feature Summary

If it has to low amount of characters it is easy to get high cpm and is easier to get to the leaderboards. For example there's a snippet "print("hello")" which is fairly easy to type fast compared to other snippets. We need to add minimum amount of characters so it is not that easy to get high cpm or at least so that they have the same level of difficulty.

Acceptance criteria

• Snippets will contain minimum amount of characters (at least 30 for now)
• User can't exploit the leaderboard

Scenario

make same difficulty for snippets, so it is not easy to exploit leaderboard

Any Additional Context

No response

Code of Conduct

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

[TASK]: Create share on Social Media Buttons

Task Summary

• Use existing reusable buttons to make social media buttons

Acceptance criteria

• Should be able to share the stats to various platform

Any Additional Context

No response

[TASK]: Update login button

Task Summary

• Make login button login directly with GitHub instead of redirecting to a login page first
• Update button style to look neater
• Add GitHub Logo to indicate it will log in with GitHub

Acceptance criteria

• One click login with GitHub
• Neater button style
• GitHub logo

Any Additional Context

No response

Create env.example

Acceptance criteria:

• env.example
• include envrioment variables for:
  • database host
  • database name
  • database port
  • database username
  • database password
  • database url

[TASK]: show real data on dashboard page

Task Summary

Get the real data from db and show it on dashboard page
1 table with accuracy, 1 table with cpm, recent races and statistics

Acceptance criteria

Everything should use the same as it is right now (with the mocked data) except recent
races table (use the data-table instead)

Any Additional Context

I can work on it

[FEATURE]: A user will have a way to upload a typecript code snippet

Feature Summary

Give a user the ability to add code snippets. These will be fetched randomly when a race starts

Acceptance criteria

• snippet model created
• basic upload added to user profile page

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

[TASK]: Additional columns for result table

Task Summary

To properly show user's dashboard, we need more columns for the results, such as
date: Datetime
accuracy: Decimal
errors: Int
wpm: Int

Acceptance criteria

update the prisma schema with following columns

Any Additional Context

No response

[FEATURE]: Show Other's top 10 Results for snippet

Feature Summary

After finishing racing on a snippet, the results page should show the top 10 racers for that snippet and allow users to click into their profile.

Acceptance criteria

• user can view top 10 users who raced on this snippet

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

Login Capabilities

A user shall be able to register using github authentication so that as they complete races, their stats are tracked.

AC:

• a user can click a sign in button
• once the user signs in, they have the ability to sign out
• a profile avatar shall be present in the header when the user is signed in

[TASK]: Add badges to user's profile

Task Summary

Just like discord has badges show achievements on the profile page of a user which will make it look nicer than on the dashboard.

Acceptance criteria

• [] Display badges out of a list
• When hovering show the date it has been given to the user

Any Additional Context

No response

Create a Page For Showing Race Results or Stats

[TASK]: Add more languages to add snippet dropdown

Task Summary

The select language dropdown only has 3 languages. It would be nice to have more

Acceptance criteria

• at least 10 languages in the dropdown

Any Additional Context

No response

[TASK]: Update user dropdown - logout to red

Task Summary

• Just update the colour of the logout button text to red

Acceptance criteria

• - The logout button that is apart of the user menu in the header is red.

Any Additional Context

No response

[TASK]: How to Set up `DATABASE_URL` details in `README.md` or `CONTRIBUTING.md`

Task Summary

can someone please write on how to set up the DATABASE_URL from postgres in either the README.md or CONTRIBUTING.md so that those now joining can easily set up the project and start working on the project on their dev servers

Acceptance criteria

• [DONE IN READ.ME]
• [DONE IN CONTRIBUTING.md]

Any Additional Context

No response

Create DockerFile / docker-compose

Acceptance criteria:

• DockerFile
• docker-compose w/ Postgres
• .dockerignore

[TASK]: Create index file in components folder.

Task Summary

Take care of the src/components/ui folder and create an index file from which the components could be imported.
That way we'll have em all in one spot and allow ourselves to use jspath to import from @components/Button.

Acceptance criteria

• Add components to paths in tsconfig file

• Create index file that imports and re-exports all the files in said folder.

Any Additional Context

No response

[FEATURE]: upvoting / downvoting snippets

Feature Summary

As far as there is no restriction on creating a snippet, we should add a feature of upvoting / downvorting them to prevent bugging.

Acceptance criteria

How do I see this:
after the race, user sees the results on the screen and below it he can click on a button to upvote / downvote the snippet
as the snippet gains 10 (for example) downvotes, it no longer shows for users

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

Update Prisma Schema Database

Acceptance criteria:

• Update schema.prisma to Postgres

Create Templates: Pull Request, Issues

Creating a pull request template for your repository
https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository

Configuring issue templates for your repository
https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Acceptance criteria:

• docs/pull_request_template.md
• docs/issue_template.md

Initialized NextJS project

Acceptance criteria:

• NextJS project with App Router
• TailwindCSS
• shadcn/ui
• Prisma
• Next-Auth

[FEATURE]: score screen

Feature Summary

As it was mentioned by Cody, in issue #7 , user wants to see his result as he finishes the race.

Acceptance criteria

• user has to be redirected by the end of the race
• user should see his taken time & number of errors for now
• non-auth users can also see the results
• has to be an intercepting route (and a page) with go back button

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

Prisma Schema conventions

Hello!

I suggest we follow a few conventions with the Prisma schema with Postgres and, generally, a SQL database/dialect.

@map attribute

Using the @map attribute, any fields named in the schema using camelCase should be mapped to their respective column name using snake_case.

For example, with #37, there's a plan to change the field <User>.name to <User>.displayName.
We can add the attribute @map("display_name") to commit this change to the database.

As most of us with Prisma knowledge know, we still use .displayName in the schema and Prisma Client. But display_name would be used in the database instead.

@@map

This is very similar to the @map attribute. However, with @@map, we map the model name to its respective database table name to follow the snake_case standard.

We currently have a User model defined. Following this standard, we can place @@map("users") at the end of the model to prepare to commit these changes.

These are the conventions I have in mind right now. As the repo progresses, I'll watch for changes to the schema!

Reference: Prisma schema reference

[TASK]: Authentication middleware

Task Summary

Next Auth's middleware should be implemented to protect frontend and backend API routes.

Acceptance criteria

• The creation of src/middleware.ts and exporting next-auth/middleware from that file
• Applying the middleware on respective paths (ex., dashboard, and backend API routes)

Any Additional Context

References

• Next Auth middleware
• Next.js middleware

I can tackle this issue a bit later in the week with more time off. However, feel free to get started on this if anyone wishes!

[TASK]: User should be able to pick race emoji on user profile page

Task Summary

Make an option enabled on the profile page so that a user can pick a “race emoji”.
The emoji should also display when the user is participating in code races.

Acceptance criteria

• Option should exist which allows the user to pick an emoji
• Emoji should be stored with the user's information

Any Additional Context

No response

[BUG]: Typing requires extra spaces

Description

When typing the snippet, you often need to press extra spaces after pressing enter for going to the next line. I think the editor should automatically process the cursor to the next character after you press enter. Requiring a user to press space 4 times to indent is a bit annoying for a speed typing app.

Reproduction Steps

just try typing, you'll see how annoying it is

Expected Behaviour

it should feel better

Actual Behaviour

too many required fields on this bug report

Operating System / Platform

Mac (iOS)

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

No response

Relevant log output

No response

Code of Conduct

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

Initial Work on README.md

We should update the readme to have a link to this discord, any videos on my youtube channel that document the progress of this community project (or videos that help explain concepts like forking, collab, etc).

The readme should explain the overall goals of the project, the choice in tech stack, how to contribute (link to CONTRIBUTING.MD file), and any pre-reqs that might be needed to get this project running.

[TASK]: Make the Header Responsive

Task Summary

The header looks good around 769px wide and above in width, however, the right side (Sign in/out buttons and theme toggle) is nowhere to be seen on smaller devices.

Acceptance criteria

The sign in/out buttons and theme toggle are seen on smaller devices.

Any Additional Context

No response

[FEATURE]: add theme toggle

Feature Summary

as a user i want to be able to toggle website theme

Acceptance criteria

• any user can choose between three options, light, dark and system to toggle theme

Scenario

No response

Any Additional Context

No response

Code of Conduct

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

Create Dashboard Page

Users can get an overview of their activity sucha as history for races or completed challenges, perfomance metrics and progress tracking which will come to award badges in return based on the perfomance. This will allow users to mornitor and track improvement. Might highly likely work on data visualization aswell

Features

• Race history
• Perfomance metrics
• Progress tracking (can be over time)
• Achievements and badges

Add .env to gitignore

We need to add .env to gitignore so people don't upload it in their pull requests.

Update readme to have correct Getting started steps

Getting started section should have details on how to setup the project with docker

Create Profile Page

• Functionality to change display name
• View a users display name
• View a users race history
• View a users points
• View a users avatar

Work on CONTRIBUTING.md

having a CONTRIBUTING.md file to help beginners understand the process of forking the repo, making branches, changing files on their branch, then making a pull request would be useful. I can later make a video explaining this concept if needed.

We'd also want to explain how you can sync your fork with the upstream repo so that as other people make changes, your fork will get those changes.

[BUG]: Stays signed in after account deletion

Description

When deleting your account in the /profile route, the session is not cleared and so a manual log out is required even though the user no longer exists in the database.

Reproduction Steps

1. Login / Create account
2. Navigate to /profile
3. Go though the steps to delete account
4. After confirming account deletion the page reloads and the user is no longer in the database however your session is still saved and so your profile is still viewable as well as your logged in state.

Expected Behaviour

Upon deletion of an account it should first delete the user from the database (already working), then once this has successfully ran the users session cookies should be cleared as well navigate them to the home page.

Actual Behaviour

When deleting account the page just reloads, the user is removed from the database but the session is still active and valid, this means that the user still has access to the profile with their info, this then causes errors if they try to edit this now stale profile as the user is no longer in the database, these errors will happen anywhere the user is updated for example when creating a new race result or updating the users name.

Operating System / Platform

Windows

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

Chrome

Relevant log output

No response

Code of Conduct

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

Create a Model For People to Select Editor Code Styles

a profile page for people to change their display name

Create a Landing Page

• Add some info to the race page
• Add some links to the race page

Configure eslint airbnb typescript

To do best practices and enforce coding styles, I think it would be great to adopt airbnb's config.

[TASK]: Making the dashboard include real data

Task Summary

Make the dashboard have real data pulled from the database

Acceptance criteria

• Gets user data
• Shows user data correctly

Any Additional Context

No response

Dashboard page and layout needs fix

footer is overflowed on tables on dashboard page and there is horizontal scroll implemented on the page and it needs fix, since it is not the best user experience.

Starting a Race

As a guest, I should be able to start a race which will show me a hard coded snippet of typescript. I should be able to type the snippet and see a cursor move over the typed words making their color green / red as I type them. After finishing the entire snippet, I should be sent to a score screen that shows how many I got correct or wrong, how fast I typed, and what place I finished in the race.

AC:

• a user has a way to start a race
• a user has a way to view and type a typescript snippet of code
• once the user types to the end of the snippet, they should be navigated to a score screen
• a user can "race again" after seeing the score screen

[BUG]: Header padding

Description

Padding in header causing name to collapse

Reproduction Steps

Visible once user is logged in

Expected Behaviour

Actual Behaviour

Code of Conduct

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