About

This is a web-app that...

The goal is to...

See it live

Demonstration

This project used:

On Components

• Props extending HTML tags and with component name as prefix
• Ref forwarding
• Arias: busy & disabled,
• Props order: "rest & ref", "arias", "props"
• ConditionalStatements & Returns section
• Maps

On Styles and Theming

• Tailwind css

As libs

• React Icons
• Tailwind Css
• Framer Motion
• Immer (and use-immer)
• Typescript
• Jest, React Testing Library, User Event and MSW (Mock Service Worker)
• Prettier and ESLint (ESLint Plugin Jest included)
• React Hook Form
• React Player

Folder Structure inside Global and Pages:

Rules

• Folders must have category names or descriptive names
• Use index files for entry points of folders
• When next to index file, other files must have category names, otherwise they can be descriptive names
• Aggregator files gather contents to export as one

Categories:

• components: holds React components
• constants: holds data that does not change
• contexts: holds React contexts
• hooks: holds React hooks
• resources: holds media files (images, vectors, videos, subtitles, music, sfx, 3d, rigs)
• styles: holds stylization files
• tests: holds test files
• types: holds type files
• utilities: holds pure functions
• animations: holds animation-related files
• services: holds request-related files
• translations: holds translation-related files

Ps: Group in folders based on functionality first, and then on categories inside these functionalities

Reference Links

• https://...