Shoe Store

Table of Contents

• Project Description
• Features
• Getting Started
  • Prerequisites
  • Setup
  • Running Locally
  • Docker Deployment
  • AWS Infrastructure Setup
  • Database Seeding
  • Example GraphQL Queries and Mutations
• Technologies
• Roadmap
• License
• Author

Project Description

This project is a full-stack web application for managing a shoe store. It includes a backend built using AWS services (AppSync, DynamoDB, S3) and a frontend built with React (Next.js) and TypeScript. The application allows users to view a list of shoes, filter them by brand, and create orders.

Features

• Display a list of shoes with filtering by brand.
• Create orders with required shipping information.
• Serverless backend using AWS AppSync and DynamoDB.
• Frontend built with React (Next.js) and TypeScript.
• Global state management for the frontend data.
• Docker support for easy deployment.

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• AWS CLI configured with appropriate permissions
• Docker

Setup

1. Clone the repository:

   git clone https://github.com/Karl-Horning/nextjs-shoe-store
   cd nextjs-shoe-store

2. Install dependencies:

   npm install

Running Locally

1. Start the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

Docker Deployment

1. Build the Docker image:

   docker build --build-arg NEXT_PUBLIC_API_URL=https://api.example.com --build-arg NEXT_PUBLIC_API_KEY=the-api-key -t shoe-store .

2. Run the Docker container:

   docker run -e NEXT_PUBLIC_API_URL=https://api.example.com -e NEXT_PUBLIC_API_KEY=the-api-key -p 3000:3000 shoe-store

AWS Infrastructure Setup

CloudFormation Template:

Ensure you have a CloudFormation template (cloudformation-template.yaml) to provision the AWS resources.

Deploy the CloudFormation stack:

aws cloudformation create-stack --stack-name shoe-store-stack --template-body file://cloudformation-template.yaml --capabilities CAPABILITY_IAM

GraphQL Schema Upload:

Before deploying the CloudFormation stack, ensure your GraphQL schema is uploaded to an S3 bucket and referenced in the CloudFormation template.

Database Seeding

To seed the database with dummy data, you can use the provided script located at src/data/seed.py. Follow these steps:

cd src/data
python seed.py

This will populate your database tables with sample shoe and order data.

Example GraphQL Queries and Mutations

• Get All Shoes:

  query getAllShoes {
    listShoes {
      items {
        ShoeId
        AvailableSizes
        Brand
        Image
        Model
        Price
      }
    }
  }

• Get Shoes by Brand:

  query getShoesByBrand($brand: String!) {
    listShoes(filter: { Brand: { eq: $brand } }) {
      items {
        ShoeId
        AvailableSizes
        Brand
        Image
        Model
        Price
      }
    }
  }

• Create Order:

  mutation createOrder($client: String!, $shoe_id: String!, $size: String!, $shipping_info: String!) {
    createOrder(client: $client, shoe_id: $shoe_id, size: $size, shipping_info: $shipping_info) {
      order_id
      client
      shoe_id
      size
      shipping_info
      shoe {
        ShoeId
        Brand
        Model
        Price
        Image
      }
    }
  }

Technologies

• Python 3.9+: Python is a programming language that lets you work quickly and integrate systems more effectively
• AWS AppSync: Connect apps to data and events with secure, serverless, and performant GraphQL and Pub/Sub APIs
• Lambda: Run code without thinking about servers or clusters
• DynamoDB: Serverless, NoSQL, fully managed database with single-digit millisecond performance at any scale
• Typescript: Typescript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale
• React: The library for web and native user interfaces
• Next.js: The React Framework for the Web
• NextUI: Beautiful, fast and modern React UI library

Roadmap

• (Complete) Create dummy data
• (Complete) Upload dummy data
• (Complete) Add instructions about automating upload of dummy data
• (Complete) Add GQL query to get list of shoes that can be filtered by brand
• (Complete) Add GQL mutation to create orders
• Generate JSON invoice file (order fields and shoe) and push it to S3 bucket
• Provide CloudFormation template or CDK script to provision the infrastructure and run the code
• (Complete) Use React to display list of shoes and allow filtering by brand from backend
• (Complete) Select shoes from list to create order (shipping info is required)
• (Complete) Implement global state to store data
• Deploy and host application from S3 bucket

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Karl Horning: GitHub | LinkedIn | CodePen | Portfolio