Trang chủ   Html & Template   Website "Bán hàng - TMĐT"   Harri – Electronics eCommerce React Next js Template + Admin Panel
Ecommerce,NextJS,ReactJS,NodeJS,Clean code
Ảnh demo (2)
  Xem LIVE DEMO
[Mã code 49123]

Harri – Electronics eCommerce React Next js Template + Admin Panel

  (1 Đánh giá)
  0       67    

Harri – Clean, Minimal eCommerce React next js Template for multipurpose (Mobile, Laptop, Monitor, Hub, Kittle, watch Multipurpose template, watch store)

Danh mục
Thể loại
WebsiteBán hàng - TMĐT
Ngày đăng
10-4-2024
Loại file
Full code
File download
 themeforest-kO11wisW-harri-electronics-ecommerce-react-next-js-template.zip [.11.9 MB]

     Báo vi phạm bản quyền
CAM KẾT TỪ NGƯỜI BÁN
Chức năng đầy đủ giống demo 100%
Phiên bản mới nhất
Hỗ trợ cài đặt

Nguyễn Trí
(Hạng vàng)
Xem trang

Source code
2

Đánh giá (2)
5/5

Ngày tham gia
28/2/2024

Features Overview

  • React js
    React js is a most popular JavaScript library for building user interfaces.
  • Next js
    Next js is The React Framework for Production
  • Express js
    Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
  • Mongodb
    The developer data platform that provides the services and tools necessary to build distributed applications fast, at the performance and scale users demand.
  • Typescript + next js app directory
    Admin panel client site developed by typescript and next js app directory
  • Mongoose
    Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building.
  • Stripe
    Online Payment Solutions Solution. Create your Website & E-commerce for Free.
  • Nodemailer
    Nodemailer is a module for Node.js applications to allow easy as cake email sending.
  • Authentication
    Login, register, email verify, forgot password,reset password,update profile,
  • Redux Toolkit
    You can easily state management with redux toolkit
  • Rtk query
    RTK Query is a powerful data fetching and caching tool.
  • Form validation
  • Bootstrap 5(latest Version) Framework:
    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Responsive Layout Design:
    What ever you are using the device your site will run as it should be. Klenar template is fully responsive layout for all type of devices.
  • Touch Friendly :
    Easy browsing on touch devices.

Full Features List

  • React JS
  • Next JS
  • Express js
  • MongoDB
  • Mongoose
  • Stripe
  • Nodemailer
  • Authentication
  • Redux Toolkit
  • Dynamic routes
  • Based on Bootstrap 5.x
  • ReactJS without jQuery
  • Free Premium Quality Support
  • Logo Slider Integration
  • Sticky Header
  • Google Fonts
  • 100% Responsive
  • Nice and Clean Design
  • Clean and commented code
  • Customizeable all components of each page
  • Integrated with FontAwesome 
  • 1+ Home Pages
  • 12+ Inner Pages
  • Image background
  • Easy to customize
  • Flexible and multi-purpose
  • Valid / CSS3
  • 24/7 Awesome support
  • Detailed documentation


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO


Ecommerce,NextJS,ReactJS,NodeJS,Clean code

Ecommerce,NextJS,ReactJS,NodeJS,Clean code


HƯỚNG DẪN CÀI ĐẶT

Backend Configuration

 

Please follow the instructions.

  1. First setup your backend sever -
    1. Edit .env. file
    2. Configure your MongoDB database, watch this video MongoDB, after configuring you will find a mongo URI just put that on your .env file MONGO_URI variable.
    3. The TOKEN_SECRET is just a random value for creating a secret token, you can use whatever you want but make sure it is secret.
    4. You need an email and password for using email verification and forget the password option. Use an email that you want to send messages to others when they register or request to forget the password. We use Nodemailer and the default email server for this. watch this video to create an app password for email app-password. After that put your email in the .env file EMAIL_USER and app password in the EMAIL_PASS variable. Also, need to Allow less secure apps to be ON, and access captcha for using this in production environment, see this doc
    5. First go to cloudinary sign up or sign in. Please watch this video for Cloudinary configuration Cloudinary configuration, doc , (We use Cloudinary for image upload).Check bellow screenshot as well. image-1 image-2
    6. Use your local server URL in STORE_URL variable, when you run on the local server your URL will be http://localhost:3000,
    7. Use your admin URL in ADMIN_URL variable, when you run on the local server your URL will be http://localhost:4000,
    8. go to Stripe then sign in or sign up then show you stripe dashboard then copy your secret key and past your .env file
  1. Finally, your .env file will look like this: -
    1. PORT=5000
    2. NODE_ENV=development
    3. MONGO_URI=your mongo database url
    4. TOKEN_SECRET=fbb2d60078ba3907a2eba275d2aeee5c6dd064c183b8a07013b56044c2156fbb1d0da15f2817a5f06bcc27a4c1b36027a2555b3997b4182f6d5a4c008be95d13
    5. JWT_SECRET_FOR_VERIFY=724b07ce96f552b2d9405fb02899e199d14fdb874cf33634a3d233a649b8544a0a6ec9874c9d2f705bc983b478686d0808924b4fcd3166c752d492101c5c419d
    6. SERVICE=gmail
    7. EMAIL_USER=your email // your sender email
    8. EMAIL_PASS=you email app password
    9. HOST=smtp.ethereal.email
    10. EMAIL_PORT=465
    11. CLOUDINARY_NAME=you cloud name
    12. CLOUDINARY_API_KEY=your cloudinary api key
    13. CLOUDINARY_API_SECRET=your cloudinary api secret
    14. CLOUDINARY_UPLOAD_PRESET=your cloudinary upload preset
    15. STRIPE_KEY=your stripe secret api key
    16. STORE_URL=http://localhost:3000 // your client site url
    17. ADMIN_URL=http://localhost:4000 // your admin-panel site url


  1. To deploy a Node.js Express application on Vercel, you can follow these steps: -
    1. Sign up for an account on Vercel if you don't have one already.
    2. Connect your GitHub, GitLab, or Bitbucket repository where your Node.js Express application is hosted.
    3. Import your repository on Vercel and select the Node.js Express project to be deployed.
    4. Vercel will automatically detect your Express application and perform the necessary build and deployment steps.
    5. Once the deployment is complete, you'll be able to access your application using the URL provided by Vercel.
    6. When you import your GitHub repository on vercel by creating a project, you will see an option for Environment Variables, just click on that and give you a local .env all variable with the value. then click on deploy. Note first you will need to import and deploy backend, so that you can use that backend live url as harri-front-end and harri-backend and harri-admin-panel base url. screenshot
  1. Note: Make sure your Express application is set up properly, including the correct dependencies, environment variables, and routes. You may also need to configure your application to work with Vercel's platform.


  1. Once you successfully connect with MongoDB and configure .env then run "npm run data:import", it will run seed.js file and will import all demo data on the database. (Youwill find all demo data in the utils folder, change that data according to your need, also use staff email with real email for use of the forgetting password option) If everything is okay, then the backend configuration is done. Now you will find all demo data in your MongoDB database.

  1. all setup are done then open your command line then run npm run start-dev this will be run your local site

Client Configuration

 

  1. Please follow the instructions.

    1. After Configure your .env.local file will look like this: -
      1. NEXT_PUBLIC_STRIPE_KEY="your stripe key" //for use stripe, change with your stripe API key
      2. NEXT_PUBLIC_API_BASE_URL=your api base url // base API URL, when run on localhost/dev server.


    1. To deploy a Next.js application on Vercel, you can follow these steps: -
      1. Sign up for an account on Vercel if you don't have one already.
      2. Connect your GitHub, GitLab, or Bitbucket repository where your Next.js application is hosted.
      3. Import your repository on Vercel and select the Next.js project to be deployed.
      4. Vercel will automatically detect your Next.js application and perform the necessary build and deployment steps.
      5. Once the deployment is complete, you'll be able to access your application using the URL provided by Vercel.
      6. When you import your GitHub repository on vercel by creating a project, you will see an option for Environment Variables, just click on that and give you a local .env all variable with the value. then click on deploy. Note first you will need to import and deploy backend, so that you can use that backend live url as harri-front-end and harri-backend and harri-admin base url. screenshot
    1. Note: Make sure your Next.js application is set up properly, including the correct dependencies and environment variables. You may also need to configure your application to work with Vercel's platform.
Other Scripts

 

    1. Open you command prompt
    2. yarn lint:fix (This will format your code and fix auto fixable eslint error)

React Installation

 

  1. Please follow the instructions in the video to see how you can install react on your hosting:

    1. For local host -
      1. Open you command prompt
      2. npm install or npm install --legacy-peer-deps
      3. npm run dev (will start the dev server at http://loaclhost:3000)
     

 




Nguồn: Topcode.vn

BÌNH LUẬN (0)

   BÌNH LUẬN  


ĐÁNH GIÁ (1)

ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
09:40 - 10/4/2024
Code rất tốt
Code rất tốt và phù hợp để phát triển

HỖ TRỢ TRỰC TUYẾN