File Structure

.github

Contains workflow files for Github actions and github configuration

cypress

Cypress is an End-to-End testing framework. The cypress folder contains the test files (*.spec.ts)

public

Automatically generated folder by Create-React-App to contain assets and files outside of the React scope. Contains the files for SEO validation, PWA assets, and sitemap.

src

assets

img

Pokemon images, Badge images, box wallpapers

styles

Globally used styles

svgs

SVG files, should not have any global class names

common

Components that can be reused and don't contain any business logic. Should include a *.test.tsx unit test (Made with React-Testing-Library)

components

React components. Every folder contains the following files:

*.tsx

React component file. Should contain an interface indicating the props received.

Structure:

import React from 'react';
import styles from './ComponentName.module.scss';

const ComponentName: React.FC = () => {
  return (
    <div></div>
  )
};

export default ComponentName;

*.module.scss

CSS module SASS file

elements

If the component has subelements that only pertain to that component it may have an elements folder with it's children

constants

Various constants used throughout the app, the inner constant of every file should be referenced with fully capitalized name

types.ts

Contains all the typescript types for the project

hooks

Globally used React hooks

store.ts

Zustand store - contains all actions and global app state

Different configuration files:

• .eslintrc.json - Linting
• .prettierrc - Formatting
• DockerFile - Docker
• tsconfig.json - Typescript
• cypress.json - Cypress