Crate 👕👖📦

A Full-Stack Project by:

Bret Merritt,

Daniel Lessenden,

Hashim Gari,

Logan Riffel,

Matthew Lane,

and Michael Walker

Contents

1. Technologies
2. Overview
3. Setup
4. multi Package Automation
5. Design
6. Evolution
7. Challenges
8. Successes

Technologies

• Javascript
• React
• Redux
• Node
• Express
• Postgress
• GraphQL
• Sequelize (MySQL)
• Jest
• Axios
• Server Side Rendering
• Git
• Written in ES6+ using Babel + Webpack

Back to the top

Overview

This application is a full-stack project for Module 4 at Turing School of Software and Design. This repo was forked from atulmy's open source repo. Our goal was to plan, design, and implement a new feature into an unfamiliar code-base. We had 2 weeks to complete the task. The first week we spent getting to know the code-base, drawing out our data-flow, and designing wireframes. The second week we spent coding in our new feature.

Our feature was a style survey that appears for the user when they first subscribe to a monthly crate subscription. This survey is built with the intent to refine the user's subscription to best fit their personal style.

Back to the top

Setup

• Prerequisites
  • Node
  • MySQL (or Postgres / Sqlite / MSSQL)
• Clone repo git clone git@github.com:GreyMatteOr/crate.git crate
• Navigate to the code directory cd code
• Configurations
  • Modify /api/src/config/database.json for database credentials
  • "username" is "postgres" or your pg username
  • "database" is "crate"
  • "dialect" is "postgres"
• Setup
  • API: Install packages and database setup (migrations and seed) cd api and npm run setup
  • Webapp: Install packages
  • Navigate to code/web/ directory and npm install
• Development
  • Run API cd api and npm start, browse GraphiQL at http://localhost:8000/
  • Run Webapp cd web and npm start, browse webapp at http://localhost:3000/
• Production

Back to the top

Design

For our survey feature, We have two types of pages. A survey page, which is repeated several times until the survey is complete (populated with new items), and a result page.

Each survey page lists several clothing items to choose from. Each item has a style attribute associated with it that our application keeps track of. The user can select as many or as few items as they like, and after navigating through several different survey pages the "Next" button will read "View Results"

Upon clicking "View Results" The user is brought to the result page where they see their style title, and images that match that style.

Back to the top

Evolution

For this project we used a GitHub Project Board to plan out our course-of-action, as well as excalidraw.com to map out our data-flow, and wireframes to visualize our design.

Data-flow:

Wireframes:

• Survey Page

  

• Overview Page (to be added)

  

• Final Result Page

  

Back to the top

Challenges

One challenge the front-end faced was testing redux-connected components with Jest. Mocking the right redux functionality to make tests run, while also maintaining functionality that we could test proved to be quite time-consuming, but ended up being an excellent learning experience.

On the back-end, it was challenging to dive into a new code base. JavaScript was a foreign language for all of us so it took some time to become acquainted with the existing code. We believe we overcame that challenge, we met all objectives and tasks that were assigned to us and even got around to testing the pre-existing code. We went from 0% coverage at the start of the project to 80% coverage by the final code freeze. I have heard that Turing does not teach people a language but how to learn languages and I can say I fully appreciate that sentiment after this project.

Back to the top

Successes

We learned we all could become familiar with a new code-base with unknown techs in a matter of days! The necessity of understanding the ways various technologies that were implemented in order to be able to add our new feature was a great way to force us to become fluent in the code-base quickly.

The fact that Redux was previously integrated into this repo in a somewhat unconvential way made it so that we had to understand the ins and outs of Redux in order to understand the code.

Back to the top

Original Author

• Atul Yadav - GitHub · Twitter

Original Contributors

• Ebou Jobe - GitHub
• Nenad Radovanovic - GitHub · Twitter
• Nicholas Drew - GitHub
• Mateus Abdala - GitHub
• Hossein Nedaee - GitHub
• Mohammad Afzal - GitHub

License

Copyright (c) 2018 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)