Hidden Gems website

Website aimed at assisting tourists and newcomers in discovering hidden gems across Sweden.

The website needs to change the interface for the mobile version, for example, I would like to add a slider for some components, as well as SSR implementation for some sections to enhance website performance.

Project brief dedicated to SEO, accessibility, and performance module

Apply best practices to write accessible and SEO-friendly websites and optimize website performance metrics using tools such as Lighthouse.

Criteria

• Use appropriate tags and attributes to make sure the code is accessible.
• Make sure the code is SEO friendly.
• Analyze Lighthouse metrics and make sure the score is good.
• Include an SEO-friendly banner, pop-up, or announcement bar.
• Prioritize speed through coding best practices.
• Ensure mobile friendliness.

Project results

• Utilized React to create reusable and dynamic components, enhancing user experience and interaction.
• Implemented SEO strategies and performance optimizations to improve search engine visibility and enhance overall site performance.
• Conducted thorough analysis of Lighthouse scores to identify areas for improvement and ensure accessibility and SEO-friendliness.
• Final results of Lighthouse is Performance(92%), Accessibility(100%), Best Practices(100%), SEO (100%)

Tools and stack:

HTML / CSS / React.js / Bootstrap / SEO / Accessibility / Performance / Lighthouse

Project links:

Website: Visit the website

Third-party libraries:

• CSS framework Bootstrap:Bootstrap

Project Setup Instructions:

To set up this project locally, follow the steps below:

To open the website locally:

1. Clone the Repository:

   https://github.com/vsafonova/hidden-gems.git

2. Install dependencies:

   npm install

3. Running the website:

   npm run dev

4. Open website locally