aceykt / leos-guitar-shop-nextjs

Leo's Coolest Guitar Website in Next.js.

Leo's Guitar Shop

This is a Next.js project bootstrapped with create-next-app.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository

Motivation

Hilarity, I guess. This project simulates a Guitar Shop. Every login attempt with any email/password will log in a random user successfully.

This is used to validate Segment application onboarding using React/Next.js archetype.

Architecture

• Bootstrap 5
• MobX
• Yarn
• Jest

Integration with Segment

This app uses @segment/analytics-next to send events to Segment. The following events are tracked:

• User Log In
• User Sign Up
• Visit to main page
• Visit to guitar
• Product Added to Cart
• Product Added to Wishlist
• Checkout
• Completing Checkout

Running

Prerequisites

This is a Node.js application, so it requires Node.js to be installed locally.

After installing Node.js you'll need to install Yarn, the package manager for this project:

npm i -g yarn

Running locally

To test with Segment, make sure to create a .env.local file with the following:

NEXT_PUBLIC_SEGMENT_WRITE_KEY='your-write-key'

You can get your source's write key at Connections > Sources > Your source > Settings > API Keys.

Then run the app using:

yarn dev

Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit files.

Back-end simulated by mock API routes. The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Using Staging Environment

You'll need to set another environment variable:

NEXT_PUBLIC_SEGMENT_CDN='https://cdn.segment.build'

Deployment

The easiest way to deploy a Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

This app is deployed at https://leos-guitar-shop-nextjs.vercel.app/

Google Tag Manager Testing

Make sure to set a NEXT_PUBLIC_GTM_ID environment variable with the value equal to you GTM ID. The sites does the rest, initializing the Google data layer.