🗳️ Votemate - real-time voting application

Tech Stack	Features	Getting started	Flow	App Preview	Design	Packages	Scripts

🔧 Tech Stack

💡 Features

• Realtime voting system
• Passwordless magic link authentication
• Private pools [ in development ]
• Voting data visualistation
• Responsive design
• Time-limited pools
• Guests can vote as well, and it is protected to ensure users can vote only once for particular answers
• User-friendly interface for creating and managing pools
• Anonymous voting to protect user privacy

🚀 Getting Started

⚠️ Prerequisites

Ensure you have Docker 🐳 installed on your machine, as it is necessary for creating a MySQL server instance.

Additionally, you need to provide valid values for environment variables. Two environment files, .env and .env.test, are required and these are located inside the apps/server directory.

⚙️ Setup

1. Install dependencies: Run the following command to install the necessary dependencies:

   pnpm install
   

2. Launch Docker container: The following command creates a MySQL server instance:

   pnpm run db:up
   

3. Generate and push Prisma schema: The following command is necessary for setting up the database:

   pnpm run prisma:gp
   

4. Generate and push test Prisma schema: Execute the following command to setup the testing database:

   pnpm run prisma:gp:test
   

5. Start the server: Finally, run the following command to start the server:

   pnpm start
   

You should now have the Votemate server up and running locally on your machine.

📊 Flow

graph TB;

subgraph Application Layer
    apps((Apps)) 
    turborepo((Turborepo)) --> apps;
end

subgraph DevOps
    devops((DevOps)) --> server[Server];
    Docker --> devops;
    circleci[CircleCI] --> devops;
    apps --> devops;
end

subgraph Database
    db((Database)) --> server;
    mysql[MySQL] --> db;
    prisma[Prisma] --> db;
    planetscale[Planetscale] --> db;
end

subgraph Backend
    node[Node.js] --> fastify[Fastify];
    architecture((Architecture)) --> fastify;
    fastify --> socket[Socket.io];
    cqrs[CQRS] --> architecture;
    ddd[DDD / Clean Architecture] --> architecture;
    dependency[Dependency Injection] --> inversify[Inversify];
    inversify --> architecture;
    jwt[JWT] --> authorization((Authorization));
    authorization --> server;
    apps --> node;
end

subgraph Frontend
    apps --> web[Web];
    vite[Vite] --> react[React];
    react --> web;
    web --> redux[Redux];
    web --> reactquery[React Query];
    web --> tailwind[TailwindCSS];
    socket[Socket.io] --> web;
end

subgraph Testing
    Vitest[Vitest]
    unit[Unit Tests] --> Vitest;
    integration[Integration Tests] --> Vitest;
    e2e[E2E Tests] --> Vitest;
    apps --> Vitest;
end

Loading

📺 App demonstration

🎨 Design

The user interface and visual design of Votemate have been created using Figma. You can view the design by clicking the link below:

Figma Design

Feel free to explore the design to get an overview of the app's layout, color scheme, and other visual elements.

📦 Custom local packages

@votemate/tsconfig	@votemate/eslint-config
shared tsconfig config	shared eslint config

📜 Scripts

Command Name	Description	Type
start	Start the server in production mode	Server, Global
dev	Start the server in development mode	Server, Web, Global
lint	Lint the code	Server, Web, Global
lint:fix	Fix linting issues	Server, Web, Global
ts:check	Check TypeScript code	Server, Web, Global
check	Run lint and ts:check	Server, Web, Global
test:unit	Run unit tests	Server
test:integration	Run integration tests	Server
test:e2e	Run end-to-end tests	Server
test:all	Run all tests	Server
build	Build the project	Server, Web, Global
prisma	Generate Prisma client	Server, Global
prisma:push	Push Prisma schema changes	Server, Global
prisma:studio	Start Prisma Studio	Server, Global
prisma:gp	Generate and push Prisma schema	Server, Global
prisma:gp:test	Generate and push test Prisma schema	Server, Global
db:up	Launch Docker container with MySQL server instance	Server, Global
db:down	Stop and remove Docker container with MySQL server instance	Server, Global
test:coverage	Shows test coverage for server	Server, Global