nodejs graphql express sequelize mysql jwt react redux ssr server-side-rendering react-native android ios seo-friendly es6 babel webpack adobe-xd web-application mobile-application

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

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 git@github.com: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
- 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

Atul Yadav - GitHub · Twitter

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 ❤️

Hire me

Looking for a developer to build your next idea or need a developer to work remotely? Get in touch: atul.12788@gmail.com

License

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

About

👕 👖 📦 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).