104 Picture

Your gallery download complete

Download now

813 Point

You are doing great job!

Read now

3,756

New Followers on Twitter

Find more
  • Anyone send me a message
  • Anyone seeing my profile page
  • Anyone posts a comment on my post

Documentation

Tendex - Cryptocurrency Exchange NextJs Template + Dashboard

Tendex is a popular WebApp template for multi purpose use . It’s responsive React template, which is based on the Bootstrap framework. It utilizes all of the Bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used in all type of business an organisations website.

React.JS Installation & Setup A JavaScript library for building user interfaces.

Install npm: Run npm install command from your project directory. It will create 'node_module' folder in this all dependency files will be install with this command.

Run Project: Run npm run dev command from your project directory. With is command file will be compiled and it will be loaded on local server `http://localhost:3000`.

Run Sass: Run npm run sass command from your project directory. With is command file will be compiled and it will be loaded on local server `http://localhost:3000`.

Production Build: Run npm run build Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Further help: To get more help on the Next.js checkout Next.js

Note: You can learn more in the Create React App Documentation. To learn Next.js, check out the Next.js Documentation.

Main Content

_app.js Structure
import type { AppProps } from "next/app";
import { Fragment, useEffect, useState } from "react";
import PreLoader from "../src/components/PreLoader";
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
    const [load, setLoad] = useState(true);
    useEffect(() => {
    setTimeout(() => {
        setLoad(false);
    }, 1000);
    }, []);
    return (
    <Fragment>
        {load && <PreLoader />}
        <Component {...pageProps} />
    </Fragment>
    );
}

export default MyApp;
                          

Dependencies

package.json
{
"name": "tendex-ts",
"private": true,
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "sass": "node-sass --watch public/scss/style.scss public/css/style.css --source-map public/css/style.css.map"
},
"dependencies": {
    "apexcharts": "^3.30.0",
    "next": "12.0.4",
    "node-sass": "^6.0.1",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-bootstrap": "^1.6.4",
    "react-dom": "17.0.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-slick": "^0.28.1",
    "react-sparklines": "^1.7.0",
    "slick-carousel": "^1.8.1"
},
"devDependencies": {
    "@types/node": "16.11.9",
    "@types/react": "17.0.35",
    "@types/react-slick": "^0.23.7",
    "@types/react-sparklines": "^1.7.2",
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.4",
    "typescript": "4.5.2"
}
}


Create a Page

How to create a custom page

1. Create page pages\blank.js

function Blank() {

export function MyPage() {
  return(
   <h1>Hello!</h1>
  ) 
} 	
export default Blank;						
						

Routing

Linking between pages

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.

A React component called Link is provided to do this client-side route transition.

import Link from 'next/link'
					
function Home() {
  return(
	<ul>
	   <li>
		<Link href="/">
		  <a>Home</a>
		</Link>
	   </li> 
	   <li>
		<Link href="/about">
		  <a>About Us</a>
		</Link>
	   </li> 
	   <li>
		<Link href="/blog/hello-world">
		  <a>Blog Post</a>
		</Link>
	   </li> 
	</ul>
  ) 
} 	
export default Home;						
							

In the example above we have multiple links, each one maps a path (href) to a known page:

  • / pages/index.js
  • /about pages/about.js
  • /blog/hello-world pages/blog/[slug].js

Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.

Vercel (Recommended)

Getting started

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:
  • Sign up to Vercel (no credit card is required).
  • After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
  • Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
  • After importing, it’ll deploy your Next.js app and provide you with a deployment URL
  • To get more help on the deployment checkout Deployment
In terminal, follow these steps:

Step-1: Run npm i -g vercel


Step-2: Check version vercel --version


Step-3: login in vercel vercel login


Step-4: write your mail abc@example.com


Step-5:
Now, answer some questions
1. do you want deploy project on vercel.
2. Link to existing project?
3. write your project name.
4. In which directory is your code located?

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

REGULAR SUPPORT : You have in template support if you face any issue with the usage of it then you can contact us on below Email ID.

EXTENDED SUPPORT : Development it is chargeable according to your requirement. For that you need to mail us your requirement on below Email ID.

COST OF SERVICE : Depends on the hours required. But as you are already using our template we have discounted rates for our template customer.

EXTENDED LICENSE : With the Extended Support we also include Extended License. So you save much more with your investment than you will with purchasing Regular License and later buying Extended one + Development cost.

You will get a quick reply from our team and feel free to contact us. We don’t charge for requirement discussion so don’t worry.

Contact Us : sabujhasansarker@gmail.com

Skype : sabujhasansarker