Skip to content

WARG8 Card Game. Front-end challenge for the Mintbean Hackathon.

Notifications You must be signed in to change notification settings

MostlyEmre/warg8

Repository files navigation

WARG8

WARG8 logo Justin Trudeau 8000

Index

Description

WARG8 alive at https://war.emre.ca

I'm a product designer turned to self-taught front-end developer.

I designed and developed this app in around 7 days for Mintbean Hiring Hackathon for Jr Web Devs.

See my portfolio at -> https://emre.la

Tech

ReactJS, TypeScript, TailwindCSS, Firebase, Adobe Photoshop, Procreate

Third-Party Libraries

React, Router, Lodash, DayJS, UUID, React, Icons

Features

  • Responsive
  • Chat Box
  • CSS cards

To Run Locally

  • Download the repo
  • Open the terminal, cd into the folder.
  • npm install
  • npm start

To Deploy

I deployed the app to Firebase automagically, deploy wherever you want but don't forget to npm run build first.

Images from the process

Let's see how the sausage is made.

Choosing the colors

These were (Jasper Red, Black, Green) the original colors I was going to go with, until I noticed that there isn't enough time to perfect the design. Plus the CMYK values depicting the selected colors didn't look as great on the screen. Image of colors

Ideation

I used Procreate to sketch the Game/Deck/Chat components. What you will see is quite ambitious. That's why I wasn't able to do it due to time restrictions. I planned to have "Doom Guy"-esque damage states, chat messages, etc. Maybe next time!

Image of Ideation