Guide of Beers 🍻

🚀 Project Overview

Guide of Beers is a modern, responsive web application designed for beer enthusiasts who want to explore detailed, organized information about breweries, beer styles, and related data.

The project allows users to:

• Browse organized lists of breweries and individual beer styles.
• Access full style descriptions and see beers offered by each brewery.

Its primary value lies in delivering a clean, accessible, and highly usable interface across desktop, tablet, and mobile devices, ensuring a seamless browsing experience for all users.

🤔 About The Project

This project was developed as part of my ongoing journey transitioning into front-end development after several years working in the digital sector.

It was created as a key deliverable for the Formação.DEV program, where I’m currently studying full-time to deepen my technical skills and build a strong, practical portfolio.

The main goal of this project was to apply and strengthen my knowledge of React, SvelteKit, and TailwindCSS, with a specific focus on robust responsive design principles and accessibility requirements. This iteration demonstrates a significant upgrade in handling various screen sizes, including the implementation of a versatile mobile navigation (sidebar drawer/hamburger menu).

With a background in web development (WordPress), technical SEO, and digital project management, I combine fresh technical skills with a solid understanding of how design, functionality, and performance work together in real-world web environments.

Key takeaways from this project:

• Successfully implemented a fully responsive architecture (desktop menu vs. mobile hamburger/sidebar).
• Addressed and implemented Svelte accessibility requirements for improved usability.
• Reinforced proficiency in SvelteKit component lifecycle and Tailwind CSS for rapid UI development.
• Continued building a portfolio that reflects both dedicated learning and technical evolution.

✨ Key Features

• Fully Responsive Design: Optimized layout for desktop, tablet, and mobile viewing.
• Intuitive Navigation: Dedicated sidebar menu for desktop and a touch-friendly hamburger menu/drawer for smaller screens.
• Detailed Search: Fast and efficient filtering for breweries and beer styles.
• Structured Data Display: Clear presentation of brewery information and associated beer styles.
• Accessibility Focus: Developed with attention to Svelte's accessibility best practices.

🛠️ Tech Stack

🖥️ How to Run Locally

To get a local copy up and running, follow these simple steps.

Prerequisites

You will need Node.js and npm installed on your machine.

1. Clone the repository:

git clone https://github.com/ferdsleite/guide-of-beers-responsive-web-app.git

2. Navigate to the project folder:

cd guide-of-beers

3. Install dependencies:

npm install

4. Run the project:

npm run dev

The application will typically be available at http://localhost:5173.

⭐ How to Use the Project

The application is straightforward to use:

1. Browse: Use the navigation menu (fixed sidebar on desktop, hamburger icon on mobile) to view the list of Breweries or Styles.
2. Explore: Click on any item (brewery or style) to view its specific, detailed information.

⚙️ Tech Stack

📦 Main Dependencies

• Tabler Icons
• Marked
• TailwindCSS Typography

(Check the package.json file for the complete and up-to-date list.)

💎 Helpful Links

• Svelte Documentation

🧑🏻‍💻 Preview

• 🔗 Live Demo: Guide of Beers - Project Deploy
• 🔗 GitHub Repo: https://github.com/ferdsleite/guide-of-beers-responsive-web-app

🤗 Connect with me

You can get in touch with me on:

Created by Fernanda Leite with 🩶 and Svelte, showcasing a transition to modern web development.