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

• As an unauthenticated or authenticated user, I can see and search for products in the store.
• As an unauthenticated user, I can create an account or sign in.
• As an unauthenticated user, I can request to reset my account password.
• As an authenticated user, I can create products I want to sell through the store.
• As an authenticated user, I can update product details such as title and description.
• As an authenticated user, I can add selections to a product.
• As an authenticated user, I can update product selection details such as price and quantity.
• As an authenticated user, I can delete a product I have created in the store.
• 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.
• As an authenticated user, I can view current/previous orders I have made.
• 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

# ./server/.env
NODE_ENV=development
APP_SECRET=my-super-secret
HOST=http://localhost
PORT=4242
DEV_CLIENT_URL=http://localhost:7272
PROD_CLIENT_URL=
PROD_SERVER_URL=
CLOUDINARY_API_KEY=
CLOUDINARY_PRESET=nextstore
CLOUDINARY_SECRET=
PRISMA_DEV_ENDPOINT=
PRISMA_PROD_ENDPOINT=
PRISMA_SECRET=
PRISMA_MANAGEMENT_API_SECRET=
STRIPE_SECRET=
MAILTRAP_HOST=
MAILTRAP_PORT=
MAILTRAP_USER=
MAILTRAP_PASS=
POSTMARK_HOST=
POSTMARK_PORT=
POSTMARK_USER=
POSTMARK_PASS=

# ./server/
$ npm install -g prisma
$ prisma login

# ./server/
$ prisma init
# ? Set up a new Prisma server or deploy to an existing server?
> Demo server
# ? Choose the region of your demo server
# (for me it was 'answart/demo-us1')
> PRISMA-WORKSPACE/PRISMA-SERVER
# ? Choose a name for your service
> next-store-dev
# ? Choose a name for your stage (dev)
> dev
# ? Select the programming language for the generated Prisma client
> Don\'t generate

$ npm run deploy:dev

Client setup

Install dependencies

# ./client/
$ npm install

# ./client/config.js
# ...
export const PROD_SERVER_URL = 'PUTHERE';
export const CLOUDINARY_API_KEY = 'PUTHERE';
export const CLOUDINARY_PRESET = 'PUTHERE';
export const CLOUDINARY_SECRET = 'PUTHERE';
export const STRIPE_API_KEY = 'PUBLISHABLE-KEY-FROM-STRIPE';
# ...

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