Chanda-Abdul/Grand-Street-Market

This is a solution to the Canal Street Market challenge on Frontend Practice using Angular, GSAP, Sass and BEM.

Grand Street Market

This is a solution to the Canal Street Market challenge on Frontend Practice.

Table of contents

• Overview
  • The challenge
  • Demo
• Features
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The Challenge

Code a replication of the Canal Street Market site created by Agency Zero

Users Should be able to:

• View the optimal layout for the interface depending on their device's screen size

  • Mobile @ 375px
  • Navigation with dropdown menu options
  • Tablet/Desktop @ 768px
    • Navigation with sliding vertical panels

• See animations for all animated elements on the page

  • Animate the dashed border as seen on the live website.

Demo

View live demo here

Features

Animations

• Desktop Navigation with sliding vertical panels
• Mobile Dropdown Navigation
• Animate Dashed Border On Hover
• Reveal Image on Scroll
• Animated <svg>'s

Styling

• Custom Styles

Angular/JavaScript

Desktop Navigation with sliding vertical panels

• used form input radio for desktop menu

Mobile Dropdown Navigation

• used template driven form input checkbox for mobile menu

Dashed Border On Hover

Reveal Image on Scroll

• green sock for scroll animations

Animated <svg>'s

Custom Styles

Custom Color Palette

Custom Fonts

• The original site uses Custom font "Ogg", for the display font.

  • "Ogg" is an elegant, thin lettered and distinct serif font family. Inspired by the hand lettering of 20th century book designer and calligrapher Oscar Ogg, "Ogg" captures the unique mix of calligraphic and typographic form he achieved through his use of hand carved pen nibs, brushes, and white-out.
  • I used "Tinos" as a free alternative to "Ogg".

• The original site uses Custom font "Aperçu Mono", for the body font.

  • "Aperçu Mono" is a monospaced typeface by Colophon. It’s the monospaced companion to Aperçu. This font is proof that not all monospaced fonts need to look similar—Aperçu Mono is full of unique and quirky characteristics.
  • I used "PT Mono" as a free alternative to "Aperçu Mono".
  

My Process

Built with

• Mobile
  • Drop down Navigation, using <MobileDropdownMenuComponent/>
    • Angular Template Driven Form
  • /home component
  • /food component
    • /food/:foodVendorid component
  • /retail component
    • /retail/:retailVendorid component
  • /features component
    • /feature/:id component
  • /become-a-vendor component
    • Angular Reactive Form

• Desktop
  • Vertical Slider Panel Navigation using <DesktopVerticalMenuComponent/>
    • Angular Template Driven Form

Continued development

What I learned

JSON Proxy server to store and retrieve data

During development I used JSON Proxy server to store and retrieve data, which could be substituted with an express/node server and a database at a later date.

API

For production I built an API using Node and Express, hosted through Vercel, and accessed the API with RapidAPI.

API Endpoints

• /food - returns list of FOODVENDORS
• /food/:vendorId - returns a vendor from the FOODVENDORS list by :vendorId
• /retail - returns list of RETAILVENDORS
• /retail/:vendorId - return a vendor from the RETAILVENDORS listby :vendorId
• /community - returns list of the
  • 4 most recent events
  • 4 FOODVENDORS and RETAILVENDORS with featureInfo
  • 3 podcasts from PODCASTLIST
• /radio - returns list of PODCASTLIST
• /events - returns a list of events

Useful resources

• ScrollTrigger in Angular - GreenSock Animation ScrollTrigger in Angular
• Vertical Panels - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
• On Scroll Header - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• How to use radio buttons in Angular

Author

• Portfolio - Portfolio
• GitHub - github.com/Chanda-Abdul