Coverdle

Note: This project is a technical demonstration showcasing the integration of Convex, Vue.js with the Composition API, and Auth0 as authorization service.

Coverdle is a web-based word-guessing game inspired by Wordle. Players can participate in daily challenges or engage in real-time duels with friends.

Core Features

Tech Stack

• Frontend:
  • Vue.js 3 with Vite
  • Composition API
  • Pinia for state management
  • Tailwind CSS for styling
• Backend:
  • Convex for the backend database and serverless functions and cron functionality.
• Authentication:
  • Auth0
• Testing:
  • Cypress for End-to-End testing.
  • Vitest for unit testing

Getting Started

Prerequisites

• Node.js (v22 or later)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/Oskarowski/coverdle
   cd coverdle

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root of the project and add the following variables. You can use the .env.example file as a template.

   # Deployment used by `npx convex dev`
   CONVEX_DEPLOYMENT=dev:your-deployment-name
   VITE_CONVEX_URL=https://your-convex-url.convex.cloud
   
   # Auth0 configuration
   VITE_AUTH0_DOMAIN=your-auth0-domain
   VITE_AUTH0_CLIENT_ID=your-auth0-client-id
   VITE_AUTH0_AUDIENCE=your-auth0-audience
   

   For running Cypress tests, you'll also need to create a cypress.env.json file in the root of the project. You can use cypress.env.example.json as a template.

   {
     "AUTH0_USERNAME": "your-test-username",
     "AUTH0_PASSWORD": "your-test-password",
     "VITE_AUTH0_DOMAIN": "your-auth0-domain"
   }

Running the Development Server

1. Start the Convex backend:

   npx convex dev

2. Start the Vite frontend:

   npm run dev

   The application will be available at http://localhost:5173.

Testing

Unit Tests

Run unit tests with Vitest:

npm run test:unit

End-to-End Tests

Run End-to-End tests with Cypress:

# In development
npm run test:e2e:dev

Linting

Check for linting errors with ESLint:

npm run lint

Deployment

This project includes a Dockerfile and nginx.conf for building and serving the application with Docker.