• React JS
• Next JS
• Express JS
• Mongodb database
• Mongoose
• Stripe
• Nodemailer
• 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
• Image background
• Easy to customize
• Flexible and multi-purpose
• Valid / CSS3
• 24/7 Awesome support
• Detailed documentation

• harri-admin-panel - An admin-pnale Template file. this file you can edit and use for your business.
• harri-backend - An backend file. this file you ca edit and use for your business.
• harri-front-end - An React Template file. this file you ca edit and use for your business.
• Documentation - This folder contains what you are reading now :)

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

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)

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)

1. From the project folder go to src layout menu-data.jsOpen the menu you want to use
2. Then customize the menu

1. From the project folder go to src layout footer.jsOpen the menu you want to use
2. Then customize the footer data

1. From the project folder go to pages 404 Open the menu you want to use
2. Then customize the 404 data

1. From the project folder go to public assetsscss utils color.scss Open the menu you want to use
2. Then customize the color data

1. From the project folder go to public assets scss components theme.scss Open the menu you want to use
2. Then customize the Typography data