Dayanne xavier

[DayXL]

No description provided.

[ZauJulio]

CRR: Code Review Report - Dayanne Xavier

Summary

• CRR: Code Review Report - Dayanne Xavier
  • Summary
  • General Observations
  • Project Structure
  • Documentation
  • Tools and Technologies
  • Code Quality and Best Practices
  • UI/UX

General Observations

• The project demonstrates a understanding of React and GraphQL.
• Weaknesses in project structure, language type, and documentation were identified.
• Opportunities for improvement in code quality and best practices were noted.
• Note (0/10): The review is based on the provided codebase and may not cover all aspects of the project.
  • Score: 6.5/10

Project Structure

• Root directory is recreated with a subdirectory named my-app, which may lead to confusion.

  • Consider placing files directly in the root or using a more descriptive subdirectory name.

• On my-app directory:

  • env file (graphql.env.example):

    • Isn't hidden by default, which may expose sensitive information.
      • Consider renaming to .env.example to follow conventions.
    • Isn't with a proper example format.
      • Consider renaming to .env.example and providing placeholder values.
    • Isn't a plain text file, it's a js coded.
      • Ensure it's a plain text file to avoid compatibility issues.

  • Multiple dependency lock files (pnpm-lock.yaml and package-lock.json):

    • Having both can lead to inconsistencies in dependency management.
      • Choose one package manager (Pnpm or npm) and remove the other file.

• Import aliasing isn't configured:

  • Consider setting up import aliasing for cleaner and more manageable import statements.

• Git hooks and semantic commit messages aren't configured:

  • Implement tools like Husky and Commitlint to enforce commit message standards and improve collaboration.

• public/:

  • Contains standard files like vite.svg. index.html aren't present.
    • Ensure the index.html file is included for best practices.

Documentation

• README.md:
  • Lacks detailed information about the project, setup instructions, and usage guidelines.
    • Consider expanding the README to include these details for better developer onboarding.
  • Installation and Usage is pointing to npm instead of pnpm?
    • Update instructions to reflect the chosen package manager.
  • Instructions for environment variables are wrong.
    • The requested file is graphql.env, but the README mentions .env.
      • Correct the instructions to match the actual file name.

Tools and Technologies

• Linter and Formatter Configuration:

  • Usage of eslint is good for maintaining code quality, but tools like Biome could be considered for a more modern approach.
    • Evaluate if Biome meets the project's needs better than eslint.

• General:

  • Global project aren't write in TypeScript.
    • Consider converting to TypeScript for improved type safety and maintainability.
  • CSS:
    • Consider using a Nested CSS on all styles, that would improve the organization of styles.
    • Consider using CSS Variables for better theming and maintainability.

Code Quality and Best Practices

• components/:

  • components/searchForm/index.jsx:

    • Typo in button type attribute ("submmit" instead of "submit").
      • Correct the typo to ensure proper form submission behavior.

  • components/table/index.jsx:

    • Formatting issues with JSX tags.
      • Ensure proper indentation and formatting for better readability.

  • components/bodyHome/index.jsx:

    • Prefer using inline components instead of defining them.
      • Refactor to define components inside of the target component for clarity.

  • constants/*.js:

    • This pattern isn't good:
      • Consider using a text constant of html content instead of JSX for better separation of concerns.

• services/:

  • It's really good to have used graphql for data fetching.

• App.jsx:

  • Consider using a separate file for routing configuration to improve maintainability, but it's acceptable for small projects.

UI/UX

• The UI is functional but could benefit from improved styling and responsiveness.
  • Consider using a CSS responsive methodology like Flexbox or Grid for better layout management.
• Borders, margins, and paddings could be more consistent across components.
  • Review and standardize spacing to enhance visual coherence.
• Consider adding a design system or style guide to maintain consistency in UI elements.

[ZauJulio]

@buguno @LucasErthal

Please review and add an emoji to agree or add your opinions about the project.

[LucasErthal]

src/pages/index.jsx
this file is the HomePage, keep pages/components on their own folder or rename the file property if it dont need a folder, for example, the path should be src/pages/home/index.jsx or, if it dont haver other files like css, src/pages/home.jsx.

src/pages/user/index.jsx

on useState, try to keep value and setState fields with same name, in that case, userValue and setUserValue, its not a big deal but help a lot on maintenance

The current workaround is: search for github user by name on HomePage -> execute the complete query -> if user exists, send the user payload on route state to show on UserPage

for this project this approach works just fine, but a better approach is make a search as list on homepage, getting basic information from each user, and then when select a user, send the id to the UserPage where it will be used to get the complete user information