abhushanaj/moiteil-store

Moiteil Swag Store created using GraphCMS, Next.js and Stitches

moiteil-store's Issues

Layout Components for Application

Tasks to be done:

• Design and create the footer component.
• Design and create the navbar component.
• Design and create the generic layout component for all pages.

Feat: Integrate with stripe

• Add a stripe to the project for the checkout experience
• Add a custom backend endpoint to handle checkout
• Request the prices from the GraphCMS based on variantId

Design and Develop the category cards for the home page

Add only 4 major categories to the list that routes to respective categories pages.

• Clothing
• Wall Art
• Accessories
• Home and Living

Model Schema and Content for categories on home page

Should contain the following:

• Name
• Image
• ctaLink

Update Readme file

• About the project
• Details about env
• Tech Stack
• Running locally

Add Basic SEO Details

• Use the App Layout to add relevant tags utilizing next/head to update the title, description, and other meta tags on each page

Refactor: CategoryBannerTile

Refactor the CategoryBannerTile styled component to be a generic Banner Tile component to be used across pages.

Should accept React.Node as children and StitchesCSS style as props

Design and develop Product CTA Marketing Banner

related to #11
Should include the following:
The content should be fetched directly from CMS.

• CTA heading
• CTA subheading
• Product Image
• CTA Link Text
• CTA Link

Develop a breadcrumb component for navigation

The component should take props of the following structure.

type BreadcrumbItem={
name: string;
path: string;
isActive:boolean
}

type Breadcrumb={
currentPath: BreadcrumbItem[];
}

Generate products mockup files from printful.com

Tasks to be done:

1. Use pritful.com to generate mockups for products belonging to the following categories: Clothing, Gifts, Accessories, Home and Living.

2. Upload the generated mockup files to GraphCMS from schema developed in #7.

3. Limit the GraphQL API endpoint from GraphCMS to perform only read actions on all content and block other requests.

Addition of Cart Page

• Create a new page at /cart which lists down all the product added to the cart.
• Display size, product name, color, and size.
• Should make use of cartContext created in #33

Feat: Add Button Component on the project

Make a button component and replace the default HTML button with it

Develop a newsletter component

• Create a newsletter component that hits the /newsletter endpoint.
• Create a /newsletter endpoint which mimics the subscription to newsletter

Create a CartProvider to wrap the whole app

Should expose a custom hooks useCart() which returns API for :

• Adding Item to cart addItemToCart()
• Clear Cart clearItemToCart()
• Remove Item from cart removeItemFromCart()

Develop the category page

Should be a dynamic route which follows: /category/[categoyType]

• Add breadcrumb component #21
• Add the newsletter component #20
• Add Products belonging to a category similar to the home page (reuse the product overview card)

Model schema for CTA banner

The schema should contain the following:

• CTA heading
• CTA subheading
• Product Image
• CTA Link Text
• CTA Link

Add products page to the application and use product variants from CMS

related to #8

• Use products variants to show more details for the product on the product page /product/[productNameSlug].
• Add carousel for images
• Selection of colors on variants
• Select size based on color and product type.
• Add other details like description etc.

Refactor: Categories Page and Types

Tasks:

• Reuse fragments created in #25 on product and image assets for categories.
• Update type with clearer names for better code readability,

Example: Change CategoryDetails to CategoryDetailsWithProducts.

closed via #28

Setup custom 404 and 500 pages on app

Tasks to be done:

• Design and add a custom 404 page.
• Design and add a custom 500 page.
  closed via #4

Model the Products in GraphCMS

Tasks to be done:

1. Schema of Products:

1. Slug: generated from product name (string)
2. Name: for a product name (string)
3. Thumbnail: for product image (asset)
4. Description: for product description (markdown enabled)
5. Category: enumeration type (clothing, gifts, accessories etc)
6. Product variants: store the different variants for a product (schema described below)

2. Schema for Product Variants:

1. Price: for the price of the product with the given variation (float)
2. Size: variant type. An example for clothing it's showing the different sizes available. (Custom Enumeration)
3. Color: An variation for the product in terms of color (color type)
4. Catalog Images: images for the product on the given variation. (asset)

Add the feature section on home page

• Worldwide Shipping
  All our orders ship from various warehouses to ensure fast shipping times all over the world

• Friendly Support
  Got a question? Contact our friendly support staff and they'll get back to you as soon as possible

• Secure Payments
  Pay with full confidence thanks to our secure and encrypted payment methods

Refactor : Home Page

Tasks:

• Refactor the ProductsGrid from components to a simple layout (non-reusable). Resue the Product Overview Card
• Refactor the CategoriesList from component to simple layout. Reuse the Category Card
• Move logic for filtering products from inline function to getStaticProps and return respective categories. Also, make sure it to write new helper function tp filter by type isPopular and isLatest and accepts first as a GQL parameter

Design and develop product overview cards

related to #7
Should include the following:

• Product Name
• Product Image
• Product Price
• Link to Product Details

Initial Setup for the project.

• Setup the project using create-next-app (typescript).
• Setup eslint for the project.
• Setup prettier for the project.
• Setup husky pre-commit hooks to lint and format.
• Setup custom document for the app and add respective fonts
• Setup Stitches JS as the styling solution for the project.
• Add global resets/styles on the project.