Code Monkey home page Code Monkey logo

crate's Introduction

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 [email protected]: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)

crate's People

Contributors

atulmy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.