Awesome Open Source
Awesome Open Source

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:
      1. Install packages cd mobile and npm install
      2. 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

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)


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,006)ย 
Reactjs (72,801)ย 
Nodejs (54,722)ย 
Android (41,112)ย 
Ios (19,313)ย 
Redux (13,238)ย 
Mysql (12,313)ย 
React Native (11,812)ย 
Express (11,364)ย 
Webpack (9,749)ย 
Graphql (8,278)ย 
Es6 (5,443)ย 
Jwt (3,559)ย 
Babel (3,270)ย 
Web Application (1,897)ย 
Ssr (1,654)ย 
Sequelize (1,211)ย 
Server Side Rendering (827)ย 
Adobe Xd (153)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194