/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)