Fusion

Impactful design, created effortlessly.

Fusion is a modern, responsive frontend built with React, TypeScript, and Tailwind CSS. It combines a clean, intuitive interface with a polished component system so you can move from idea to interface without friction.

🔗 Live demo: fusion-ready.netlify.app

---

Features

• Sleek, responsive UI built on shadcn/ui and Radix UI primitives
• Smooth animations and transitions powered by Framer Motion
• Fully typed with TypeScript for safer, more maintainable code
• Form handling and validation with react-hook-form + zod
• Client-side routing via react-router-dom
• Data fetching and caching with @tanstack/react-query
• Charting support via recharts
• Fast dev/build tooling powered by Vite

Tech Stack

Category	Tools
Framework	React 18 + TypeScript
Build tool	Vite
Styling	Tailwind CSS, tailwindcss-animate
UI components	shadcn/ui, Radix UI primitives
Forms/Validation	React Hook Form, Zod
Routing	React Router DOM
Data fetching	TanStack Query
Animation	Framer Motion
Testing	Vitest, React Testing Library
Linting	ESLint
Deployment	Netlify

Prerequisites

• Node.js 18+ (recommended: latest LTS)
• npm (or Bun, since a bun.lockb lockfile is included)

Getting Started

Clone the repository and install dependencies:

git clone https://github.com/sahilleth/Fusion.git
cd Fusion
npm install

Start the development server:

npm run dev

The app will be available at http://localhost:5173 (Vite's default port).

Available Scripts

Script	Description
npm run dev	Start the local development server
npm run build	Build the app for production
npm run build:dev	Build the app in development mode
npm run preview	Preview the production build locally
npm run lint	Run ESLint checks
npm run test	Run the test suite once (Vitest)
npm run test:watch	Run tests in watch mode

📁 Project Structure

Fusion/
├── src/                # Application source code (components, pages, hooks, etc.)
├── index.html          # HTML entry point
├── vite.config.ts       # Vite configuration
├── tailwind.config.ts   # Tailwind CSS configuration
├── components.json      # shadcn/ui component configuration
├── netlify.toml         # Netlify deployment configuration
├── tsconfig*.json       # TypeScript configuration
└── package.json         # Project dependencies and scripts

Deployment

This project is configured for deployment on Netlify (see netlify.toml). To deploy your own version:

1. Push your fork/clone to GitHub.
2. Connect the repository to Netlify.
3. Set the build command to npm run build and the publish directory to dist.

Alternatively, build locally and deploy the dist/ folder to any static hosting provider (Vercel, GitHub Pages, Cloudflare Pages, etc.).

Testing

This project uses Vitest and React Testing Library for unit and component testing.

npm run test

Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙋 Author

Built by sahilleth.