React Templates & Themes Logo React Templates & Themes
Crate screenshot

Crate

Author Avatar Theme by Atulmy
Updated: 9 Feb 2025
2431 Stars

A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Allows users to get monthly subscription of trendy clothes and accessories.

Github

Categories

Express React native

Overview:

CrateCrate is a monthly subscription service providing trendy clothes and accessories through a Node API built with technologies like GraphQL, Express, Sequelize, and JWT Auth. The platform includes a WebApp built with React and Redux, a Mobile Native App for Android and iOS using React Native, and employs server-side rendering for SEO friendliness. It is written in ES6+ using tools like Babel and Webpack and designed with Adobe Experience Design.

Features:

  • Modular and easily scalable code structure
  • UI components in a separate folder for easy swapping with other UI frameworks
  • Responsive UI for React Native supporting Mobile and Tablet
  • GraphQL schema with associations
  • User authentication using JSON Web Tokens with GraphQL API
  • File upload feature with GraphQL
  • Server-side rendering
  • Multi-package setup and dev scripts for an automated development experience

Installation:

  1. Prerequisites:

    • Node
    • MySQL (or Postgres / Sqlite / MSSQL)

  2. Clone Repository:

    • git clone git@github.com:atulmy/crate.git crate

  3. Configuration:

    • Modify configurations in various files for database credentials, ports, and API URLs as needed.

  4. Setup:

    • API: Install packages and database setup by cd api and npm run setup
    • Webapp: Install packages by cd web and npm install
    • Mobile: Install packages by cd mobile and npm install

  5. Development:

    • Run API with cd api and npm start
    • Run Webapp with cd web and npm start
    • Run Mobile for iOS with cd mobile and npx react-native run-ios, and for Android with cd mobile and npx react-native run-android

  6. Production:

    • Run API in production mode with cd api and npm run start:prod
    • Run Webapp in production mode with cd web and npm run start:prod

  7. Multi-package Automation:

    • New developers can use a single command npm run setup to set up API, Webapp, and Mobile for faster setup.

Summary:

CrateCrate offers a subscription service for trendy clothes and accessories with a comprehensive tech stack utilizing Node, GraphQL, React, Redux, React Native, and more. Its modular code structure, emphasis on developer experience, and support for various UI components and devices make it an excellent choice for developers exploring React, React Native, and GraphQL projects. The setup process is straightforward, and the platform provides a solid foundation for scalable web and mobile applications.