Overview

This project focuses on building a modern, responsive frontend for a fictional gym chain, demonstrating UI/UX implementation skills using React. A key feature is the integration of an interactive Yandex Map displaying club locations with attention to user experience details. It serves as a practical example of component-based UI development and third-party API integration.

Key Technologies

• Frontend: React, React Router, Tailwind CSS
• API: Yandex Maps API
• Deployment Environment: Kubernetes (K8s) on a VM

Frontend Implementation

The user interface was developed entirely with React, utilizing a component-based architecture for modularity. A central feature is the integration with the Yandex Maps API to visually represent multiple gym locations. Specific attention was given to the user experience of the map: custom logic ensures the map view automatically centers optimally to display the cluster of locations upon loading, rather than defaulting to a generic view.

The interface also includes standard sections expected of a gym website, such as designed areas for presenting membership plans and class schedules, illustrating the implementation of a typical user-facing informational structure. The frontend components are structured to potentially integrate with APIs.

Deployment

The production build of the React application was deployed to a Kubernetes cluster hosted on a virtual machine. This demonstrates familiarity with deploying frontend applications within a container orchestration environment.

Conclusion

This Gym Website project serves as a clear demonstration of frontend development capabilities using React. It highlights skills in building responsive user interfaces, integrating third-party services like mapping APIs with attention to UX details (map centering), and basic familiarity with deploying applications within a Kubernetes environment. It effectively showcases the ability to translate design concepts into functional UI components.