Git Product home page Git Product logo

sick-fit's Introduction

Sick-Fit E-commerce

Technology Stack:

  • Hooks -New feature of React, kill the redundancy in components ๐Ÿ˜ƒ and no "life-cycle" anymore ๐ŸŒŸ๐ŸŒŸ
  • Next.js - Enable SSR and better SEO for React app ๐Ÿ‘๐Ÿ‘๐Ÿ‘
  • GraphQL -API gateway ๐Ÿ˜Š
  • Apollo - Responsible for state management, a good replacement of Redux ๐Ÿ˜
  • Prisma - Accress to Database with nodejs and typescript ๐Ÿ˜‰

How to use:

  1. First copy the repo into your disk:
$ git clone https://github.com/TingzhouJia/Sick-Fit.git
$ cd Sick-Fits/frontend
$ npm install
$ cd ../backend
$ npm install
  1. Register your account in Prisma
  2. Then you can replace original config with your own file ๐Ÿ˜‡

FRONT END

  • Setup Apollo with Nextjs
import withApllo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'
import {endpoint} from './config'

const createClient=({header})=>{
    return new ApolloClient({
        url:process.env.NODE_ENV==='development'?endpoint:endpoint,
        request:operation=>{
            operation.setContext({
                fetchOptions:{credentials:'include',},
                header
            })
        }
    })
}
export default withApllo(createClient);
import withApollo from 'next-with-apollo';
import {HttpLink,ApolloLink, ApolloClient} from '@apollo/client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import {withClientState} from 'apollo-link-state'
import { endpoint, prodEndpoint } from '../config';
import { LOCAL_STATE_QUERY } from '../components/Cart';

const cache = new InMemoryCache();

cache.writeData({data:{cartOpen:false}})
function createClient({ headers }) {
  const auth=new ApolloLink((operation,forward)=>{
    operation.setContext({
      fetchOptions: {
        credentials: 'include',
      },
      headers,
    })
    return forward(operation)
  })
  const client= new ApolloClient({
   cache,
    link: ApolloLink.from([
      auth,     
      withClientState({
        defaults:{cartOpen:false},
        resolvers: {
            Mutation: {
              toggleCart:(_, variables, { cache })=> {
              
                const { cartOpen } = cache.readQuery({
                  query: LOCAL_STATE_QUERY,
                });
                const data = {
                  data: { cartOpen: !cartOpen },
                };
                cache.writeData(data);
                return data;
              },
            }
          }
      }),
      new HttpLink({
        uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
      })
    ]),
    resolvers: {
        Mutation: {
          toggleCart:(_, variables, { cache })=> {
          
            const { cartOpen } = cache.readQuery({
              query: LOCAL_STATE_QUERY,
            });
            const data = {
              data: { cartOpen: !cartOpen },
            };
            cache.writeData(data);
            return data;
          },
        },
       
        defaults:{
          cartOpen: false,
        }
        
      }  
  });
  return client
}

export default withApollo(createClient);

BACK END

const {GraphQLServer}=require('graphql-yoga')
const Mutation=require('./resolvers/Mutation')
const Query=require('./resolvers/Query')
const db=require('./db')
const createServer=()=>{
    return new GraphQLServer({
        typeDefs:'src/schema.graphql',
        resolvers:{
            Mutation,Query
        },
        resolverValidationOptions:{
            requireResolversForResolveType:false
        },
        context:req=>({...req,db})
    })
}
const {Prisma}=require('prisma-binding')
const db=new Prisma(
   {
    typeDefs:'src/generated/prisma.graphql',
    endpoint:process.env.PRISMA_ENDPOINT,
    secret:process.env.PRISMA_SECRT,
    debug:false
   }
);
//this connect to remote prisma DB and give us ability to query it with JS
module.exports=db
  • Generate your schema with GraphQL
type SuccessMessage {
  message: String
}

type Mutation {
  createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item!
  updateItem(id:ID!, title: String, description: String, price: Int): Item!
   deleteItem(id: ID!): Item
   signup(email: String!, password: String!, name: String!): User!
   signin(email: String!, password: String!): User!
  signout: SuccessMessage
  requestReset(email: String!): SuccessMessage
  resetPassword(resetToken: String!, password: String!, confirmPassword: String!): User!
  updatePermissions(permissions: [Permission], userId: ID!): User
  addToCart(id: ID!): CartItem
  removeFromCart(id: ID!): CartItem
  createOrder(token: String!): Order!
}
type Query {
  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!
  item(where: ItemWhereUniqueInput!): Item
  itemsConnection(where: ItemWhereInput): ItemConnection!
  me: User 
   users: [User]!
  order(id: ID!): Order
  orders(orderBy: OrderOrderByInput): [Order]!
}
type User{
  id: ID!
  name: String!
  email: String!
  permissions: [Permission!]!
  cart: [CartItem!]!
  orders: [OrderItem]
}

Updated 2019/11/23

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.