- 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
- 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
- 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
Click on image to view fullscreen and zoom
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
- Prerequisites
- Node
- MySQL (or Postgres / Sqlite / MSSQL)
- Clone repo
git clone [email protected]:atulmy/crate.git crate
- Switch to
code
directorycd 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: useifconfig
to get your local IP address) - Add your local IP address in:
code/mobile/android/app/src/debug/res/xml/react_native_config.xml
for Cleartext Traffic (API level 28+). Read more here.
- Modify
- Setup
- 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
- API: Install packages and database setup (migrations and seed)
- Development
- Run API
cd api
andnpm start
, browse GraphiQL at http://localhost:8000/ - Run Webapp
cd web
andnpm start
, browse webapp at http://localhost:3000/ - Run Mobile
cd mobile
andnpm start
, browse mobile on either emulator or using Expo on your mobile phone
- Run API
- Production
- Run API
cd api
andnpm run start:prod
, creates an optimized build inbuild
directory and runs the server - Run Webapp
cd web
andnpm run start:prod
, creates an optimized build inbuild
directory and runs the server
- Run API
- 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
directorycd code
- Setup
- Setup API, Webapp and Mobile with a single command
npm run setup
- Setup API, Webapp and Mobile with a single command
- 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/
- Run API and Webapp
- Switch to
- 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