Boat Redesign Project

This project breathes new life into the Boat company website, introducing vibrant color schemes, layouts that seamlessly adapt to any screen size, and subtle animations. While modernizing certain aspects, it ensures the core essence of the original site remains unmistakable.

Tech Stack

Client [Front-End] :

JavaScript: The programming language used for the frontend development.

• Vite JS: A fast, opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. Powered by React, a JavaScript library for building user interfaces.

• Framer Motion: A library for creating smooth and expressive animations in React.

• React Helmet: This library empowers you to dynamically control document head elements, such as title tags, meta descriptions, and other SEO-related attributes, directly from your React

Installation & Usage

To get started with the project, follow these steps:

• Clone the repository:

 git clone https://github.com/aayushsingh7/boat-recreate.git

• Navigate to the project directory:

 cd boat-recreate

• Install dependencies using npm:

npm install

• Start the development server:

npm run dev

• Open your browser and navigate to the link given on termial to view the application.

Features

• Responsive Design: Seamlessly adapts to various screen sizes, ensuring optimal user experience across devices.

• Dynamic Color Schemes: Delightful visuals enhanced by carefully curated color palettes that enhance user engagement.

• Effortless Cart Management: Easily add or remove items from the cart, providing users with a smooth shopping experience.

• Simple User Authentication: Utilizing local storage, users can conveniently log in and register to personalize their experience and manage their accounts.

• Immersive Animations: Leveraging Framer, the interface comes to life with captivating animations, enriching user interaction and aesthetics.

• Intuitive Search and Filtering: Streamline project discovery with robust search and filtering options, empowering users to find what they need efficiently.

• Engaging Product Slider: A responsive cursor-driven slider enhances product browsing, offering an immersive and dynamic exploration experience.

Optimizations

DISCLAIMER: Both results were obtained in a production environment and within an incognito window. Please be aware that results may vary in a development environment or in a normal browser page due to external extensions.

During the creation of this project, we encountered various best practices for developing React Applications.

Upon completion of our project, we assessed the performance and other factors of our application, and the results were not as impressive as we had hoped.

Certainly, we were dissatisfied with these outcomes. Therefore, we implemented the following optimizations:

• We replaced static imports with dynamic imports (React.lazy) to limit the loading of non-essential pages, layouts, components, etc. This adjustment significantly improved the loading speed of the application.

• Additionally, we utilized React's img tag options such as loading="eager" and loading="lazy", enabling us to instantly load essential images and defer loading of images that are not immediately required (e.g., those outside the viewport).

• Furthermore, we enhanced accessibility by adding aria-label to buttons and title attributes to anchor tags.

• We also employed the preconnect option on some link tags, instructing the browser to establish early connections to specified URLs for an enhanced user experience.

• Lastly, we implemented a robots.txt file to improve SEO optimization.

After implementing these optimizations, the current performance of our application is as follows:

We are excited to see the positive impact these optimizations will have on our project's performance and user experience.

Acknowledgements

Development Team:

• Thank you to our dedicated team of developers for their hard work and commitment to excellence throughout the project.
  • Aayush Singh (Captain)
  • Srinivash R.T

Thank You😁💖