Welcome to BrazBrew, a fictional coffee shop, which prides itself on offering a unique selection of Brazilian coffee. The goal is to create a comprehensive online presence for BrazBrew that serves as a virtual extension of our physical shop.
This project was developed for the Code Institute's Diploma in Full-Stack Software Development course. Not only a showcase of a fictional coffee shop's online hub but also a reflection of the skills and knowledge I've acquired through my studies. It represents a bridge between theoretical learning and practical application, demonstrating my ability to create a functional and engaging website from scratch.
-
-
- Ease of Navigation: Users should find the website easy to navigate, allowing them to explore the drink menu, learn about BrazBrew's story, locate the shop, and get in touch with minimal effort.
- Informative and Engaging Content: The website should provide comprehensive and appealing information about the coffee offerings, including descriptions, prices, and customization options (e.g., milk and sweetener alternatives).
- Interactive and User-Friendly Contact Options: Users should be able to easily contact BrazBrew through a simple yet effective contact form, encouraging communication and feedback.
- Accessible Location Information: The website should offer detailed location information, including a map, to assist users in finding BrazBrew's physical shop. 5 . Opportunity for Engagement: Users should have the option to sign up for a newsletter, fostering a connection with BrazBrew and staying informed about updates, promotions, or events.
-
- Brand Awareness and Engagement: Through the website, BrazBrew aims to enhance its online presence, showcasing its unique selection of Brazilian coffee and the company's story to attract and retain customers.
- Customer Interaction and Feedback: The website should serve as a platform for BrazBrew to receive inquiries, feedback, and communicate directly with customers, improving customer service and satisfaction.
- Promotion and Marketing: By offering an engaging online experience and the option for users to sign up for a newsletter, BrazBrew seeks to promote its products and events more effectively.
- Analytics and Insights: The website will provide valuable insights into customer behavior and preferences, aiding in strategic planning and decision-making for future growth and development.
-
#E9D9BE: Creamy Beige, evoking the smooth texture of coffee. #AC933C: Golden Brown, reminiscent of roasted beans. #0B1611: & #0A4E2F: Deep Greens, representing the lushness of coffee plantations. #FBFBFB: Clean White, for a fresh and inviting look. #1F4634: Rich Foliage Green, symbolizing the dense Brazilian coffee regions.
Each color is chosen to create an inviting and thematic experience for our visitors, reflecting the quality and origin of our beans.
Choosing the Poppins font for the BrazBrew website enhances its modern and welcoming vibe. Its geometric design reflects professionalism, while its rounded edges convey approachability, perfectly complementing BrazBrew's brand identity as a friendly and innovative coffee shop.
-
In the process of creating my wireframe, I selected Figma as the main tool because of its outstanding abilities in visualizing projects and its importance in encouraging creativity during the design phase. This decision was crucial in making the design workflow easier and improving the overall creative quality, which greatly helped the project's development stage.
This navbar was chosen for its simplicity, functionality, and responsiveness. It prominently features the "BrazBrew" logo for brand recognition, and offers essential navigation options: "Home," "Menu," "About Us," and "Contact." These choices reflect the most important information visitors seek, ensuring a straightforward user experience.
The responsive design, indicated by the "hamburger" menu, is crucial for mobile users, adapting the site's navigation to various screen sizes without sacrificing usability. Anchor links for "Menu" and "Contact" facilitate smooth scrolling to specific page sections, improving site interaction and accessibility.
Overall, this navbar design effectively balances user needs with clean aesthetics, enhancing the website's navigability and engagement.
- Desktop
- Small devices
The hero section was chosen to immediately captivate visitors with a dynamic video background showcasing the essence of Brazilian coffee culture. It highlights "Bean to Brew: Pure Brazilian Essence" and invites users to explore "Brazil's Finest Beans" through the menu. This approach not only grabs attention but also sets the theme and quality expectation for the BrazBrew experience, encouraging further exploration with a direct call to action.
The menu section was designed to clearly showcase the wide variety of offerings at BrazBrew, organized into categories like "Coffee Specialties," "Iced Coffee," and "BrazBrew Signature" for drinks, and similar groupings for food. The use of a coffee bean icon as a visual element reinforces the theme and passion for coffee, while detailed descriptions and prices provide transparency and help customers make informed choices. This layout ensures a user-friendly experience, allowing visitors to easily browse and decide what they’d like to try.
The "Contact Us" section is designed to be welcoming and encourage communication, highlighting BrazBrew's customer-focused approach. It uses a friendly tone and a straightforward form for easy contact. This setup invites feedback and questions, showing the brand values its community. The reassurance of a prompt response after form submission enhances customer service, making visitors feel valued and heard, and strengthening the connection with the brand.
I chose to integrate a newsletter subscription with the footer navigation on my website for a streamlined and engaging user experience. My goal was to connect directly with my visitors, encouraging them to stay informed with updates and promotions via email. Including essential navigation links and information like contact details and business hours in the footer ensures everything is easily accessible, enhancing usability. This design choice supports both functional navigation and fosters a community around my brand, making the footer a valuable tool for engagement and information.
The footer of the Brazbrew Coffee House website is designed to connect and protect. It encourages visitors to follow the brand on popular social media platforms with clear icons for Facebook, Instagram, and Twitter, fostering community engagement. Below, a straightforward copyright notice marks the content as proprietary, underscoring the brand's professionalism. This compact yet impactful footer effectively extends the brand's presence and safeguards its content, wrapping up the site on a note of invitation and legal clarity.
The "About Us" page for BrazBrew is designed to connect with readers by sharing the brand's journey, emphasizing its Brazilian coffee culture, quality commitment, and community focus. It combines engaging storytelling with visuals to paint a vivid picture of what BrazBrew stands for. Highlighting initiatives like "Beans for Good" showcases the brand's dedication to social and environmental responsibility. The page aims to immerse visitors in the BrazBrew experience, inviting them to join the community through social media links in the footer, making it more than just a coffee shop, but a hub with a heart in Dublin.
I chose to create this custom 404 page to improve how my site handles missing pages. It's clear and straightforward, immediately telling visitors they've hit a dead end with a friendly "404 - Page Not Found" message. I included a bit of context to ease any frustration, explaining the page might be gone or moved. The "Back to Homepage" link is key; it gives a simple way back to familiar territory, helping to keep visitors on the site even when they wander off the path. This page turns a potential negative experience into a helpful nudge back to where they want to be.
-
W3C Markup Validation Service Both "index" and "about-us" pages have successfully passed the validation on the W3C Markup Validation Service.
-
W3C Jigsaw CSS Validation Service GPT No errors were found when validating the CSS through the W3C Jigsaw CSS Validation Service.
I used Lighthouse to test the website for performance, accessibility, best practices, and SEO.
The website is deployed using GitHub Pages - BrazBrew
To deploy the website using GitHub Pages:
- Go to your repository on GitHub.
- Click on the "Settings" tab.
- Scroll down to the "GitHub Pages" section.
- Under "Source," select "master branch" (or another branch if you're using a different one).
- Click "Save."
- Verify Deployment:
GitHub Pages will provide you with a URL where your site is published. It should be something like https://username.github.io. Open this URL in your browser to verify that your site is deployed correctly.
- Shields.io - I used Shields in my README for concise, visually appealing project status representation.
- Am I Responsive? - I used the "Am I Responsive?" website to quickly check how my web project looks on various devices, ensuring it's visually appealing and functional across different screen sizes.
- Font Awesome - I incorporated FontAwesome into my project for its vast collection of icons, enhancing the UI with scalable and visuals.
- Google Fonts - For the typography of my project, I leveraged the extensive library of Google Fonts. This allowed me to select and incorporate high-quality, web-optimized fonts, ensuring that my project's text is both visually appealing and highly readable across different devices and platforms.
- Youtube tutorial for Nav hamburger - To implement a responsive and user-friendly navigation menu, I followed a detailed YouTube tutorial that guided me through the creation of a hamburger menu. This tutorial was instrumental in helping me design a navigation system that enhances the user experience, especially on mobile devices.
- Convertio - Incorporated file conversion for PNG to WebP, improving website performance.
- Hero Section video - The engaging video content for the hero section was sourced from Pexels.
- Website Images - For visually stunning and high-resolution images throughout my project, I utilized Unsplash.
- Website Images - The favicon that enhances my project's browser tab and bookmarks presence was sourced from Icons8.
-
I want to thank my mentor, Sandeep Aggarwal, for the invaluable help with issues of my project and for reviewing my work. Your guidance made a big difference.
-
A big shout out to the Code Institute community as well. The resources and support have been incredibly helpful for my learning every day.
-
And to you reading this, thanks for taking the time. Your interest means a lot to me.
Thanks to everyone for the support and encouragement on this journey.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent