/Crate

Primary LanguageJavaScriptMIT LicenseMIT

Contributors Forks Stargazers Issues

Crate

Crate 👕👖📦


Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project

This project adds additional functionality to a legacy codebase. We will be using the open source Crate project. Crate is a platform, similar to Stitch Fix, that allows users to setup monthly subscriptions to receive trendy clothes and accessories. We will be exploring the codebase in order to add test coverage, fix bugs, and extend the current functionality. We will not focus on mobile development.

Our learning goals were to:

  • Learn and apply strategies for understanding how to analyze a larger, existing code base
  • Apply strategies for reading and evaluating documentation
  • Explore and implement new concepts, patterns, or libraries that have not been explicitly taught while at Turing
  • Practice an advanced, professional git workflow

Built With

  • 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.
  • Written in ES6+ using Babel + Webpack

Developers

Features

  • Modular and easily scalable code structure
  • Emphasis on developer experience
  • UI components in separate folder which can be swapped for your favorite UI framework easily
  • Responsive UI for React Native to support Mobile and Tablet
  • GraphQL schema with associations
  • Database migration and data seeding
  • User authentication using JSON Web Tokens with GraphQL API
  • File upload feature with GraphQL
  • React storybook demonstrating UI components for web
  • Server side rendering
  • Multi-package setup and dev scripts for an automated dev experiance

Useful for

  • Developers with basic knowledge on React exploring advance React projects
  • Developers learning React Native
  • Exploring GraphQL
  • Scalable project structure and code
  • Starter application for Mobile and Web along with SSR
  • Multi-package scripts
  • Sample project with combination of all above

Usage

Click on image to view fullscreen and zoom

Desktop

IMAGE

Crate Desktop

Mobile

IMAGE · GIF

Crate Mobile

Tablet

IMAGE · GIF

Crate Tablet

Core Structure

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

Setup and Running

  • Prerequisites

    • Node -- information can be found here
    • MySQL (or Postgres / Sqlite / MSSQL) -- information can be found here (Note: user may need to force quit and restart terminal and/or computer for success)
    • Once you have postgreSQL installed, complete the following:
    • Run psql in your terminal to access the postrgres command line interface (CLI)
    • Check your available postgres users by running \du in the postgres CLI. Your available users are listed under “Role name.” Use this user as your username in the database.json file
    • In psql, create your database with the command CREATE DATABASE crate;

  • Clone repo git clone git@github.com:KathyBui732/crate.git crate

  • Switch to code directory cd code

  • Configurations

    • Modify /api/src/config/database.json for database credentials. Possible error?
    • Modify /api/.env for PORT (optional)
    • Modify /web/.env for PORT / API URL (optional)

  • Setup

    • API: Install packages and database setup (migrations and seed) cd api``npm run setup. Possible error?
    • Webapp: Install packages cd web and npm install. Possible error?

  • Development

  • 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

Repo Origin Author Information

Acknowledgements