• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

Project: react-memory-game (GitHub Link)

• react-memory-game-master
  • .eslintignore
  • src
    • pages
      • Game
        • GameControlBar
          • index.tsx
          • styles.ts
        • GameWinMessage
          • index.tsx
          • styles.ts
        • index.tsx
        • IconList.ts
        • GameCards
          • index.tsx
          • styles.ts
        • useClearGameState.ts
        • styles.ts
        • types.ts
        • useCheckGameEnd.ts
        • GameContext.ts
      • App
        • index.tsx
      • DifficultyChooser
        • index.tsx
        • styles.ts
    • index.tsx
    • hooks
      • useArrayShuffle.ts
      • index.ts
      • useTypedSelector.ts
      • useTimer.ts
    • components
      • DifficultyItem
        • index.tsx
        • styles.ts
      • Card
        • index.tsx
        • styles.ts
      • AlertModal
        • index.tsx
        • styles.ts
    • styled.d.ts
    • store
      • actions
        • index.ts
        • GameConfigAction.ts
        • ThemeActions.ts
      • reducers
        • ThemeReducer.ts
        • GameConfigReducer.ts
      • index.ts
    • config
      • Difficulties.ts
      • StorageKeys.ts
      • IconLibrary.ts
    • types
      • GameConfig.ts
      • Theme.ts
    • styles
      • Global.ts
      • Theme.ts
    • react-app-env.d.ts
  • public
    • index.html
  • LICENSE
  • .editorconfig
  • README.md
  • package.json
  • .eslintrc.js
  • tsconfig.json
  • .gitignore
  • .prettierrc.js

:flower_playing_cards: React Memory Game

This is a memory game created with React, TypeScript and Styled Components.

:heart: Motivation

I want to learn TypeScript to understand more about the types used in public libraries and frameworks such as React, React Native and Axios. I also want to create my own libraries to contribute with the awesome JavaScript community.

A lot of companies are using TypeScript to build large and scalable projects, because it improves the intellisense, the documentation and prevent errors when the customers are using the software.

I strongly believe that TypeScipt is something that I need to learn in order to became a better software developer.

:bulb: TODO

• [x] Create project with create-react-app
• [x] Create folder structure
• [x] Config Eslint, Prettier and TypeSctipt
• [x] Create Global Styles
• [x] Install and create store with redux and react-redux
• [x] Setup styled-components theme provider and theme reducer
• [x] Create game menu to choose dificulty
• [x] Create control buttons (play, pause and restart)
• [x] Create game card and main layout
• [x] Create timer
• [x] Create the game logic
• [x] Create the win message modal
• [x] Make the game responsive
• [x] Switch themes

:man: Author

Luan Eduardo da Costa | Follow me on Linkedin