joshuaedo / shop

Live like Josh's alter ego, j@28

Shop Josh

Table of Contents

• Introduction
• Frameworks
• UI
• Hooks and Utilities
• Code quality
• Prerequisites
• Usage
• License
• Author

Introduction

Live like Josh's alter ego, j@28. Inspired by Aubrey Graham.

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• React Query – Efficient data fetching and state management library for React applications

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Shadcn UI – Beautifully designed components that you can copy and paste into your app.
• Lucide – Beautifully simple, pixel-perfect icons
• geist – A typeface specifically designed for developers and designers.
• next-themes – A library for adding dark mode support to Next.js applications

Hooks and Utilities

Some custom React hooks and utilities to enhance functionality and development efficiency:

• useDate: Provides current date and time information with automatic updates.
• cn: Merges and formats CSS classes for easier class name management, particularly useful for Tailwind CSS integration.
• useAutoFocus: Sets focus automatically on a specified element.
• useCustomToast: Creates custom toast notifications for displaying messages to users.
• useMagneticism: Adds magnetic effect to a specified element based on mouse movement.
• useMounted: Tracks whether the component is mounted or not.
• useMediaQuery: Tracks the result of a specified media query.

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Zod – A powerful TypeScript-first validation and parsing library for robust data handling.
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

To do

☑ set up repo

☑ install dependencies

☑ establish general layout

☑ design 404 page

☑ fix minor api and db bugs

☑ add menu feature

☑ edit toast

☑ build product page with disclaimer and carousel

☑ complete grid item functionality

☑ build cart and implement checkout

☐ update database

☑ filter and sort first 4 related products in product page

☑ switch getAllCategories and getAllProducts to useInfiniteQuery

☐ fix product grid item ui & responsiveness

☐ test on mobile

☐ fix seo

☐ build and deploy

☐ make bedroom bg-image scrollable?

☐ add links to bedroom bg-image?

☐ design and implement footer image?

☐ fix exit animation on some pages?

☐ add search feature? (probably in menu)

Prerequisites

Before you begin, ensure you have the following software installed:

• Node.js
• npm or Yarn

Usage

Follow these steps to set up and run shop josh locally.

1. Create a new project:

   npx create-next-app --example https://github.com/joshuaedo/shop 

2. Create a .env file in the project root and add the following variables:

NEXT_PUBLIC_SHOP_API_URL=shop_api_url
SHOP_API_KEY=shop_api_key
NEXT_PUBLIC_SHOP_ID=shop_id
DATABASE_URL=your_database_url

Replace the placeholders.

3. Run the development server:

npm run dev

The application should be accessible at http://localhost:3000.

License

This project is licensed under the MIT License

Author

• Joshua Edo (joshuaedo.com)