https://api.github.com/repos/ebeecroft1/project3-Crema/contents/{+path}

crema-homepage.png

Crema is a cafe search and review website utilizing Google Maps API.

project3-Crema

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg"><h1 dir="auto"><a id="user-content-crema" class="anchor" aria-hidden="true" tabindex="-1" href="#crema"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Crema</h1>
<a target="_blank" rel="noopener noreferrer" href="images/homepage.png"><img src="images/homepage.png" alt="Crema Homepage" style="max-width: 100%;"></a>
<a href="https://crema-7a519.web.app/" rel="nofollow">Crema</a> is a cafe search website utilizing Google Maps API.
<h2 dir="auto"><a id="user-content-tech-stack" class="anchor" aria-hidden="true" tabindex="-1" href="#tech-stack"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Tech Stack</h2>
<ul dir="auto">
<li>React</li>
<li>Firebase Authentication</li>
<li>Firestore</li>
<li>Google Maps &amp; Places API</li>
<li>React-Bootstrap</li>
<li>Sass</li>
<li>Reach (Combobox)</li>
<li>Netlify</li>
</ul>
<hr>
<h1 dir="auto"><a id="user-content-introduction" class="anchor" aria-hidden="true" tabindex="-1" href="#introduction"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Introduction</h1>
This was the final solo project during my Software Engineering Immersive studies at General Assembly and was completed in roughly 8 days. For this project, I challenged myself to design a mobile first site using React and the Google Maps API. As a coffee lover, I wanted to build an homage to <a href="https://www.beanhunter.com/" rel="nofollow">Beanhunter</a> that would help users find good coffee nearby.
Firebase was chosen for the backend since I wanted to primarily focus on frontend and mobile design. Additionally, I wanted to learn as much of the Google ecosystem as I could on this project including Firebase Authentication, Firestore, and the Google Maps API.
<h2 dir="auto"><a id="user-content-process" class="anchor" aria-hidden="true" tabindex="-1" href="#process"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Process</h2>
My first step was to set up Firebase and user authentication. The documentation for Firebase is very well kept and I found I could move rather quickly through this backend set up.
Next I moved on to the React app and focused on integrating the Google Maps API. I found the tutorials by Leigh Halliday and the Google Maps team to be incredibly useful.
Once the map component was added, I set to link the map with my Firestore database so that cafes would display as custom marker. This proved to be the biggest challenge I encountered during this process and proved to be a wonderful study of async/await functions. To fully solve this problem I had to employ a ternary and map the cafes as markers once the state was set.
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{cafes.map((cafe) => (
 <Marker
 key={cafe.id}
 position={{
 lat: cafe.latitude,
 lng: cafe.longitude
 }}
 onClick = {() => {
 setSelected(cafe);
 }}
 icon = {{
 url: './coffeeicon.png',
 origin: new window.google.maps.Point(0, 0),
 anchor: new window.google.maps.Point(15, 15),
 scaledSize: new window.google.maps.Size(25, 30),
 }}
 />
))}"><pre>{cafes.map((cafe) =&gt; (
 &lt;Marker
 key={cafe.id}
 position={{
 lat: cafe.latitude,
 lng: cafe.longitude
 }}
 onClick = {() =&gt; {
 setSelected(cafe);
 }}
 icon = {{
 url: './coffeeicon.png',
 origin: new window.google.maps.Point(0, 0),
 anchor: new window.google.maps.Point(15, 15),
 scaledSize: new window.google.maps.Size(25, 30),
 }}
 /&gt;
))}</pre></div>
Following that, I introduced React-Bootstrap as the component library. This was used to assemble the responsive navbar and various forms.
<hr>
<h1 dir="auto"><a id="user-content-feature-list" class="anchor" aria-hidden="true" tabindex="-1" href="#feature-list"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Feature List</h1>
<ul dir="auto">
<li>Google Map utilizing user location and Google Places search</li>
<li>Cafe markers for Crema approved cafes</li>
<li>Individual cafe pages generated from Firestore database</li>
<li>Cafe creation form (in case your local spot is not already in Crema)</li>
<li>User login &amp; signup including Google sign in</li>
</ul>
<h2 dir="auto"><a id="user-content-screenshots" class="anchor" aria-hidden="true" tabindex="-1" href="#screenshots"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Screenshots</h2>
<a target="_blank" rel="noopener noreferrer" href="images/cafe-search.png"><img src="images/cafe-search.png" alt="Cafe Search" style="max-width: 100%;"></a>
<a target="_blank" rel="noopener noreferrer" href="images/cafe-marker.png"><img src="images/cafe-marker.png" alt="Cafe Markers" style="max-width: 100%;"></a>
<a target="_blank" rel="noopener noreferrer" href="images/cafe-view.png"><img src="images/cafe-view.png" alt="Cafe View" style="max-width: 100%;"></a>
<h2 dir="auto"><a id="user-content-future-feature-add-ons" class="anchor" aria-hidden="true" tabindex="-1" href="#future-feature-add-ons"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Future Feature Add Ons</h2>
<ul dir="auto">
<li>Reviews - create, read, update, destroy</li>
<li>Cafe ratings</li>
<li>Limiting nearby location queries with Geohashing</li>
</ul>
</article></div>