This Crate application is based on monthly subscriptions to crates, or types of clothing and accessories for various people.
Crate has been further developed by a team of six software engineers from Turing School of Software and Design.
Contributors:
Back-end: Angela Guardia, Cam Chery, Nico Rithner
Front-end: Blake Donnelly, Nicole Gooden, Ian Holladay
This is a brownfield application where our team of six has been tasked with implementing new features for a complex, pre-existing codebase. Details of the original README can be found below ours.
The new features pertain to improving the user experience when using the profile page:
- Allow the user to...
- add an image
- set a personal description
- edit email address
- edit shipping address
- see history of kept products
- see history of all products delivered
- see the next upcoming delivery date
- edit availability to receive orders
The front-end team has been learning and implementing Redux, Axios, and querying and mutating GraphQL data. The back-end team has been learning and implementing GraphQL, Express, and Node.
- Connecting the front-end to the back-end while learning new tech
- Developing a process to explore an existing codebase, then build new features
- Maintaining strong communication via PR conversations, detailed PRs, and atomic commits
- Balancing testing with feature implementation in a narrow window of time (5 days)
- Determining how Axios communicates with data stored by GraphQL
- Allow the user to upload images via files, rather than links for
img
elements - Add more error handling for the following situations:
- user visits an invalid path
- user adds an email address without required characters, such as
@
or.com
.
- Add more thorough testing on both the front-end and the back-end, particularly for the
History
component
Run the following commands to run BE tests:
- run
npm install
- Navigate into the api directory
- To set up the test DB run:
psql
CREATE DATABASE crate_testing;
quit
NODE_ENV=test ./node_modules/.bin/sequelize db:migrate
NODE_ENV=test ./node_modules/.bin/sequelize db:seed:all
- Run tests:
npm run test:watch
- 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.
- 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)
- 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
- 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
- โ๏ธ 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
- 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
- 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.
Copyright (c) 2018 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)