Merge branch 'main' into updated-getting-started

Author: CHVong

.env.example

@@ -1,6 +1 @@
-DATABASE_HOST = "localhost"
-DATABASE_NAME = "mydatabase"
-DATABASE_PORT = "5432"
-DATABASE_USERNAME = "myuser"
-DATABASE_PASSWORD = "mypassword"
-DATABASE_URL = "postgresql://USERNAME:PASSWORD@HOST:PORT/NAME?schema=public"
+DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

README.md

@@ -16,78 +16,88 @@ Code Racer is a multiplayer coding game where developers can compete against eac
 - Tailwind CSS: A utility-first CSS framework for rapid UI development.
 - TypeScript: A typed superset of JavaScript that provides enhanced tooling and developer productivity.
 
-## Getting Started
-
-To get started with Code Racer locally, follow these steps:
-
-    Clone the repository:
-
-```bash
-git clone https://github.com/webdevcody/code-racer.git
-```
+## Contribution
 
-Navigate to the project directory:
+We welcome contributions from the community! If you'd like to contribute to Code Racer, please follow refer to [CONTRIBUTION.md](CONTRIBUTION.md), but we have these base guidelines:
 
-```bash
-cd code-racer
-```
+- 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.
 
-Install dependencies:
+Please ensure that your code adheres to the project's coding standards and conventions.
 
-```bash
-npm install
-```
-Create a .env file inside the project's root directory.
+## Getting Started
 
-Copy and paste the content of .env.example into your .env file
+### Prerequisites
 
-Update DATABASE_URL inside your .env from "postgresql://USERNAME:PASSWORD@HOST:PORT/NAME?schema=public" to "postgresql://myuser:mypassword@localhost:5432/mydatabase?schema=public" for example or with whichever username, password, host, port, and name you chose.
+You will need to [install docker](https://www.docker.com/get-started/) on your local machine.
 
 If you do not have docker, go here to download and install: https://www.docker.com/get-started/
 
-If you are getting WSL error when you launch your desktop docker application, go here and follow these steps: https://learn.microsoft.com/en-us/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package.
-
-Open Docker Desktop Application and go back to your VSCode terminal and run this command:
-
-```bash
-docker compose up -d
-```
-
-Generate prisma DB:
-
-```bash
-npx prisma generate
-```
-
-Updates schema to database
-```bash
-npx prisma db push
-```
-
-Start the development server:
-
-```bash
-npm run dev
-```
+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 my repo and clone your fork
+   ```sh
+    git clone https://github.com/webdevcody/code-racer.git
+   ```
+2. Navigate to the project directory
+   ```sh
+   cd code-racer
+   ```
+3. Install NPM packages
+   ```sh
+   npm i
+   ```
+4. Generate a version of Prisma Client that is tailored to the models.
+   ```js
+   npx prisma generate
+   ```
+5. Create a .env file inside the project's root directory.
+
+6. Copy and paste variables from `.env.example` into `.env`
+
+7. Open Docker Desktop Application and go back to your VSCode terminal and run this command:
+   ```sh
+   docker compose up -d
+   ```
+8. Once your database is ready, push your prisma schema to the database.
+   ```sh
+   npx prisma db push
+   ```
+9. Finally start your dev server.
+    ```sh
+    npm run dev
+    ```
 
 Open your browser and visit http://localhost:3000 to see the application running.
 
-## Configuration
+## How to Contribute
 
-Code Racer requires some configuration variables to run properly. Create a .env.local file in the root directory of the project and add the following variables:
+### Working on New Features
 
-## Contribution
+If you want to work on a new feature, follow these steps.
 
-We welcome contributions from the community! If you'd like to contribute to Code Racer, please follow refer to [CONTRIBUTION.md](CONTRIBUTION.md), but we have these base guidelines:
+1. Fork the repo
+2. Clone your fork
+3. Checkout a new branch
+4. Do your work
+5. Commit
+6. Push your branch to your fork
+7. Go into github UI and create a PR from your fork & branch, and merge it into upstream MAIN
 
-- 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.
+### Pulling in changes from upstream
 
-Please ensure that your code adheres to the project's coding standards and conventions.
+You should pull in the changes that we add in daily, preferably before you checkout a new branch to do new work.
+
+1. git checkout main
+2. git pull upstream main
 
 ## License
 
@@ -100,6 +110,6 @@ A big thank you to all the developers who have helped shape Code Racer into what
 
 ## 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
+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!

docker-compose.yaml

@@ -0,0 +1,16 @@
+version: "3.9"
+services:
+  bg-db:
+    image: postgres
+    restart: always
+    container_name: code-racer-postgres
+    ports:
+      - 5432:5432
+    environment:
+      POSTGRES_PASSWORD: example
+      PGDATA: /data/postgres
+    volumes:
+      - postgres:/data/postgres
+
+volumes:
+  postgres:

docker-compose.yml

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function DashboardPage() {
+  return (
+    <div>
+      <div>Coming soon...</div>
+    </div>
+  );
+}

package-lock.json

@@ -1,22 +1,22 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Code Racer",
+  description: "Accelerating coding skills, competitive thrills!",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }

src/app/dashboard/page.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -31,26 +31,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };