Trendy Clothes and Accessories E-commerce Website built with React

by React

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
  • 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

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
  • Multi-package scripts
  • Sample project with combination of all above

Screenshots and GIFs

Click on image to view fullscreen and zoom

Desktop

IMAGE

Mobile

IMAGE · GIF

Tablet

IMAGE · GIF

Core Structure

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

Setup and Running

  • Prerequisites
    • Node
    • MySQL (or Postgres / Sqlite / MSSQL)
  • Clone repo git clone git@github.com:atulmy/crate.git crate
  • Switch to code directory cd 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: use ifconfig to get your local IP address)
  • Setup
    • API: Install packages and database setup (migrations and seed) cd api and npm run setup
    • Webapp: Install packages cd web and npm install
    • Mobile:
      1. Install packages cd mobile and npm install
      2. Install iOS dependencies cd mobile/ios pod install
  • Development
    • Run API cd api and npm start, browse GraphiQL at http://localhost:8000/
    • Run Webapp cd web and npm start, browse webapp at http://localhost:3000/
    • Run Mobile cd mobile and npx react-native run-ios for iOS and npx react-native run-android for Android
  • Production
    • Run API cd api and npm run start:prod, creates an optimized build in build directory and runs the server
    • Run Webapp cd web and npm run start:prod, creates an optimized build in build directory and runs the server

Multi-package automation

  • 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

Resources and Inspirations

  • ✍️ 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

Why open source a project and not a boilerplate or framework?

  • 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

Author

License

Copyright (c) 2018 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)

GitHub

View Github