Next.js Shopping Website

This is a shopping website developed using Next.js, Node.js, React, Redux, Algoliya Search, Redis Caching. Hosted on Digital ocean Ubendu server

Connect with me:

Support:

Flutter E Commerce Mobile App

Mobile Application of this ecommerce application is developed using Flutter .Source code of this Flutter mobile app is available on https://github.com/bibinprathap/flutter-e-commerce-app

https://play.google.com/store/apps/details?id=com.openflutter.openflutterecommerce

Features

Two header layouts
RTL/LTR Supported
Five different color schemes
Based on Bootstrap 4.6.x
Powerful mobile menu
With auto parts store features
100% Responsive Layout
HTML5, CSS3, SASS
CSS3 Animation
SVG & Font Awesome Icons
BEM syntax
Roboto Google Font
Compatible with all major browsers
Four shop layouts
Quickview
Offcanvas filters
Account pages
Megamenu
Vertical Megamenu
Photoswipe gallery
Cursor based and page based navigation

Getting Started

Preparation

Make sure your system has installed Node.js and Yarn.

Open a terminal window and go to the Sources directory.

Run the yarn install command. This command will load all necessary dependencies specified in the package.json file.

Build Project

To start a local HTTP server and runs the build process with change tracking run the command:

npm run dev

To build for production, run the command:

npm run build

After executing the command, the compiled project will be located in the .next directory.

You can find more information about the available commands in the official NextJs

Project Structure

Project source codes are in the Sources directory. After downloading and unpacking the package, the Sources directory will look like this:

Sources/
    public/
        i18n/
        images/
    src/
        api/
        components/
        data/
        fake-server/
        interfaces/
        pages/
        scss/
        services/
        store/
        svg/
    .babelrc
    .editorconfig
    .env
    .eslintrc.js
    .gitignore
    custom.d.ts
    next.config.js
    next-env.d.ts
    package.json
    tsconfig.json
    yarn.lock

Here is a description of the most important files and directories of the project:

Sources/src/api/ - Contains functions that fetch data from the server. You need to replace calls to the fake server with real AJAX requests.
Sources/src/components/ - Contains components used in the template. More details below.
Sources/src/data/ - Contains stubs data for the template, products, categories, etc.
Sources/src/fake-server/ - Contains fake server code. Used for demonstration purposes only. After you replace calls to the fake server with real AJAX requests, you can delete this directory.
Sources/src/interfaces/ - Contains the typescript interfaces used in the template.
Sources/src/pages/ - Contains the components of Next.js pages.
Sources/src/scss/ - Contains project styles. More details are described in the SCSS Files section.
Sources/src/services/ - Contains some useful functions and classes that are used in the template.
Sources/src/store/ - Files related to React Redux: actions, reducers, .etc. More details below.
Sources/src/svg/ - Contains separate SVG files.

Components directory

Sources/src/components is a main directory with the following structure:

components/
    account/
    blocks/
    blog/
    filters/
    footer/
    header/
    mobile/
    shared/
    shop/
    site/
    widgets/
    Layout.tsx

Directory Description

src/components/account
Contains customer pages and components.
src/components/blocks
Contains components used as a construction bricks for pages (mainly used on the home page).
src/components/blog
Blog related components, pages, etc.
src/components/filters
Contains shop filters.
src/components/footer
Contains the components used in the footer of the site.
src/components/header
Contains the components used in the header of the site.
src/components/mobile
Contains the components used in the mobile header and mobile menu.
src/components/shared
Contains components used across all template.
src/components/shop
Contains shop pages (category, product, cart, checkout, etc.) and components.
src/components/site
Contains rest site pages (About Us, Contact Us, etc.).
src/components/widgets
Contains components used in the shop or/and blog sidebar.

Store directory

Sources/src/store contains files related to React Redux: actions, reducers, .etc.

All actions, reducers are logically separated by "feature", you can see the structure of this directory below:

store/
    cart/
        cartActions.ts
        cartActionTypes.ts
        cartHooks.ts
        cartReducer.ts
        cartTypes.ts
    compare/
        ...
    currency/
        ...
    garage/
        ...
    mobile-menu/
        ...
    options/
        ...
    quickview/
        ...
    root/
        ...
    shop/
        ...
    user/
        ...
    wishlist/
        ...
    client.ts
    hooks.ts
    store.ts
    types.ts
    version.ts

Customization

How to change logo?

Desktop header - In the src/components/header/Logo.tsx file, find comments {/* logo */} and {/* logo / end */} and replace code between them with your logo image.
Mobile header - In the src/components/mobile/MobileLogo.tsx file, find comments {/* mobile-logo */} and {/* mobile-logo / end */} and replace code between them with your logo image.

How to change font?

Open the src/pages/_document.tsx file.

Find and replace with the desired font:

{/* fonts */}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">

Open the src/scss/_custom-variables.scss file.
And define a special variable, as in the example below:
```
$body-font-family: 'YOUR_FONT_NAME';
```

How to change theme color scheme?

Predefined color schemes

To compile a template with one of the predefined color schemes, open the src/scss/_custom-variables.scss file.

Then find and uncomment one of the following lines:

//@import 'themes/theme-red/theme-variables';
//@import 'themes/theme-blue/theme-variables';
//@import 'themes/theme-green/theme-variables';
//@import 'themes/theme-orange/theme-variables';
//@import 'themes/theme-violet/theme-variables';

After that, you need to rebuild the template.

Your own color scheme

Open the src/scss/_custom-variables.scss file.

Find the code below:

// Change main theme color
//$theme-scheme: (
//    main:  #584d8c, // main theme color
//    muted: #cdc8e5, // muted text color
//);

Uncomment these lines and replace the colors with the ones you need.

How to remove/change copyright notice?

Open the src/components/footer/Footer.tsx file.
Find comments {/* copyright */} and {/* copyright / end */}, then replace code between them with your copyright.

How to change layout and header variant?

Open the src/config.ts file.

Find the following code:

const config: IConfig = {
    desktopHeaderVariant: 'spaceship/one',
    mobileHeaderVariant: 'one',
};

Then change the value of the desktopHeaderVariant and mobileHeaderVariant properties.

Open the src/pages/_app.tsx file, then find and remove all unused header styles:

import '../scss/style.header-spaceship-variant-one.scss';
import '../scss/style.header-spaceship-variant-two.scss';
import '../scss/style.header-spaceship-variant-three.scss';
import '../scss/style.header-classic-variant-one.scss';
import '../scss/style.header-classic-variant-two.scss';
import '../scss/style.header-classic-variant-three.scss';
import '../scss/style.header-classic-variant-four.scss';
import '../scss/style.header-classic-variant-five.scss';
import '../scss/style.mobile-header-variant-one.scss';
import '../scss/style.mobile-header-variant-two.scss';

Third-Party Packages

This template uses third-party modules from the following packages:

- **React** ( [https://reactjs.org/][] ) A JavaScript library for building user interfaces

Next.js ( https://nextjs.org/ )
The React Framework for server side rendering.
Next Redux Wrapper ( https://github.com/kirill-konshin/next-redux-wrapper )
A HOC that brings Next.js and Redux together.
React Hook Form ( https://react-hook-form.com/ )
Performant, flexible and extensible forms with easy-to-use validation.
React Input Range ( https://github.com/davidchin/react-input-range )
React component for inputting numeric values within a range (range slider).
React Intl ( https://www.npmjs.com/package/react-intl )
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
React Redux ( https://react-redux.js.org/ )
Official React bindings for Redux.
React Slick ( https://react-slick.neostack.com/ )
React carousel component.

React Toastify ( https://fkhadra.github.io/react-toastify/ )
React notification made easy.
Reactstrap ( https://reactstrap.github.io/ )
Simple React Bootstrap 4 components.

The following libraries and frameworks are also used:

- **Bootstrap** ( [https://getbootstrap.com/][] ) Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

Classnames ( https://github.com/JedWatson/classnames )
A simple javascript utility for conditionally joining classNames together.
Redux ( https://redux.js.org/ )
Predictable state container for JavaScript apps.
Redux Thunk ( https://github.com/reduxjs/redux-thunk )
Thunk middleware for Redux.
PhotoSwipe ( https://photoswipe.com/ )
JavaScript gallery, no dependencies. Used on the product page.
query-string ( https://github.com/sindresorhus/query-string )
Parse and stringify URL query strings.

  <h1 class="docs-section__title">SCSS Files</h1>

The directory with SCSS files contains the following files and subdirectories:

scss/
    account/
    blocks/
    blog/
    common/
    components/
    filters/
    footer/
    header/
    mixins/
    mobile/
    pages/
    shop/
    themes/
    widgets/
    _bootstrap-variables.scss
    _constants.scss
    _custom.scss
    _custom-variables.scss
    _functions.scss
    _style.header.scss
    _style.mobile.scss
    _svg.scss
    _variables.scss
    bootstrap.scss
    index.scss
    style.header-classic-variant-five.scss
    style.header-classic-variant-four.scss
    style.header-classic-variant-one.scss
    style.header-classic-variant-three.scss
    style.header-classic-variant-two.scss
    style.header-spaceship-variant-one.scss
    style.header-spaceship-variant-three.scss
    style.header-spaceship-variant-two.scss
    style.mobile-header-variant-one.scss
    style.mobile-header-variant-two.scss
    style.scss

You can make changes to any of these files.

To make it easier for you in the future to upgrade the template to the new version, we recommend (if possible) making changes only to _custom-variables.scss and _custom.scss files.

_custom-variables.scss - It is used to override the values of variables.
_custom.scss - Use to write your own scss code.

How does LTR/RTL support work?

The direction is controlled using two scss variables:

$direction - indicates direction. Possible values: ltr or rtl.
$both-directions - if true compiles styles for two directions, the $direction variable will be ignored. Possible values: true or false.

Some "magic" variables are also used, which change their value depending on the given direction value. The names of these variables are the same as the names of the Logical Properties (for example, variable $margin-inline-start). These variables should only be used in the direction mixin.

This example demonstrates how it works:

.alert {
    @include direction {
        #{$margin-inline-start}: 20px;
    }
}

Will be compiled to:

If $direction == ltr and $both-directions == false:
```
.alert {
    margin-left: 20px;
}
```
If $direction == rtl and $both-directions == false:
```
.alert {
    margin-right: 20px;
}
```

If $both-directions == true:

[dir=ltr] .alert {
    margin-left: 20px;
}
[dir=rtl] .alert {
    margin-right: 20px;
}

What if you want to use only one direction?

Open src/scss/_custom-variables.scss, and define next variables:

$direction:       ltr;   // specify the direction you need (ltr or rtl)
$both-directions: false; // set to false to disable style compilation
                         // for two directions

Fonts

We used two fonts in this template:

Roboto (Google Web Font: https://fonts.google.com/specimen/Roboto ) The main font used in the template.
FontAwesome ( https://fontawesome.com/ ) Icon Font to display some icons in the template.

# Translation

The language configuration is in the src/data/shopLanguages.ts file.

Set the default language and an array of available languages:

const dataShopLanguages: ILanguage[] = [
    {
        locale: 'en',
        code: 'en',
        name: 'English',
        icon: '/images/languages/language-1.png',
        direction: 'ltr',
    },
    // ...
];

export const dataShopDefaultLocale = 'en';

How to translate template?

Go to public/i18n/ directory.
Then copy the en.json file and specify its name, for example [LANGUAGE_LOCALE].json.
Open the copied file and translate all entries.

Add a new language to the configuration.
src/data/shopLanguages.ts

const dataShopLanguages: ILanguage[] = [
    {
        locale: 'en',
        code: 'en',
        name: 'English',
        icon: '/images/languages/language-1.png',
        direction: 'ltr',
    },
    {
        locale: LANGUAGE_LOCALE,
        code: LANGUAGE_CODE,
        name: LANGUAGE_NAME,
        icon: LANGUAGE_ICON, // path to the language icon
        direction: LANGUAGE_DIRECTION, // ltr or rtl
    },
];

Where can I get flag icons?

You can get flag icons from the https://github.com/gosquared/flags repository.

The template uses a 24px (24.png) version of the icons.

Currencies

Currency configuration is in the src/data/shopCurrencies.ts file.

Find the following piece of code and set the default currency and an array of available currencies:

const dataShopCurrencies: ICurrency[] = [
    {
        code: 'USD',
        symbol: '$',
        name: 'US Dollar',
        rate: 1,
    },
    // ...
];

const dataShopDefaultCurrencyCode = 'USD';

# Changelog

Version 1.2.0 – May 1, 2022

Fixed: The provided `href` (/catalog/[slug]/products) value is missing query values (slug) to be interpolated properly;
Updated: Next.js from 10.2.0 to 11.1.2;
Updated: Other dependencies.

Version 1.1.0 – january 5, 2022

Added: Support for cursor based navigation;
Fixed: range filter incorrectly rounds min and max values if they have the same value;
Fixed: Bug of displaying slides of a react-slick if the infinite property is true and the slides are not enough to fill the entire frame;
Updated: Next.js from 9.5.2 to 10.2.0;
Updated: React from 16.13.1 to 17.0.2;
Updated: react-hook-form from 6.13.1 to 7.4.0;
Updated: Other dependencies.

Version 1.0.0 – September 2, 2021

Initial Release.

Credits

React (https://reactjs.org/)
Next.js (https://nextjs.org/)
Next Redux Wrapper (https://github.com/kirill-konshin/next-redux-wrapper)
React Hook Form (https://react-hook-form.com/)
React Input Range (https://github.com/davidchin/react-input-range)
React Intl (https://www.npmjs.com/package/react-intl)
React Redux (https://react-redux.js.org/)
React Slick (https://react-slick.neostack.com/)
React Toastify (https://fkhadra.github.io/react-toastify/)
Reactstrap (https://reactstrap.github.io/)
Bootstrap (https://getbootstrap.com/)
Classnames (https://github.com/JedWatson/classnames)
Redux (https://redux.js.org/)
Redux Thunk (https://github.com/reduxjs/redux-thunk)
PhotoSwipe (https://photoswipe.com/)
query-string (https://github.com/sindresorhus/query-string) experttutorshub.com

bibinprathap / nextjs-e-commerce Goto Github PK

nextjs-e-commerce's Introduction