34
GitHub - atulmy/crate: ??? A sample web and mobile application built with Node,...
source link: https://github.com/atulmy/crate
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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
Mobile
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
directorycd code
- API: Install packages and database setup (migrations and seed)
cd api
andnpm run setup
- Webapp: Install packages
cd web
andnpm install
- Mobile: Install packages
cd mobile
andnpm 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: useifconfig
to get your local IP address) - Run API
cd api
andnpm start
, browse GraphiQL at http://localhost:3000/ - Run Webapp
cd webapp
andnpm start
, browse webapp at http://localhost:8000/ - Run Mobile
cd mobile
andnpm start
, browse mobile on either emulator or using Expo on your mobile phone
Inspirations
Authors
License
Copyright (c) 2018 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK