docker-compose up from the root of the project to create a local postgres database and object storage.npm install && npx prisma generate to install dependencies and generate the prisma clientnpx prisma db push && npx prisma db seed to create tables and seed the development dbnpm run dev to run the development server..env.development
NODE_ENV="development"
DEBUG=true
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/ergonomica"
NEXTAUTH_SECRET=someRandomString
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_IMAGE_HOST=http://localhost:9000/ergonomica-media
NEXT_PUBLIC_WEB_HOST=http://localhost:3000
NEXTAUTH_SECRET=secret24742
GOOGLE_CLIENT_ID=1000000000000-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
MINIO_ENDPOINT=http://localhost:9000
NMI_SECURITY_KEY=6457Thfj624V5r7WUwc5v6a68Zsd6YEm
PROJECT_NAME=ergonomica
AWS_REGION=us-east-1
AWS_DEFAULT_REGION=us-east-1
FB_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxx
FB_TEST_CODE=TEST75581
SECRET_KEY=someRandomStringnpx prisma db seed. this command will clear and re-seed the DBhttp://localhost:3000/api/cookies/clearlocalStorage.clear()make sure you have the pg_trgm extension enabled in your postgres database. To do this you can run the following:
psql -h localhost -p 5432 -U postgres -d ergonomicaSELECT * FROM pg_extension WHERE extname = 'pg_trgm'; this should display atleast 1 rowCREATE EXTENSION IF NOT EXISTS pg_trgm;exit to exit psql shellEnd to end tests are held in the cypress/e2e/ directory.
You can run the test suite without having to install any depencies manually by running ./test.sh.
If you want to run tests manually you can run npx cypress open while having another terminal running the dev server. Beware that performance tests will fail when running the test suite with the dev server; If you want to test performance run npm run build && npm run start to build and serve the app.
to use analytics you must set the following env variables. The analytics package has modules for the following analytics providers:
The analytics package is built in a way where the main methods exported will trigger events in all of the selected providers; for example if google analytics, posthog and meta are selected; a pageview event will trigger a pagheview in all of these platfoirms simultaneously. This makes it very easy to add new providers without having to go to different places in the code.
To get everything working make sure you follow the steps bellow and setup the follwoing environment variables:
# toggle usage of analytics
NEXT_PUBLIC_USE_ANALYTICS
# post hog
NEXT_PUBLIC_POSTHOG_HOST
NEXT_PUBLIC_POSTHOG_KEY
# google analytics
NEXT_PUBLIC_GA_TRACKING_ID
# metap pixel
NEXT_PUBLIC_FB_PIXEL_ID
# twitter
NEXT_PUBLIC_TWITTER_BEARER_TOKENTo test events in google analytics and meta while in development you must be using some kind of ip tunnel like ngrok
NEXT_PUBLIC_POSTHOG_KEY=<YOUR_PROJECT API_KEY>NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.comNEXT_PUBLIC_GA_TRACKING_ID=<YOUR_MEASUREMENT_ID>FB_ACCESS_TOKEN/me?fields=id,nameConfirm your server’s events are set up correctlyFB_TEST_CODE=<YOUR_TEST_EVENT_CODE>{
"events_received": 1,
"messages": [
],
"fbtrace_id": "A5dI0gET-Do7zoc6hPQ_iHr"
}Confirm your websites events are set up correctlyThis ecommerce is inetded to unfiy the customer experience both digitaly and phisically. and the ecommerce features several tools to help generate, track and convert leads. It also features advanced functionality to help you unify in-person and digital leads, being able to track a leads entire customer jurney, from the digital side to the physical side without any gaps
This ecommerce creates a unique leadId for users.
It uses a combination of server side actions through middleware and client side actions in the main layout file with a client side component to track the lead and their ID throughout the app
This works through middleware <-> serverside functions <-> clint side
This is an experimental
middleware: lead ID is received from search params in the referer (previous URL) and its added the search params of the URL of the next request.
lead utilities are distributed into 2 main packages, one for the server and one for the client:
Inside the middleware there is a condition that checks for a previous URL, if the previous URL has an hid (hidden ID) searchParam in the URL, this will set the hid param in the next request as well. This is useful for visitors that have all cookies blocked, attaching their initial session leadID in the URL allows them to still use most of the functionality in the website.
the leadgen component is a client side react component that uses some of the clientside lead utilities with useEffect, so basically this function will execute everytime a page renders
?${params.toString()})
return cookieSettingsthis ecommerce creates shopping carts inside a database. It uses local leads to relate and fetch shopping carts.
uses a condition on mounted to only generate 1 lead
let mounted = false
const getOrCreateLead = async(
visitorId: string | null | undefined
) => {
if(!visitorId && !mounted) {
mounted = true
if (typeof window !== 'undefined') {
let leadId = localStorage.getItem('ergo_lead_id')
let cartId = localStorage.getItem('ergo_cart_id')
if(!leadId) {
const fingerprint = await generateFingerprint()
const response = await createLeadAndCart(fingerprint)
leadId = response.leadId
cartId = response.cartId
localStorage.setItem('ergo_lead_id', leadId)shop 'chair-vergex-bl': 0, 'light-arm-bl': 0, 'chair-xtc-gr': 1, 'chair-stack-gr': 1, 'stand-arm-alum-single-bl': 3, 'chair-axis-wh': 3
order 'chair-axis-wh': 2, 'stand-arm-alum-single-bl': 1, 'chair-executive-stratus-gr': 2, 'frame-double-bl': 1
melamine tabletop desk frame
chair anion
Power Outlets Monitor Arms Frames Keyboards Ergonomic Chairs Anti-fatigue Mats Mice USB hubs Pads Table Tops Laptop Stands Adapters Executive Chairs Wireless Chargers Tablet Stands Cabinets Phone Holders Headphone Stands Gaming chairs Lighting CPU Stands Cable Management Wrist rests Monitor Stands Balance Boards Under-desk Drawers