---

Table of Contents

• Summary
• Technologies
• Features And Functionality
• Challenges
• Future Development
• File Architecture
• Click here to visit the site!

---

Summary

This is a promotional application for Bullring Birmingham's Annual Autumn Fashion Fix Event. Users are able to view the "social wall" to discover latests trends and relevant social media posts from Twitter and Instagram.

---

Technologies

Design Tools:

• Adobe Illustrator
• Adobe Photoshop

Development Tools:

• Framework: Material UI
• React
• Axios
• linkifyjs
• React-responsive-carousel
• react-masonry-css
• react-swipeable-views
• react-moment
• Express
• Path
• Node
• if-env
• Concurrently
• Git
• Heroku (Heroku build)

---

Features And Functionality

• Responsive design to accommodate any screen width (mobile, tablet, desktop, etc.) These images were generated by using a mobile emulator.

• Filter post types to display specific information (View All, Manual, Twitter, Instagram)

• Open links in a new window

• Load more posts

• Loading Site: React, { Lazy, Suspense } - displays a CSS loading annimation to provide user feedback while the site loads. This feature was tested by reducing the network speed in the Chrome Browser extension.

---

Challenges

1. Heroku / Git Hub: When the application was initially created everything was running great locally, but the Client folder wasn't pushing to Git Hub. The client folder had accidently become a git submodule which prevented the application from deploying.

2. Masonry Layout: It took some time getting used to the Masonry style layout and identifying breakpoint to accommodate mobile responsiveness.

3. Date Sorting: When I initially created the date sorting function to filter posts from newest to oldest I forgot to parse the data from the API. Once that was fixed I ran into another issue, in some browsers the date sorting function was not rendering correctly.

---

Future Development

1. W3 MobileOk Checker: Improve/investigate solutions for the identified alerts below:

2. Tab Configuration: Right now the navbar to filter post types does not fully meet accessibility guidelines. The component can be accessed by tab navigation however the tabs need to be reconfigured to perform an action (select/display the desired post) on a key press.

3. Sizing: The size of the inidividual cards containing post data could be reduced for a better user experience. The slider should modified for different screen sizes, it's very small on mobile devices.

4. Lazy Loading Images: The lazy loading image functionality needs to be modified.

---

File Architecture

Click To View

     Fashion Fix
     ├── Client
     │   ├── build
     │   ├── node_modules
     │   ├── public
     │   ├── src
     │   │   ├── Assets
     |   │   │   ├── globalCss
     |   |   │   │   ├── layout.css
     |   |   │   │   ├── mediaScreens.css  
     |   |   │   │   ├── reset.css  
     |   |   │   │   └── typography.css 
     |   │   │   └── images
     |   |   │   │   ├── image_1.gif  
     |   |   │   │   ├── image_2.gif  
     |   |   │   │   └── image_3.gif
     │   │   ├── Components
     |   │   │   ├── Cards
     |   |   │   │   ├── instagram.js          
     |   |   │   │   ├── manual.js
     |   |   │   │   └── twitter.js
     |   │   │   ├── Carousel
     |   |   │   │   ├── index.js
     |   |   │   │   └── style.css
     |   │   │   ├── Footer
     |   |   │   │   └── index.js
     |   │   │   └── Loading
     |   |   │       └── index.js
     │   │   ├── Pages
     |   │   │   └── socialWall.js
     │   │   ├── utils
     |   │   │   └── API.js
     │   │   ├── App.js
     │   │   ├── App.test.js
     │   │   ├── index.js
     │   │   ├── serviceWorker.js 
     │   │   └── setupTests.js
     │   ├── .gitignore
     │   └── package.json
     ├── node_modules
     ├── routes
     ├── .gitignore
     ├── package.json
     ├── Readme.md 
     └── server.js

---

Back To Top