meme_card_game

A small card game project where I tried the flutter_bloc package and Supabase Realtime (like Websockets but isomorphic). The game consists in the fact that the user must choose a situation (or it occurs on the server), after which the players in the conate vote for the most suitable pictures for the situation. For each vote, the user receives a point. The game is similar to the game from the real world, but transferred to the digital format. The project is not perfect, but some properties of the author in the collection of previously unknown technologies and, possibly, in the future will be significantly improved.

Content table

• meme_card_game
  • Content table
  • Getting Started
  • Used stack
  • Features
    • Global
    • Authentication
    • Home
    • Game
  • Ways of improving
  • App demonstration
    • Video demonstration
  • How to launch app
    • Supabase and auto_scripts
    • App
  • Author contacts
  • License

Getting Started

Used stack

• Supabase: Supabase is an open source Firebase alternative. It's better thanks to PostgreSQL, RPC and other useful things on the backend side. Used it like a backend;
• flutter_bloc: state management. In this project i used only Cubit.
• go_router: a declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens.
• carousel_slider: A carousel slider widget. I used for cards.
• Other: nanoid, flutter_dotenv.

Features

Global

Authentication

• Sign up;
• Sign in.

Home

• Choose create game or join;
• Log out.

Game

• Realtime game (Supabase websockets);
• Create room with game configurations;
• Join room;
• Lobby with confirmation and exists check;
• Add situations;
• Card pick;
• Voting for cards;
• Players points;
• Game ranks in finish screen.

Ways of improving

• Use environments in flutter with yaml (remove flutter_dotenv);
• Clean architecture;
• Dependency injection with flutter_bloc;
• Redesign: Player profile, Game Space;
• Game logic: timers, skip round.

App demonstration

Video demonstration

Demonstration on YouTube

How to launch app

Supabase and auto_scripts

1. Sign up to Supabase;
2. Set up Supabase with Supabase README.md;
3. Set up data in Supabase project. Get and paste data to environments from Supabase project: SUPABASE_ANNON_KEY, SUPABASE_URL. You can find environments in yaml files (.env.development.yaml) in root auto_scripts directory.

App

1. Get and paste data to environments from Supabase project: SUPABASE_ANNON_KEY, SUPABASE_URL. You can find environments in dot files (.env.development) in root flutter project.

Author contacts

Made by @yokawaiik

License

GPL