How to run

Backend:

• cd graphql (first time uncomment commented lines in server.js to populate images)
• npm install
• node server.js

Frontend:

• cd fe
• npm install
• npm run dev

Concept

This repo is a quick React application showcasing different concepts related to React and Frontend development. The list of concepts is listed below:

• Grid vs Flex display styling
• Inline React CSS and file CSS
• Responsive Design
• Keyframes / basic css animations
• Modals (positioning)
• React hook lifecycle
  • useState
  • useEffect
  • useRef
• Custom Hooks
• State Management
  • Redux-toolkit
  • Context
• Config/Feature flagging
• Project Structure
• Variable naming
• REST/GraphQL API calls
• Typescript typing
• SQLite
• Node/Express
• External APIs (Unsplash)
• CORS

Pending

• Configure tests / RTL

How to play

When you run the project you are presented with 12 tiles indicating 12 different cities in the world. You have 3 attempts to guess which city that has a hidden prize (a trip to that destination - a blatant lie).
When you correctly guess the city you also have to select which country that city belongs to, and then you can claim the prize (also a lie, you get redirected to a Youtube search of that city).