First, run the development server: to install all dependencies run

npm run install
# or
yarn install

Open http://localhost:3000 with your browser to see the result.

to start the development server run:

npm run dev
# or
yarn dev

to run the test use:

npm run test
# or
yarn test

• Collaborate with the business team to understand the requirements, objectives, and vision of the new application.
• Define the scope, goals, and deliverables of the project.
• Set up the project repository on Git and ensure it's accessible to all team members.

• Choose the modern stack for the project, as specified in the challenge, we use Next.js, React-query, Tailwind CSS, and React Testing Library.
• Evaluate and select additional libraries or tools that may be needed based on the project requirements.

• Collaborate closely with UI/UX designers to create wireframes, prototypes, and design mockups for the new home page.
• Ensure that the design is user-friendly, visually appealing, and responsive to different screen sizes.
• Develop a design system for reusability and consistency in UI components.

• Work with the back-end team to define the API requirements for fetching room data.
• Collaborate on designing the API endpoints for paginated room listings and room details.
• Discuss data formats, authentication, and error handling.

• Develop the front end using Next.js for server-side rendering, providing fast load times.
• Implement the paginated room listing feature, considering infinite scroll pagination for a seamless user experience.
• Ensure that the application performs well on low-speed internet connections by optimizing image loading and using lazy loading techniques.
• Create a smooth transition for viewing room details by selecting a room from the list.

• Organize the codebase into a clear folder structure following best practices.
• Break down the application into reusable UI components, improving maintainability.
• Ensure code simplicity, readability, and consistency throughout the project.
• Implement state management using React-query to efficiently manage API data.

• Write unit and integration tests for critical components and functionality.
• Utilize React Testing Library for testing the user interface.
• Ensure comprehensive test coverage to catch potential bugs early.

• Implement performance optimization techniques, such as code splitting, lazy loading, and caching, to enhance the user experience.
• Optimize images and other assets for faster loading.
• Conduct performance testing to identify and address bottlenecks.

• Set up a CI/CD pipeline for automated testing and deployment.
• Ensure the codebase is always in a deployable state.

• Involve the business team and subject matter experts in user acceptance testing.
• Address any feedback and make necessary adjustments.

• Deploy the application to a staging environment for final testing.
• Once the staging environment is approved, deploy the application to production.
• Monitor the application post-launch for any issues and address them promptly.

• Create comprehensive documentation, including a README for the source code.
• Document the architecture, codebase, deployment process, and any important configurations.

• Handover the project to the maintenance and support team for ongoing management and updates.
• Throughout the project, maintain open communication with all stakeholders, conduct regular status meetings, and ensure that the project aligns with the business goals and user needs.