Alschn / BeerdeguFrontend

Taste craft beers and mark them in real time with your friends. Website built with Next.js and Mantine. Deployed to Vercel.

Beerdegu Frontend

         

Beerdegu is a real-time web application meant for beer tasting sessions, when you and your friends are rating every consumed beer (color, smell, taste etc.).

Backend repo: https://github.com/Alschn/Beerdegu

Tools, libraries, frameworks

• react, next - frontend framework
• mantine - UI components library
• @tabler/icons-react - icons
• @tanstack/react-query - data fetching
• zod - validating schemas
• react-infinite-scroll-component - infinite scroll
• react-use-websocket - websocket client
• react-beautiful-dnd - drag n' drop
• axios + fetch - http clients
• jsonwebtoken - decoding json web tokens
• msw, playwright-msw - mocking http requests in tests
• vitest, @vitest/ui, @vitest/coverage-c8 + @testing-library/react - unit and components tests
• @playwright/test - e2e tests
• @playwright/experimental-ct-react - components tests

Setup

Create .env file with environment variables

API_URL="http://127.0.0.1:8000"
NEXT_PUBLIC_API_URL=${API_URL}
NEXT_PUBLIC_WEBSOCKETS_URL="ws://127.0.0.1:8000/ws"

Development

Run development server

pnpm run dev

Testing

Run unit tests - vitest

pnpm test

Run e2e tests - playwright

pnpm test-e2e

Run components tests - playwright-ct

pnpm test-ct

Deployment

1. Import Git repository in Vercel dashboard
2. Add API_URL, NEXT_PUBLIC_API_URL, NEXT_PUBLIC_WEBSOCKETS_URL env variables
3. Deploy the application