A modern full-stack web application built with TanStack Start, React, TypeScript, and Tailwind CSS. This project provides a foundation for building interactive, type-safe web applications.
Live Demo: https://6a07ebad49354371b3afaf12--frolicking-smakager-924ac0.netlify.app/
- Framework: TanStack Start - Full-stack React framework
- Language: TypeScript
- UI Framework: React 19
- Routing: TanStack React Router
- State Management: TanStack React Query
- Styling: Tailwind CSS with custom animations
- Form Handling: React Hook Form with Zod validation
- Component Library: Radix UI (comprehensive accessible components)
- Database: Supabase
- Build Tool: Vite
- Charts: Recharts
- Icons: Lucide React
- Code Quality: ESLint + Prettier
- Node.js 18+
- npm, yarn, or pnpm package manager
# Clone the repository
git clone https://github.com/YuvarajGML/insight-weaver.git
cd insight-weaver
# Install dependencies
npm install
# or
yarn install
# or
pnpm install# Start development server
npm run dev
# Build for production
npm run build
# Build in development mode
npm run build:dev
# Preview production build
npm run preview
# Lint code
npm run lint
# Format code
npm run formatinsight-weaver/
├── src/
│ ├── components/ # React components
│ ├── routes/ # TanStack Router routes
│ ├── api/ # API handlers
│ └── utils/ # Utility functions
├── public/ # Static assets
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── tailwind.config.js # Tailwind CSS configuration
This project includes a complete set of Radix UI components:
- Accordion, Alert Dialog, Avatar
- Checkbox, Collapsible, Context Menu, Dialog
- Dropdown Menu, Hover Card, Label
- Menubar, Navigation Menu, Popover, Progress
- Radio Group, Scroll Area, Select, Separator
- Slider, Switch, Tabs, Toggle, Tooltip
All components are styled with Tailwind CSS for a consistent design system.
@tanstack/react-start- Full-stack framework@tanstack/react-router- Type-safe routing@tanstack/react-query- Server state management
@radix-ui/*- Accessible component libraryreact-hook-form- Flexible form handlingzod- TypeScript-first schema validationtailwindcss- Utility-first CSS framework
recharts- Composable charting library@supabase/supabase-js- Database and auth
date-fns- Date manipulationlucide-react- Icon libraryclass-variance-authority- Component variantssonner- Toast notifications
-
Set up environment variables (if needed):
# Create a .env.local file with your configuration VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_key -
Start the development server:
npm run dev
-
Open your browser:
- Navigate to
http://localhost:5173(or the port shown in terminal)
- Navigate to
-
Start building:
- Add routes in
src/routes/ - Create components in
src/components/ - Extend the UI with more Radix components as needed
- Add routes in
- Configured with strict mode enabled
- Full type safety across the application
- Extended with custom animations and plugins
- Tailwind UI integration ready
- Ensures code quality and consistency
- Run
npm run formatto auto-format code
Visit the live application: https://6a07ebad49354371b3afaf12--frolicking-smakager-924ac0.netlify.app/
npm run build
# Deploy to Netlify- TanStack Start Docs
- TanStack Router Docs
- TanStack React Query Docs
- Radix UI Documentation
- Tailwind CSS Documentation
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private. Please contact the repository owner for licensing information.
- GitHub: @YuvarajGML
Happy coding! 🎉