/Crate

Primary LanguageJavaScriptMIT LicenseMIT

Crate

Crate 👕👖📦

This project adds additional functionality to a legacy codebase. Crate is an open source project that allows users to receive monthly subscriptions for clothing and accessories based on their preferences. As a full-stack group, we were tasked with exploring the codebase and integrating new functionality that allows a user to update their profile information, view products they have purchased and returned from their monthly subscriptions and edit their subscription delivery dates.

Learning Goals

  • Develop and apply strategies for analyzing a large, existing code base
  • Explore and implement new concepts, patterns and libraries that we are unfamiliar with
  • Practice an advanced, professional git workflow on a full-stack team of seven members
  • Apply strategies for reading and evaluating documentation

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.

Contributors


In no particular order...

Ashley McDonald ashley github ashley linkedin' | LinkedIn

Eric Hale eric github eric linkedin' | LinkedIn

Tyler Fields tyler github tyler linkedin' | LinkedIn

Kathryn Jackson kj github kj linkedin' | LinkedIn

Nathaniel Millard nathaniel github nathaniel linkedin' | LinkedIn

Stacy Potten stacy github stacy linkedin' | LinkedIn

Travis McKinstry corey github corey linkedin' | LinkedIn

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

Screenshots and GIFs

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
  │
  ├── mobile (Android, iOS)
  │   ├── assets
  │   ├── src
  │   │   ├── modules
  │   │   ├── setup
  │   │   ├── ui
  │   │   └── 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
    • MySQL (or Postgres / Sqlite / MSSQL)
  • Clone repo git clone git@github.com:atulmy/crate.git crate
  • Switch to code directory cd code
  • Configurations
    • Modify /api/src/config/database.json for database credentials
    • 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/
    • Run Mobile cd mobile and npx react-native run-ios for iOS and npx react-native run-android for Android
  • 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

Multi-package automation

  • New developers are advised to run through the above 'setup and running' process before reading further.
  • Optional multi-package automation for faster setup and easier dev environment initiation.
  • No need to cd to sub-folders unless working with mobile or running a production build.
  • Once Node, MySQL, repo clone and configuration are setup correctly

Resources and Inspirations

  • ✍️ Opinionated project architecture for Full-Stack JavaScript Applications - GitHub
  • 🌈 Simple Fullstack GraphQL Application - GitHub
  • 🌐 Universal react application with server side rendering - GitHub
  • Container Components - Medium Post
  • Zero to GraphQL in 30 Minutes - YouTube
  • Building a GraphQL Server YouTube Playlist
  • Universal JavaScript Web Applications with React by Luciano Mammino - YouTube
  • Building Youtube UI in React Native in 30 Mins - YouTube
  • Building Stellar Mobile UX With React Native - YouTube
  • Free MySQL hosting https://remotemysql.com

Why open source a project and not a boilerplate or framework?

  • While building a new project with Node, you can basically start scratch, adding libraries and tools as you go on building it further.
  • Comparing with any other languague, you usually start with a framework, for example, Laravel (PHP), Django (Python) or Ruby on Rails (Ruby) which includes a ton of features and codebase which you never end up using.
  • I've personally found, learning by going through a good project codebase step by step while building your own project helps in ease of understanding and remembering

License

Copyright (c)