Theme Color

Font Settings

Settings

Documentation

Cryptoki - NFT Digital Marketplace React Redux Template

Cryptoki is a one page style personal portfolio template that can be used to build your personal portfolio website. You can choose Cryptoki to build your online presence. It is very important to have a personal portfolio at current age. In your professional career you must need to have a personal portfolio. Cryptoki is a great template to build your personal portfolio using Cryptoki.

Main Features

  • Develop with NextJs
  • Fully Responsive
  • Ready to used widget
  • Detailed Documentation

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

Installing

Make sure if NODEJS is installed on your computer

Run npm install -g create-react-app command from your teminal to install React Globally.

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`.

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 nextjs.js checkout nextjs

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

Main Content

_app.js Structure
import Head from "next/head";
import { useEffect } from "react";
import { Provider } from "react-redux";
import store from "../src/redux/store";
import { countdown } from "../src/utils";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    countdown();
  }, []);

  return (
    <Provider store={store}>
      {" "}
      <Head>
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/img/favicon01.png"
        />

        <title>NFT</title>
      </Head>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

Create a Page

How to create a custom page

1. Create page component pages\MyPage.js

import React from "react";

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

Folder Structure

Folder Directories
  • public
    • css
    • img
    • static
  • src
    • components
    • layouts
      • Footer.js
      • Header.js
      • Layout.js
    • utils.js
  • pages
  • package.json

Layout Layout is controlled by settings object LayoutSettings inside src/layout/Layout.js

Layout.js 

  import React, { Fragment, useEffect } from "react";
  import { connect } from "react-redux";
  import ImageView from "../components/ImageView";
  import SoundCloudPopup from "../components/SoundCloudPopup";
  import VideoPopup from "../components/VideoPopup";
  import { getBlogs } from "../redux/action/blog";
  import { getCollector } from "../redux/action/collectors";
  import { getCreator } from "../redux/action/creator";
  import { getData } from "../redux/action/data";
  import { niceSelect, notificationList, svgLoadder } from "../utils";
  import BeforFooter from "./footer/BeforFooter";
  import Footer from "./footer/Footer";
  import Header from "./header/Header";
  import Nav from "./header/Nav";
  
  const Layouts = ({ children, getData, getCreator, getCollector, getBlogs }) => {
    useEffect(() => {
      const Waves = require("node-waves");
      getData();
      getCreator();
      getCollector();
      getBlogs();
      notificationList();
      setTimeout(() => {
        Waves.init();
        Waves.attach(".btn-dark", ["waves-button", "waves-float", "waves-light"]);
        Waves.attach(".btn", ["waves-button", "waves-float", "waves-light"]);
        Waves.attach(".slide-button .btn", [
          "waves-button",
          "waves-float",
          "waves-light",
        ]);
        niceSelect();
        svgLoadder();
      }, 1000);
    }, []);
  
    return (
      <Fragment>
        <VideoPopup />
        <ImageView />
        <SoundCloudPopup />
        <div className="main">
          <Header />
          <Nav />
          {children}
          <BeforFooter />
          <Footer />
        </div>
      </Fragment>
    );
  };
  export default connect(null, { getData, getCreator, getCollector, getBlogs })(
    Layouts
  );

Store Store is Redux inside src/redux/store.js

store.js 

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import rootReducer from "./reducer";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Reducer Reducer is Redux inside src/redux/reducer/index.js

index.js 

  import { combineReducers } from "redux";
  import blog from "./blog";
  import collectors from "./collectors";
  import creator from "./creator";
  import data from "./data";
  import filter from "./filter";
  
  export default combineReducers({
    data,
    filter,
    creator,
    collectors,
    blog,
  });

Thank You!

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.

-->