refactor: redesign the spaces card.

CONTRIBUTING.md

@@ -0,0 +1,39 @@
+# Contributing
+
+Thank you for your interest in contributing to this repository. To ensure a smooth and collaborative environment, please follow these guidelines. Before contributing, set up the project locally using the steps outlined in [README.md](./README.md).
+
+## Why these guidelines ?
+
+Our goal is to create a healthy and inclusive space for contributions. Remember that open-source contribution is a collaborative effort, not a competition.
+
+## General guidelines
+
+- Work only on one issue at a time since it will provide an opportunity for others to contribute as well.
+
+- Note that each open-source repository generally has its own guidelines, similar to these. Always read them before starting your contributions.
+
+## How to get an issue assigned
+
+- To get an issue assigned, provide a small description as to how you are planning to tackle this issue.
+
+> Ex - If the issue is about UI changes, you should create a design showing how you want it to look on the UI (make it using figma, paint, etc)
+
+- This will allow multiple contributors to discuss their approach to tackle the issue. The maintainer will then assign the issue.
+
+## After getting the issue assigned
+
+- Create your own branch instead of working directly on the main branch.
+
+- Provide feedback every 24-48 hours if an issue is assigned to you. Otherwise, it may be reassigned.
+
+- When submitting a pull request, please provide a screenshot or a screen-recording showcasing your work.
+
+## Don't while contributing
+
+- Avoid comments like "Please assign this issue to me" or "can i work on this issue ?"
+
+- Refrain from tagging the maintainer to assign issues or review pull requests.
+
+- Don't make any pull request for issues you are not assigned to. It will be closed without merging.
+
+Happy Contributing!

README.md

@@ -0,0 +1,133 @@
+<h1 align='center'>Muzer - 100xDevs</h1>
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Installation](#installation)
+  - [With Docker](#with-docker)
+  - [Without Docker](#without-docker)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [Contributors](#contributors)
+
+## Installation
+
+### With Docker
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/code100x/muzer.git
+   ```
+
+2. Navigate to the project directory:
+   ```bash
+   cd muzer
+   ```
+
+3. Create a `.env` file based on the `.env.example` file and configure everything in both the `next-app` and `ws` folders.
+
+4. Run the following command to start the application:
+   ```bash
+   docker compose --env-file ./next-app/.env --env-file ./ws/.env up -d   
+   ```
+
+### Without Docker
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/code100x/muzer.git
+   ```
+
+2. Navigate to the project directory:
+   ```bash
+   cd muzer
+   ```
+
+3. Now Install the dependencies:
+   ```bash
+   cd next-app
+   pnpm install
+   cd ..
+   cd ws 
+   pnpm install
+   ```
+4. Create a `.env` file based on the `.env.example` file and configure everything in both the `next-app` and `ws` folders.
+
+5. For postgres, you need to run the following command:
+   ```bash
+   docker run -d \
+   --name muzer-db \
+   -e POSTGRES_USER=myuser \
+   -e POSTGRES_PASSWORD=mypassword \
+   -e POSTGRES_DB=mydatabase \
+   -p 5432:5432 \
+   postgres
+   ```
+
+6. For redis, you need to run the following command:
+   ```bash
+   docker run -d \
+   --name muzer-redis \
+   -e REDIS_USERNAME=admin \
+   -e REDIS_PASSWORD=root \
+   -e REDIS_PORT=6379 \
+   -e REDIS_HOST="127.0.0.1" \
+   -e REDIS_BROWSER_STACK_PORT=8001 \
+   redis/redis-stack:latest 
+   ```
+
+7. Now do the following:
+   ```bash
+   cd next-app
+   pnpm postinstall
+   cd ..
+   cd ws 
+   pnpm postinstall
+   ```
+
+8. Run the following command to start the application:
+   ```bash
+    cd next-app
+    pnpm dev
+    cd ..
+    cd ws
+    pnpm dev
+   ```
+
+9. To access the prisma studio, run the following command:
+   ```bash
+   cd next-app
+   pnpm run prisma:studio
+   ```
+
+## Usage 
+
+1. Access the application in your browser at http://localhost:3000
+2. Access the redis stack at http://localhost:8001/redis-stack/browser
+3. Access the prisma studio at http://localhost:5555
+
+## Contributing
+
+We welcome contributions from the community! To contribute to Muzer, follow these steps:
+
+1. Fork the repository.
+
+2. Create a new branch (`git checkout -b feature/fooBar`).
+
+3. Make your changes and commit them (`git commit -am 'Add some fooBar'`).
+
+4. Push to the branch (`git push origin -u feature/fooBar`).
+
+5. Create a new Pull Request.
+
+For major changes, please open an issue first to discuss what you would like to change.
+
+Read our [contribution guidelines](./CONTRIBUTING.md) for more details.
+
+## Contributors
+
+<a href="https://github.com/code100x/muzer/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=code100x/muzer" />
+</a>
+
+If you continue to face issues, please open a GitHub issue with details about the problem you're experiencing.

docker-compose.yml

@@ -0,0 +1,107 @@
+services:
+  app:
+    container_name: muzer-docker
+    build:
+      context: ./next-app/
+      dockerfile: Dockerfile.dev
+    env_file:
+      - path: ./next-app/.env
+    ports:
+      - ${APP_PORT}:3000
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    develop:
+      watch:
+        - action: sync
+          path: ./next-app
+          target: /usr/src/app
+          ignore:
+            - node_modules/
+        - action: rebuild
+          path: ./next-app/package.json
+          target: /usr/src/app
+          ignore:
+            - node_modules/
+
+  postgres:
+    container_name: prisma-postgres
+    image: postgres:alpine
+    restart: always
+    env_file:
+      - path: ./next-app/.env
+    ports:
+      - ${POSTGRES_PORT}:5432
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  prisma-studio:
+    container_name: prisma-studio
+    image: timothyjmiller/prisma-studio:latest
+    restart: unless-stopped
+    env_file:
+      - path: ./next-app/.env
+    depends_on:
+      - app
+    ports:
+      - ${PRISMA_STUDIO_PORT}:5555
+
+  redis:
+    container_name: redis-server
+    image: redis/redis-stack:latest
+    restart: always
+    env_file:
+      - path: ./ws/.env
+    ports:
+      - ${REDIS_PORT}:6379
+      - ${REDIS_BROWSER_STACK_PORT}:8001
+    environment:
+      REDIS_ARGS: "--requirepass ${REDIS_PASSWORD} --user ${REDIS_USERNAME} on >${REDIS_PASSWORD} ~* allcommands --user default off nopass nocommands"
+    volumes:
+      - redis-data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  websockets:
+    container_name: websockets
+    restart: always
+    build:
+      context: ./ws/
+      dockerfile: Dockerfile.dev
+    env_file:
+      - path: ./ws/.env
+    ports:
+      - ${PORT}:8080
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    develop:
+      watch:
+        - action: sync
+          path: ./ws
+          target: /usr/src/app
+          ignore:
+            - node_modules/
+        - action: rebuild
+          path: ./ws/package.json
+          target: /usr/src/app
+          ignore:
+            - node_modules/
+
+volumes:
+  postgres-data:
+    external: false
+  redis-data:
+    external: false

next-app/.dockerignore

@@ -1,2 +1,4 @@
 node_modules
-.env
+.git
+.gitignore
+.env.example

next-app/.env.example

@@ -16,6 +16,8 @@ GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
 NEXTAUTH_SECRET="YOUR_NEXTAUTH_SECRET"
 NEXT_PUBLIC_SECRET="YOUR_NEXTAUTH_SECRET"
 NEXT_PUBLIC_WSS_URL="ws://localhost:3000"
+NEXT_PUBLIC_PUBLICKEY="YOUR_PUBLIC_KEY"
+NEXT_PUBLIC_SOL_PER_PAYMENT="YOUR_SOL_PER_PAYMENT"
 
 # Postgres DB
 DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres

next-app/Dockerfile.dev

@@ -2,7 +2,7 @@
 FROM node:22-alpine AS installer
 
 WORKDIR /usr/src/app
-RUN npm i pnpm -g
+RUN corepack enable pnpm
 COPY package.json pnpm-lock.yaml ./
 RUN pnpm install --frozen-lockfile --ignore-scripts
 COPY . .
@@ -12,6 +12,6 @@ RUN pnpm postinstall
 FROM node:22-alpine AS dev
 
 WORKDIR /usr/src/app
-RUN npm i pnpm -g
+RUN corepack enable pnpm
 COPY --from=installer /usr/src/app/ ./
 CMD [ "pnpm", "dev:docker" ]

next-app/app/globals.css

@@ -93,7 +93,7 @@ body,
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 }
 

next-app/app/layout.tsx

@@ -51,8 +51,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ToastContainer {...globalToastOptions} />
+      <body className={`${inter.className} bg-[#1b1934b2]`}>
+       <ToastContainer {...globalToastOptions}/>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

next-app/app/page.tsx

@@ -10,7 +10,7 @@ import { authOptions } from "@/lib/auth-options";
 
 export default async function LandingPage() {
   const session = await getServerSession(authOptions);
-  if (session?.user.id) redirect("/home");
+
 
   return (
     <div className="flex min-h-screen flex-col bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">

next-app/app/spaces/[spaceId]/page.tsx

@@ -8,6 +8,10 @@ import LoadingScreen from "@/components/LoadingScreen";
 import { useRouter } from "next/navigation";
 
 
+// Default styles that can be overridden by your app
+import '@solana/wallet-adapter-react-ui/styles.css';
+
+
 
 export default function Component({params:{spaceId}}:{params:{spaceId:string}}) {
 

next-app/components/Appbar.tsx

@@ -3,9 +3,11 @@ import { signIn, signOut, useSession } from "next-auth/react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { ThemeSwitcher } from "./ThemeSwitcher";
+import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import Link from "next/link";
 
-export function Appbar({ showThemeSwitch = true }) {
+
+export function Appbar({ showThemeSwitch = true , isSpectator=false }) {
   const session = useSession();
   const router = useRouter();
 
@@ -20,6 +22,7 @@ export function Appbar({ showThemeSwitch = true }) {
         Muzer
       </div>
       <div className="flex items-center gap-x-2">
+        {isSpectator && <WalletMultiButton/>}
         {session.data?.user && (
           <Button
             className="bg-purple-600 text-white hover:bg-purple-700"
@@ -57,6 +60,7 @@ export function Appbar({ showThemeSwitch = true }) {
             </Link>
           </div>
         )}
+
         {showThemeSwitch && <ThemeSwitcher />}
       </div>
     </div>