https://github.com/atulmy/crate

JavaScript
👕 👖 📦 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 👕👖📦

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

Mobile

IMAGE · GIF

Tablet

IMAGE · GIF

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

• fullstack-graphql
• universal-react

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)