Leo's Guitar Shop

This is a Next.js 13 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

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.

Consent

When this app was implemented, Segment Consent Manager was still active. There's a tag that shows what is the most recent version of this project implementing the Consent Manager. Since it is outdated and not active anymore, the Consent Manager was removed from this project, opting for an Analytics Consent Tools custom wrapper.

seg-leonelsanches/leos-guitar-shop-nextjs