Need help with crate?
Click the โ€œchatโ€ button below for chat support from the developer who created it, or find similar developers for support.

About the developer

atulmy
2.2K Stars 477 Forks MIT License 166 Commits 0 Opened issues

Description

๐Ÿ‘• ๐Ÿ‘– ๐Ÿ“ฆ 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).

Services available

!
?

Need anything else?

Contributors list

# 5,229
JavaScr...
Express
fullsta...
Redux
150 commits
# 127,017
CSS
Babel
adobe-x...
GraphQL
1 commit
# 18,316
MongoDB
HTML
adobe-x...
GraphQL
1 commit
# 126,691
Kotlin
Babel
adobe-x...
GraphQL
1 commit
# 127,010
CSS
Babel
adobe-x...
GraphQL
1 commit
# 127,156
CSS
Babel
adobe-x...
GraphQL
1 commit
# 127,139
CSS
Babel
adobe-x...
GraphQL
1 commit
# 127,112
CSS
Babel
adobe-x...
GraphQL
1 commit

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
  • 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 [email protected]: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:
    • Install packages
      cd mobile
      and
      npm install
    • 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
    • Switch to
      code
      directory
      cd code
    • Setup
      • Setup API, Webapp and Mobile with a single command
        npm run setup
    • Development
      • Run API and Webapp
        npm start
        , browse GraphiQL at http://localhost:8000/ and Webapp at http://localhost:8000/
      • Run API alone
        npm start:api
        , browse GraphiQL at http://localhost:8000/
      • Run Webapp alone
        npm start:web
        , browse webapp at http://localhost:3000/

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

Author

Contributors

  • Ebou Jobe - GitHub
  • Nenad Radovanovic - GitHub ยท Twitter
  • Nicholas Drew - GitHub
  • Mateus Abdala - GitHub
  • Hossein Nedaee - GitHub
  • Mohammad Afzal - GitHub
  • [YOUR NAME HERE] - Feel free to contribute to the codebase by resolving any open issues, refactoring, adding new features, writing test cases or any other way to make the project better and helpful to the community. Feel free to fork and send pull requests.

Donate

If you liked this project, you can donate to support it โค๏ธ

Donate via PayPal Become a Patreon

Hire me

Looking for a developer to build your next idea or need a developer to work remotely? Get in touch: [email protected]

License

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.