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.
- Skype: saujhasansarker
- Gmail: saujhasansarker@gmail.com
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.
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;
{
"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
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?
- Apex Chart: Click to See
- Next Js: Click to See
- Node Sass: Click to see
- React Bootstrap Click to See
- React-Perfect-Scrollbar Click to See
- React Slick Click to See
- React Slick Carousel Click to See
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
