Create frontend structure

[Malaguth]

User Story

As a developer, I want to set up the frontend structure for a React project using TypeScript and organize it into page, feature, and component folders so that I can start building the application with a well-organized, scalable, and feature-oriented codebase.

Description

This user story focuses on the initial setup of the frontend structure for a React project using TypeScript and a specific folder structure. The goal is to create a robust and efficient development environment that promotes feature-based development and clear separation of concerns. This includes setting up the basic directory structure with page, feature, and component folders, installing necessary dependencies, and configuring TypeScript for the project.

Acceptance Criteria

1. A new repository should be created for the project.
2. The repository should be initialized with a package.json file by running pnpm create vite {my-react-app} --template react-ts.
3. A directory structure should be set up which includes at least:
   • components folder: inside src, for reusable UI elements
   • features folder: inside src, for each distinct functionality of the app
   • pages folder: inside src, for different views or screens of the app
4. Example React components for each folder type (components, features, pages) should be created using TypeScript.
5. The application should run without errors when executing the command pnpm {run dev}.
6. The project structure and setup, including the use of page, feature, and component folders, should be documented.

[Malaguth]

@jpbahiaz, could you help me define if using npm or another manager as yarn is better? Also, I think the current LTS version is the best option. Do you agree?

[jpbahiaz]

I agree. I'd suggest using pnpm as a package manager but I think we should stick with npm for simplicity.

[joaocolem]

What do you think about trying out Atomic Design for our component separation? Currently diving into the initiation process, got some gaps to fill. Open to discussions—everyone's thoughts are welcome!

[ViniciusLAAraujo]

Technical Debt:

Points discussed in the issue validation

• Internationalization
• Create a developer guide for the frontend. (update folder-structure.md)
• Update C4model with the new frontend structure.
• Replace Jest with vitest (look into the react testing library 1rst,how to use it with vitest).
• Remove "index" files and rename files to "comp", "styles", "types", "enums", and export default in each.
• Add theme file