This project adds additional functionality to a legacy codebase. Crate is an open source project that allows users to receive monthly subscriptions for clothing and accessories based on their preferences. As a full-stack group, we were tasked with exploring the codebase and integrating new functionality that allows a user to update their profile information, view products they have purchased and returned from their monthly subscriptions and edit their subscription delivery dates.
- Develop and apply strategies for analyzing a large, existing code base
- Explore and implement new concepts, patterns and libraries that we are unfamiliar with
- Practice an advanced, professional git workflow on a full-stack team of seven members
- Apply strategies for reading and evaluating documentation
- 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.
In no particular order...
Ashley McDonald
Eric Hale
Tyler Fields
Kathryn Jackson
Nathaniel Millard
Stacy Potten
Travis McKinstry
- 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 git@github.com: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
Copyright (c)