elyhess / crate-1

👕 👖 📦 A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).

Crate 👕👖📦

open sourced project from Crate, with a plan to contribute to a user style survey to better user experience. This was our first time with a cross pollenated team, working with both Frontend and Backend Developers.

Contributors

• Samuel Yeo: github profile|linkedIn
• Ely Hess: github profile|linkedIn
• Jeff Kersting: github profile|linkedIn
• Cameron Aregon: github profile|linkedIn
• Kevin Hartmann: github profile|linkedIn

Project Managers

• Dione Wilson
• David Whitaker

Get monthly subscription of trendy clothes and accessories.

• API built with Node, GraphQL, Express, Sequelize (MySQL) and JWT Auth
• WebApp built with React and Redux along with Server Side Rendering (SSR) / SEO friendly
• Mobile (Android and iOS) Native App build with React Native
• Written in ES6+ using Babel + Webpack
• Designed using Adobe Experience Design. Preview it here.

Features

• User style survey - generated images to determine a users style for their subscription box
• Restake Survey from user profile

Desktop

Added Structure To code/web

code
  ├── package.json
  │
  ├── mobile (Android, iOS) : did not contribute
  │   
  │
  ├── web (example.com)
  │   ├── public
  │   ├── src
  │   │   ├── modules
  │   │   │    ├── user
  │   │   │    │    └── api
  │   │   │    │
  │   │   │    └── survey
  │   │   │         ├── list
  │   │   │         ├── item
  │   │   │         └── api
  │   │   ├── setup
  │   │   ├── ui
  │   │   └── index.js
  │   ├── storybook
  │   │
  │   └── package.json
  │
  ├── .gitignore
  └── README.md

Added Structure To code/api

code
  ├── api (api.example.com)
  │   ├── public
  │   ├── src
  │   │   ├── config
  │   │   ├── migrations
  │   │   ├── modules
  │   │   ├── seeders
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   └── package.json
  │
  │
  ├── .gitignore
  └── README.md

Setup and Running

• Prerequisites
  • Node
  • MySQL (or Postgres / Sqlite / MSSQL)
• Clone repo git clone [email protected]:atulmy/crate.git crate
• Switch to code directory cd code
• Configurations
  • ADD /api/src/config/database.json for database credentials

Add This To You Database.JSON file

{ "development": { "username": {your user name here}, "password": null, "database": "crate", "host": "127.0.0.1", "dialect": "postgres", "seederStorage": "sequelize" }, "production": { "username": {your user name here}, "password": null, "database": "crate", "host": "127.0.0.1", "dialect": "postgresql", "seederStorage": "sequelize" } }

• Modify /api/.env for PORT (optional)
• Modify /web/.env for PORT / API URL (optional)
• Modify /mobile/src/setup/config.json for API URL (tip: use ifconfig to get your local IP address)
• Setup
  • API: Install packages and database setup (migrations and seed) cd api and npm run setup
  • Webapp: Install packages cd web and npm install
  • Mobile:
    1. Install packages cd mobile and npm install
    2. Install iOS dependencies cd mobile/ios pod 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
  • Run API cd api and npm run start:prod, creates an optimized build in build directory and runs the server
  • Run Webapp cd web and npm run start:prod, creates an optimized build in build directory and runs the server

Challenges & Wins

Challenges

• Getting to know FE File Structure and Existing Naming Conventions This was something proven to be rather confusing for the Frontend team. Although we took the time to plan and study the file structure, naming conventions became rather confusing from the existing repository.
• Jumping into an existing codebase in an unfamiliar language For the Backend team, going from an opinionated framework such as Ruby on Rails to Node/Express held some initial challenges. The learning curve was somewhat high initially due to figuring out what the framework DOES NOT do for us. After taking notes as to what we have to code manually(setup, teardown, explicit import/exports, etc), we thrived and delivered.
• Setting up GraphQL for the first time GraphQL took a few days for both teams to become proficient enough to maneuver. Exploratory time was necessary as GraphQL is essentially another language itself. From getting to know the preferred POST request to refactoring a single schema file into a type, model, query, mutation, and resolver file all held their own challenges. Testing GraphQL was unfamiliar also, along with utilizing Jest and Supertest.

Wins/Reflections

• Working as a full cross poll team, and enjoying our team environment
• Organization, Planning, Communication: Workflow was smooth, communication was strong, documents were shared! Everyone was ready to help each other out and eager to learn from one another. Our planning was thourough and set us up for a really smooth, successful project.
• We delivered We completed a feature from start to finish while jumping into unfamiliar waters. The knowledge we knew previous to this project held relevance to our tasks. We were as resourceful as could be in order to succeed.

Appreciation

• Huge shout out to everyone that contributed!