/crate

👕👖📦 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).

Primary LanguageJavaScript

Crate

Crate 👕👖📦

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

  • 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
  • User authentication using JSON Web Tokens with GraphQL API
  • File upload feature with GraphQL
  • React storybook demonstrating UI components for web
  • Server side rendering

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
  • 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
  ├── 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
  │   │   └── App.js
  │   ├── storybook
  │   │
  │   └── package.json
  │
  ├── .gitignore
  └── README.md

Setup and Running

  • Clone repo git clone git@github.com:atulmy/crate.git crate
  • Switch to code directory cd code
  • API: Install packages and database setup (migrations and seed) cd api and npm run setup
  • Webapp: Install packages cd web and npm install
  • Mobile: Install packages cd mobile and npm install
  • Modify /api/src/config/database.json for database credentials
  • Modify /api/src/config/config.json for API port (optional)
  • Modify /web/.env for API URL (optional)
  • Modify /mobile/src/setup/config.json for API URL (tip: use ifconfig to get your local IP address)
  • Run API cd api and npm start, browse GraphiQL at http://localhost:3000/
  • Run Webapp cd webapp and npm start, browse webapp at http://localhost:8000/
  • Run Mobile cd mobile and npm start, browse mobile on either emulator or using Expo on your mobile phone

Inspirations

Authors

Atul Yadav - GitHub · Twitter

License

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

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