Next Store

:construction: WORK IN PROGRESS :construction:

An e-commerce app where a user can browse among products with which they can buy or sell. It contains a client app built in React using it's Next.js framework and GraphQL's Apollo framework. The server app uses a GraphQL Yoga server with Prisma as the database interface.

User stories

• [x] As an unauthenticated or authenticated user, I can see and search for products in the store.
• [x] As an unauthenticated user, I can create an account or sign in.
• [x] As an unauthenticated user, I can request to reset my account password.
• [x] As an authenticated user, I can create products I want to sell through the store.
• [x] As an authenticated user, I can update product details such as title and description.
• [x] As an authenticated user, I can add selections to a product.
• [x] As an authenticated user, I can update product selection details such as price and quantity.
• [x] As an authenticated user, I can delete a product I have created in the store.
• [x] As an authenticated user, I can add/remove products in the cart and come back later to access them.
• [ ] As an authenticated user, I can use a credit card to buy products in cart.
• [x] As an authenticated user, I can view current/previous orders I have made.
• [x] As an authenticated user, I can view current/previous sales where people have ordered my products.

Tech Stack and Key Packages

App Map

├──server/
│   ├──.env                Server side environment variables
│   ├──datamodel.prisma    Type definitions for server querying generated by prisma
│   ├──prisma/
│   │   ├──prisma.yml            Prisma config file
│   │   └──.graphqlconfig.yml    GraphQL config file
│   └──src/
│       ├──index.js              Server root which sets up the Prisma DB connection/querying and the GraphQL Yoga server
│       ├──mail.js               Mailtrap integration through nodemailer and Email Templates
│       ├──schema.graphql        GraphQL yoga schema with type definitions for client facing calls
│       ├──stripe.js             Stripe API connection
│       ├──utils.js              Utility methods
│       ├──generated/            Generated files from Prisma
│       │   └──prisma.graphql          Generated Prisma schema type definitions
│       └──resolvers/            Files for how server works with incoming/outgoing data
│           ├──Mutation/               Config files for updating server data
│           └──Query.js                Config file for receiving server data
└──client/
    ├──config.js           Client side config
    ├──jest.setup.js       File setup React Jest and to configure Enzyme into Jest
    ├──__test__/           Test files for pages and components
    ├──static/             Assets like logo, fonts, or extra css
    ├──lib/                Files for utility and testing
    │   ├──cloudinary.js         Cloudinary API calls
    │   ├──utils.js              Utility methods
    │   ├──init-apollo.js        Apollo client setup
    │   ├──with-apollo-client.js Integration of Apollo client with app.
    │   └──test-utils/           Graphql mocks and dummyData for test calls
    ├──graphql/            Client side graphql query/mutations
    ├──components/         Component files called by pages and styles folder
    │   └──styles/               CSS for components using the styled-components package
    └──pages/              App page files
        ├──_app.js               App root for navigating pages and persisting state between page changes
        ├──_document.js          File to implement server side rendering for css-in-js libraries
        ├──buy.js                Product page
        ├──index.js              Home page
        ├──order.js              Order page
        ├──orders.js             List page of Orders
        ├──permissions.js        User permissions page
        ├──reset.js              Reset User password page
        ├──sales.js              List page of OrderItems (Variants sold)
        ├──sell.js               Create Product page
        ├──shop.js               Products catalog page
        ├──signup.js             User signup/login page
        └──product/
            ├──edit.js               Update Product page
            ├──selections.js         Update Product's Variants page
            └──add.js                Update Product with new Variant page

Getting Started

Server setup

Install dependencies

# ./server/
$ npm install

Client setup

Install dependencies

# ./client/
$ npm install

Start App

Start server app locally

# ./server/
$ npm run start:dev

Start client app locally (in separate tab)

# ./client/
$ npm run start:dev

View app at localhost:7272 when both client and server are running.

NPM Commands