Coinara Documentation

📘 Introduction

Coinara is a modern and fully responsive React template crafted for cryptocurrency exchanges, NFT marketplaces, and blockchain startups. It features clean UI components, interactive animations, and easy customization with Tailwind CSS and Vite for a fast developer experience.

It includes multiple homepage variations, trading sections, NFT listings, blog pages, and authentication screens — all crafted with a clean, futuristic UI and smooth animations powered by GSAP and AOS.

✨ Features

📁 Folder Structure

coinara-template/
│
├── public/             # Static assets
│   ├── images/
│   │   ├── favicon/
│   │   └── placeholder/
│   └── videos/
│       └── placeholder/
│
├── src/                # Main React source files
│   ├── components/     # Reusable UI components
│   ├── pages/          # All page components
│   ├── route/          # App routes configuration
│   ├── styles/         # Global CSS and Tailwind theme
│   ├── utils/          # Constants, types, helper functions
│   ├── svg/            # SVG icons and shapes
│   ├── index.tsx       # Main app render
│   ├── vite-env.d.ts   # env types
│   └── App.tsx         # Main app entry
│
├── package.json        # Project dependencies
├── vite.config.ts      # Vite configuration
├── tsconfig.json       # TypeScript configuration
├── .env-placeholder    # Example environment variables
└── README.md

⚙️ Installation & Setup

Requirements

• Node.js 18 or higher
• npm, yarn, or pnpm package manager

Installation Steps

1. Extract the downloaded zip file.
2. Open the coinara-template folder in your terminal.
3. Run the following command to install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

4. Start the local development server:

   npm start

5. The app will be running on:

   http://localhost:3000

💻 Development Commands

🚀 Build for Production

To create a production-ready build, run:

npm run build

• The output will be located in the dist/ folder.
• A JavaScript obfuscation process runs automatically to protect your source code.
• To preview the production build locally:

  npm run preview

Deployment

You can deploy the production-ready dist/ folder to:

Just ensure your _redirects file is included to handle React Router routes:

/*    /index.html   200

🔧 Environment Variables

Rename the .env-placeholder file to .env and update values as needed.

Example:

# CRYPTO IMAGES
VITE_CRYPTO_COMMUNITY_IMAGE = /images/placeholder/1080x1347.svg
VITE_CRYPTO_BACKGROUND_IMAGE = /images/placeholder/764x581.svg

# BLOG IMAGES
VITE_CRYPTO_INVESTMENT_ANALYSIS_IMAGE = /images/placeholder/1080x720.svg

# VIDEO
VITE_COINARA_GUIDE_VIDEO_URL = /videos/placeholder/placeholder.mp4
VITE_COINARA_GUIDE_FALLBACK_IMAGE = /images/placeholder/670x376.svg

...

You can replace these placeholder paths with your own image or video URLs.

🎨 Customization

Colors & Theme

All colors and gradients are defined in: src/styles/index.css

You can edit color variables inside the @theme block to quickly restyle your template.

--color-gradient-from: #f0b100;
--color-gradient-to: #ff6900;
--color-background: #ffffff;
--color-text: #000000;
...

Fonts & Typography

Font configuration is handled in index.css. You can replace it with any preferred Google Font or local font by importing it at the top.

Quick Tips

• Change logos: src/svg/Logo.tsx or replace SVG content
• Modify SEO meta tags: src/components/common/SEO.tsx
• Update navigation menu: src/utils/utils/index.ts
• Edit footer: src/components/layouts/Footer.tsx
• Customize background animations: src/components/animation/
• Edit Routes: /src/route/Routes.tsx

Adding New Pages

1. Create a new file inside /src/pages/
2. Add the route entry in /src/route/Routes.tsx

<Route path="/new-page" element={<NewPage />} />

📄 Included Pages

📦 Main Dependencies

🙏 Credits & Sources

💬 Support Information

This author provides limited support for this item through the official email contact form. Support is primarily focused on bug fixes, technical questions, and usability issues.