**Group Members**: Wandy T, Marsha F, Tina L
# Problem and Product
**Problem**:
* As coffee enthusiasts, we wanted to create a consolidated site for people to find great artisan coffee shops around NYC with information including name, image, location, and rating.
* We also aim to provide an interactive experience that potential users could not only filter by clicking on the dropdown for the cafe's location or the rating but also engage with click-and-expand features of each coffee shop card to see more information/recommendations that are tailored to their interests.
* In an ideal world that we have all the technical knowledge, this site could even leverage AI to create personalized recommendations.
**Link to CodePen**: https://codepen.io/tl3250/pen/jOXXKNQ
**Link to Figma**: https://www.figma.com/file/SNarcXxkcxZ5rziGuY26TA/Coffee-Shop-Recommendation?type=design&node-id=2%3A3&mode=design&t=73JunPr4XaJmtWmn-1
# How Our Code Works
**Top of the page**
1. Announcement and title - Tina
Similar to a lot of sites, we started the page with an annoucement bar and title.
```
The structure:
<p id="announcement" class="text-center mb-5">Entering the world of Coffee with us in NYC...</p>
<div class="container1">
<div class="row">
<h1 class="text-center mb-5">Coffee Review NYC</h1>
...
We made the styling consistent with the theme of this page using CSS:
#announcement {
background-color: #334226;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
font-size: 15px;
}
```
2. Navigation Bar - Wandy
We created a navigation bar to serve as a navigation tool for visitors to easily access different sections of the website. It also helps visitors find the information they are looking for quickly and easily.
```
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<!-- Menu Begin -->
<!-- Just an image -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#">
<img src="https://static.wixstatic.com/media/19be90_5862194b6a9d4d5d8a1b7a125ff3e8e7~mv2.png/v1/crop/x_0,y_14,w_2377,h_2454/fill/w_566,h_560,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Cup%20of%20Coffee_edited.png" width="30" height="30" alt="">
</a>
</nav>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav me-auto mb-2">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bsBasics">Top Rated</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bsMore">Promotion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bsTinker">Contact Us</a>
</li>
</ul>
<!-- Menu End -->
<!-- Search Begin -->
<form class="d-flex" role="search">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search" id="search-bar">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-primary" type="submit">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Navbar End -->
```
* **Challenging part**: Once the navigation bar was established, we noticed that the search bar was not properly aligned with both the navigation bar and the sign-up button. Additionally, the search bar appeared larger in size compared to the sign-up bar. To rectify this, we applied a CSS style to resize the search bar, making it smaller and ensuring proper alignment with both the navigation bar and the sign-up button.
```
#search-bar {
height: 40px;
}
```
3. Embedded video loop as a banner - Wandy
We have incorporated a video at the top of the page to enhance the homepage's appeal and effectively convey the page's overarching objectives to users.
Video Source: https://www.youtube.com/watch?v=0jIeCAOkgcQ
Tutorial video: https://www.youtube.com/watch?v=UPNkOwabRDY
Website generating the code for embedding the video: https://www.classynemesis.com/projects/ytembed/
```
<div class="container2">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/0jIeCAOkgcQ?end=25&autoplay=1&mute=1&loop=1&rel=0&fs=0&color=white&controls=0&playlist=0jIeCAOkgcQ" width="560" height="315" frameborder="0"></iframe>
</div>
</div>
```
The CSS code below is employed to deactivate the pointer hover effect on the video:
```
iframe {pointer-events: none;}
```
**Main Content of the page**
1. Dropdown to filter coffee shops - Tina
We used bootstrap to create two dropdown buttons (that are consistent with the styles) that users could filter for location and rating of the coffee shops.
```
Button: <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="filter-dropdown">
Location
</button>
Dropdown list:
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Chelsea/West Village</a></li>
<li><a class="dropdown-item" href="#">Nomad/Soho</a></li>
<li><a class="dropdown-item" href="#">East Village</a></li>
<li><a class="dropdown-item" href="#">Midtown/Hell's Kitchene</a></li>
<li><a class="dropdown-item" href="#">Columbia University</a></li>
<li><a class="dropdown-item" href="#">Brooklyn</a></li>
</ul>
```
2. List of coffee shops - Tina
We used bootstrap to set up the structure of each coffee shop cards. For example, below is a structure for the Korbrick Coffee Co. We have replicated 15 cards using this structure for each distinctive coffee shop.
```
<!-- Korbrick -->
<div class="col">
<div class="card h-100" data-bs-toggle="modal" data-bs-target="#myModal">
<img src="https://dw82ptradz9jo.cloudfront.net/daylog/6203524894d75733cd3bcbb2/103f254a-3d21-4245-a4ce-3949405fa679" class="card-img-top" alt="Korbrick">
<div class="card-body">
<h6 class="card-title">Korbrick Coffee Co.</h6>
<p class="card-text">24 9th Ave, New York, NY 10014</p>
</div>
</div>
</div>
```
Then we styled these cards to make it consistent with the general look and feel of the website using CSS. For example:
```
General formatting of the card:
.card {
border-radius: 12px;
border-color: #334226;
border-width: 2px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
font-size: 12px;
margin: 5px;
}
and
/* Enlarge the card on hover- learned from ChatGPT */
.card:hover {
transform: scale(1.05); /* Increase the scale to make it 5% larger */
cursor: cursor; /* Change cursor to indicate interactivity */
opacity: 0.8; /* Reduce opacity to 70% when hovering */
}
```
3. Expanded modal when clicking on coffee shops - Marsha
We come up with the idea of **click-and-expand** where users can have detailed information in a pop-up after they clicked a coffeeshop they found interesting. *Challenging part: making the cards clickable instead of using button as trigger for modal.*
Source: [ChatGPT ](https://chat.openai.com/share/051e952b-a8ad-4d89-8c5b-de5560cb4775)
```
Code the modal before card:
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
card content goes here
</div>
</div>
</div>
Adding trigger id to the card, which are data-bs-toggle and data-bs-target:
<div class="col">
<div class="card h-100" data-bs-toggle="modal" data-bs-target="#myModal">
```
Also **Recommender System** to enrich the user-experience by giving suggestions of more coffeeshops nearby the selected region.
Source: https://jsfiddle.net/L1cs6gt5/1/
```
.card_carousel_container {
overflow: auto;
display: flex;
scroll-snap-type: x mandatory;
}
.box {
height: 250px;
width: 200px;
margin-right: 10px;
margin-left: 5px;
margin-top: 7px;
padding-left: 15px;
flex-shrink: 0;
scroll-snap-align: start;
/* Horizontally center the image */
align-items: center; /* Vertically center the image */
}
.box img {
height: 200px;
width: 200px;
border-radius: 12px;
margin-top: 0;
border: solid #334226;
object-fit: cover; /* Maintain aspect ratio and cover the entire box */
}
```
**Bottom of the page**
1. Subscribe Newsletter
We want to have a good retention with users by keeping them in the loop with news of new cafe opening, promo, and stuff.
Source: https://www.youtube.com/watch?v=VjpGlZ3CRwI
```
<div class="newsletter_wrap">
<div class="container">
<div class="newsletter_box">
<div class="row align-items-center">
<div class="col-lg-5">
<span>Subscribe Newsletter</span>
<h2>Subscribe for coffeeshop update</h2>
</div>
<div class="col-lg-7">
<form>
<div class="subscribe_form">
<input type="text" placeholder="Full Name">
</div>
<div class="col-lg-14">
<form>
<div class="subscribe_form">
<input type="text" placeholder="Email here">
<button>Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
```
2. Footer
Simple decoration for the closing like social media icons. Lesson learned: CDN version affects the syntax of the code, in this case fontawesome icons.
Source: https://www.w3resource.com/icon/font-awesome/brand-icons/codepen.php
```
<div class="social-icons">
<i class="fab fa-facebook fa_custom"></i>
<i class="fab fa-instagram fa_custom"></i>
<i class="fab fa-twitter fa_custom"></i>
<i class="fab fa-tiktok fa_custom"></i>
</footer>
```
# User Journey
1. Land on home page
2. Use navigation bar to find shortcuts or search
* click to explore different tabs
* search a particular shop using search bar
3. Watch embedded video banner
4. View list of coffee shops
* filter on location and ratings dropdown
* hover to cards with coffee shops
* click on interested coffee shops
* check more information on the coffee shop
* view similar recommendations
* click out of the detailed info popup
5. Subscribe to the website
6. Follow/track our social media
# Appendix - History of Work
**Group Members**: Marsha/Wandee/Tina
**CodePen Link**:
**9/28 First Group Meeting**
1. Set topics
* Type of learning:
* Click and expand
* Interaction
* Recommendations
* Functional design:
* We want levergae Bootstrap that we learned
* Content topic ideas:
* E-commerce/ fashion: example
* Coffee shops
* Quiz/form: interest form, what’s your preference etc.
* **We decided to combine these three brainstormed topics and do a coffee shop recommendation site with click-and-expand features to interact with audience that also includes a form at the end.**
* Started Visual design plan- Figma file
**9/30 2nd Group Meeting**
1. Finalized Figma design
2. Delegated tasks
* Majority of the function will be in the click-and expand page. (similar to view more in shopping pages)
**10/1 all coffee shops info/pics**
Chelsea/ west village
1. Korbrick Coffee Co.
Location: 24 9th Ave, New York, NY 10014
Rating: 4.4/5
Website: https://www.kobricks.com/
<img src="https://dw82ptradz9jo.cloudfront.net/daylog/6203524894d75733cd3bcbb2/103f254a-3d21-4245-a4ce-3949405fa679">
2. Foreigner NYC
Location: 64 W 21st St, New York, NY 10010
Rating: 4.5/5
Website: https://foreigner.nyc/
<img src="https://foreigner.nyc/cdn/shop/files/Foreigner-Cafe_1500x.jpg?v=1677702944">
3. Coffee Project NY
Location: 155 7th Ave, New York, NY 10011
Rating: 4.5/5
Website: https://coffeeprojectny.com
<img src="https://www.worldcoffeeportal.com/getattachment/8cca3aa5-db6e-4d8b-8891-71eb943a8b1d/cafe-location-chelsea-interior-2-1200x800.jpg.aspx?lang=en-GB&width=700&height=466">
Nomad/Soho
1. Stumptown Coffee Roasters
Location: 18 W 29th St, New York, NY 10001
Rating: 4.5/5
Website: https://www.stumptowncoffee.com
<img src="https://stumptown-content.imgix.net/1fSMAQzO5aJLaon5QH9zsq/21b06749ec6fccda378551c6280b306b/STC_Shopify_Locations_Ace_New_York_STC_Shopify_Locations_Hero1.jpg?w=1400&auto=format,compress">
2. La Cabra
Location: 284 Lafayette St, New York, NY 10012
Rating: 4.5/5
Website: https://www.lacabra.dk/pages/new-york
<img src="https://cdn.accentuate.io/85761458369/20312978522305/New_York_2022_La_Cabra_Coffee32_tiny-v1687435340678.jpg?1536x1920">
3. The Lost Draft
Location: 398 Broome St, New York, NY 10013
Rating: 4.4/5
Website: https://www.thelostdraft.com/
<img src="https://dailycoffeenews.com/wp-content/uploads/2022/09/The-Lost-Draft-NYC-coffee-bar.jpeg">
East village
1. Librae Bakery
Location: 35 Cooper Sq, New York, NY 10003
Rating: 4.6/5
Website: https://www.libraebakery.com/
<img src="https://fastly.4sqi.net/img/general/600x600/141934822_ModhaH0H7KmiH6GyVYCwfin2_AADFe2UyaEeL7Mhkic.jpg">
2. Ludlow Coffee Supply
Location: 176 Ludlow St, New York, NY 10002
Rating: 4.2/5
Website: http://www.ludlowcoffeesupply.com/
<img src="https://i.pinimg.com/originals/f8/dc/31/f8dc31b66d9b86f6e337784ece0443a2.jpg">
Midtown/ Hell’s Kitchen
1. Culture Espresso
Location: 307 W 38th St, New York, NY 10018
Rating: 4.6/5
Website: https://www.cultureespresso.com/
<img src="https://images.squarespace-cdn.com/content/v1/5d5728dc255291000172fa57/1567695613293-6FTXNH8FZG8GNKW9GHA9/2019-culture-espresso-38th-002.jpg?format=2500w">
3. Black Fox Coffee
Location: 438 W 33rd St, New York, NY 10001
Rating: 4.6/5
Website: https://blackfoxcoffee.com/
<img src="https://manhattanwestnyc.com/wp-content/uploads/2021/08/7L1A2144.jpg">
3. Partners Coffee
Location: 152 W 52nd St, New York, NY 10019
Rating: 4.6/5
Website: https://www.partnerscoffee.com/
<img src="https://www.partnerscoffee.com/cdn/shop/files/Untitled_1000_x_100_px.jpg?v=1692720216&width=1000">
Near Columbia University
1. Joe Coffee Company
Location: Pulitzer Hall, 2950 Broadway, New York, NY 10027
Rating: 3.5/5
Website: https://joecoffeecompany.com/
<img src="https://joecoffeecompany.com/wp-content/uploads/2018/08/1O0A0154-Edit-1920x1280.jpg">
2. Dear Mama
Location: 611 W 129th St, New York, NY 10027
Rating: 4.4/5
Website: http://www.dearmamacoffee.com/
<img src="https://fy2019annualreport.cufo.columbia.edu/sites/default/files/styles/cu_crop/public/content/Dear%20Mama%203.JPG?itok=ZfwTuEAP">
BK
1. Devocion
Location: 69 Grand St, Brooklyn, NY 11249
Rating: 4.6/5
Website: https://www.devocion.com/
<img src="https://www.devocion.com/cdn/shop/files/DowntownBK_Devocion_LizClayman_002_3.jpg?v=1659652393">
2. SEY Coffee
Location: 18 Grattan St, Brooklyn, NY 11206
Rating: 4.6/5
Website: https://www.seycoffee.com/
<img src="https://bklyner.com/content/images/bklyner/wp-content/uploads/2019/11/fullsizeoutput_18d.jpeg">
Sign in with Wallet
Connect another wallet