[feature] Set up initial project structure

Author: harshad-wedo

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+yarn.lock
+
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+README.md

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "cSpell.words": ["daisyui", "swiper"]
+}

env-sample

@@ -0,0 +1,2 @@
+GRAPHQL_URL="https://wedocommerce.wedowebapps.com/graphql"
+

next.config.js

@@ -0,0 +1,55 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  compiler: {
+    removeConsole: process.env.NODE_ENV !== "development", // Remove console.log in production
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/graphql",
+        destination: process.env.GRAPHQL_URL,
+      },
+    ];
+  },
+  env: {
+    GRAPHQL_URL: process.env.GRAPHQL_URL,
+    FBPIXEL_TRACK_ID: process.env.FBPIXEL_TRACK_ID,
+    ENABLE_FACEBOOK_TRACKING: process.env.ENABLE_FACEBOOK_TRACKING,
+    PAYPAL_RETURN_URL: process.env.PAYPAL_RETURN_URL,
+    PAYPAL_CANCEL_URL: process.env.PAYPAL_CANCEL_URL,
+  },
+  images: {
+    domains: [
+      "daisyui.com",
+      "i.postimg.cc",
+      "rukminim2.flixcart.com",
+      "m.media-amazon.com",
+      "wedocommerce.wedowebapps.com",
+    ],
+  },
+  webpack(config, { webpack }) {
+    config.module.rules.push({
+      test: /\.(graphql|gql)$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: "graphql-tag/loader",
+        },
+      ],
+    });
+
+    return config;
+  },
+};
+
+const withPWA = require("next-pwa")({
+  dest: "public", // Destination directory for the PWA files
+  disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
+  register: true, // Register the PWA service worker
+  skipWaiting: true, // Skip waiting for service worker activation
+});
+
+module.exports = withPWA(nextConfig);

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "wedo-commerce",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "npx prettier --write ."
+  },
+  "dependencies": {
+    "@apollo/client": "^3.9.0",
+    "@apollo/experimental-nextjs-app-support": "^0.7.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@paypal/react-paypal-js": "^8.1.3",
+    "@reduxjs/toolkit": "^2.1.0",
+    "@types/react-lottie": "^1.2.10",
+    "clsx": "^2.1.0",
+    "embla-carousel": "^8.0.0-rc19",
+    "embla-carousel-react": "^8.0.0-rc19",
+    "graphql": "^16.8.1",
+    "graphql-tag": "^2.12.6",
+    "moment": "^2.30.1",
+    "next": "14.0.4",
+    "next-pwa": "^5.6.0",
+    "prettier": "^3.1.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-dropdown": "^1.11.0",
+    "react-hook-form": "^7.50.1",
+    "react-lottie": "^1.2.4",
+    "react-redux": "^9.1.0",
+    "react-toastify": "^10.0.4",
+    "swiper": "^11.0.5",
+    "yup": "^1.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "daisyui": "^4.6.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/manifest.json

@@ -0,0 +1,67 @@
+{
+    "name": "Wedo Commerce",
+    "short_name": "wedo-commerce",
+    "theme_color": "#000",
+    "background_color": "#e9ecef",
+    "display": "standalone",
+    "orientation": "portrait",
+    "scope": "/",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/media/icons/icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-128x128.png",
+            "sizes": "128x128",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png",
+            "purpose": "maskable any"
+        },
+        {
+            "src": "/media/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable any"
+        }
+    ],
+    "splash_pages": null
+}

public/next.svg

@@ -0,0 +1,7 @@
+"use client";
+
+import { AccountInformationContainer } from "@/container";
+
+export default function AccountInformationPage() {
+  return <AccountInformationContainer />;
+}

public/vercel.svg

@@ -0,0 +1,7 @@
+"use client";
+
+import { AddressBookContainer } from "@/container";
+
+export default function AddressBookPage() {
+  return <AddressBookContainer />;
+}

src/app/(account)/account-information/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { AccountSidebar } from "@/components";
+
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="container mx-auto flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row py-8 gap-4">
+      <div className="">
+        <AccountSidebar />
+      </div>
+      <div className="w-full">{children}</div>
+    </div>
+  );
+}

src/app/(account)/address-book/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { OrderHistoryContainer } from "@/container";
+
+export default function OrderHistoryPage() {
+  return <OrderHistoryContainer />;
+}

src/app/(account)/layout.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { BrowserPersistence, localStorageKeys } from "@/utils";
+// ^ this file needs the "use client" pragma
+
+import { ApolloLink, HttpLink } from "@apollo/client";
+import {
+  ApolloNextAppProvider,
+  NextSSRInMemoryCache,
+  NextSSRApolloClient,
+  SSRMultipartLink,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+import React from "react";
+
+// have a function to create a client for you
+function makeClient() {
+  const storage = new BrowserPersistence();
+  const token = storage.getItem(localStorageKeys.AUTH_TOKEN);
+
+  const uri = process.browser
+    ? new URL("/graphql", location.href)
+    : new URL("/graphql", process.env.GRAPHQL_URL).href;
+
+  const httpLink = new HttpLink({
+    headers: { Authorization: token ? `Bearer ${token}` : "" },
+
+    uri: uri as string,
+    // you can disable result caching here if you want to
+    // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
+    fetchOptions: { cache: "no-store" },
+    // you can override the default `fetchOptions` on a per query basis
+    // via the `context` property on the options passed as a second argument
+    // to an Apollo Client data fetching hook, e.g.:
+    // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
+  });
+
+  return new NextSSRApolloClient({
+    // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
+    cache: new NextSSRInMemoryCache(),
+    link:
+      typeof window === "undefined"
+        ? ApolloLink.from([
+            // in a SSR environment, if you use multipart features like
+            // @defer, you need to decide how to handle these.
+            // This strips all interfaces with a `@defer` directive from your queries.
+            new SSRMultipartLink({
+              stripDefer: true,
+            }),
+            httpLink,
+          ])
+        : httpLink,
+  });
+}
+
+// you need to create a component to wrap your app in
+export function ApolloWrapper({ children }: React.PropsWithChildren) {
+  return (
+    <ApolloNextAppProvider makeClient={makeClient}>
+      {children}
+    </ApolloNextAppProvider>
+  );
+}

src/app/(account)/order-history/page.tsx

@@ -0,0 +1,6 @@
+"use client";
+import { CartContainer } from "@/container";
+
+export default function CartPage() {
+  return <CartContainer />;
+}