- 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.
- We are a small group (7 individuals) of Turing Students, for our current project, we were tasked with adding a style survey for users that will help them determine what their dress style is. The survey consists of a series of categories such as tops, bottoms, shoes and accessories. After I have completed the survey, I am given a summary of my style such as βclassic but edgyβ. Once the user completes the style survey, their user object will be updated with a new column of style, this will allow us to filter the results that the user receives in order to more easily present items that would fit with their style.
Front-end Team:
Back-end Team:
- Dan Halverson: GitHub | LinkedIn
- Roberto Rodriguez: GitHub | LinkedIn
- Saryn Mooney: GitHub | LinkedIn
- Alex Desjardins: GitHub | LinkedIn
- 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]:Atos20/Crate.git
- 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)
- 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
- Install iOS dependencies
cd mobile/ios
pod install
- Install packages
- 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
andnpx react-native run-ios
for iOS andnpx react-native run-android
for Android
- 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
- Testing
- back-end testing
cd code/api
npm run test
- front-end testing
- enter testing commands
- back-end testing
- 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
Copyright (c) 2018 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)