This project is a web application that showcases Marvel characters using data from the Marvel API. Users can browse characters, view details and associated comics, and mark characters as favorites. The application is built with Next.js, TypeScript, Sass, and includes unit and integration tests using Jest and React Testing Library. It also uses ESLint and Prettier for code formatting and Context API for global state management.

• Character Listing: Browse a list of Marvel characters.
• Character Detail Page: View detailed information about a character, including the comics they have appeared in.
• Favorites: Mark characters as favorites and easily access them via the header's heart icon.
• Responsive Design: The application is fully responsive and works across different devices.
• Global State Management: Handled using Context API.
• Unit and Integration Tests: Tests are written using Jest and React Testing Library.
• Code Formatting: Enforced using ESLint and Prettier.

• Installation
• Running the Application
• Project Architecture and Structure
• Technologies Used
• Testing
• Formatting and Linting
• API Integration
• License

1. Clone the repository:

   git clone https://github.com/pvelezp/marvel-app.git

2. Install the dependencies:

   npm install

   or

   yarn install

1. Start the development server:

   npm run dev

   or

   yarn dev

2. Open your browser and navigate to https://localhost:3000 to view the application.

The project follows a modular and scalable architecture with the following structure:

.
├── components            # Reusable UI components
├── context               # Context API for global state management
├── hooks                 # Custom hooks for reusable logic
├── pages                 # Next.js pages
│   ├── _app.tsx          # Custom App component
│   ├── index.tsx         # Home page
│   └── character/[id]    # Character detail pages
├── public                # Public assets such as images and icons
├── styles                # Global styles and theme settings
├── types                 # TypeScript types and interfaces
├── utils                 # Utility functions
├── .eslintrc.js          # ESLint configuration
├── .prettierrc           # Prettier configuration
├── jest.config.js        # Jest configuration
└── README.md             # Project documentation

• Context API: Used for managing global state, particularly for handling favorites functionality.
• Custom Hooks: Reusable logic is encapsulated in custom hooks (e.g., fetching data, handling accessibility).
• Component-based Architecture: Components are organized in a way that promotes reusability and maintainability.

• Next.js: React framework for building server-rendered applications.
• TypeScript: Static type checking for JavaScript.
• Sass: CSS preprocessor for styling.
• Jest: JavaScript testing framework.
• React Testing Library: Testing utilities for React components.
• ESLint: Linter for identifying and fixing problems in JavaScript/TypeScript code.
• Prettier: Code formatter for consistent code style.

1. To run the tests, use the following command:

   npm run test

   or

   yarn test

2. Tests are written using Jest and React Testing Library and are located alongside their respective components.

• ESLint: Used for linting the codebase. You can run ESLint using:

  npm run lint

• Prettier: Used for code formatting. To format your code, run:

  npm run format

  • To apply both eslint and prettier, run:

  npm run lint-and-format

Next.js provides built-in image optimization to enhance performance and user experience:

Automatic Optimization: Images are automatically resized, compressed, and served in the best format (e.g., WebP or AVIF) based on the user's device and browser. Responsive Images: The component generates different image sizes for various screen resolutions and devices. Lazy Loading: Images are lazy-loaded, meaning they only load when they enter the viewport, reducing initial load time. Blur-Up Placeholder: Displays a low-quality, blurred version of the image while the full image loads, improving perceived performance.

The application fetches data from the Marvel API.

This project is licensed under the MIT License - see the LICENSE file for details.

This README file should provide a comprehensive overview of your project and guide users through installation, usage processes.