/design-to-code

A curated collection of design inspirations sourced from Twitter. Each design is coded and implemented, showcasing different approaches and techniques in web development.

Primary LanguageTypeScript

⚛️ React + Vite Sass kit

A simple, flexible and batteries-included starter template to kickstart your React projects with ease.

The Stack includes

  • Typescript for type safe and scalable React app
  • React.js as the framework for building frontend application
  • Tanstack Router for type-safe and flexible client-side routing for React app
  • Tailwind CSS for styling
  • Shadcn UI as the UI component library
  • Vite for fast and optimized development and production build
  • Biome for formatting and linting
  • pnpm as fast, efficient package-manager

Installation

  1. Clone the repository git clone https://github.com/rahu1gg/react-vite-stack.git
  2. Navigate to the directory cd react-vite-stack
  3. Install dependencies pnpm install
  4. Starting the development server pnpm dev
  5. This will launch the app in development mode. Open http://localhost:5143 to view it in the browser.

Make sure you have Node.js and pnpm installed in your machine

Project Structure

.
├── public
│   └── ...
├── src
│   ├── client
│   │   ├── providers
│   │   └── store
│   ├── components
│   │   ├── global
│   │   └── ui
│   ├── lib
│   │   └── utils
│   ├── routes
│   │   ├── __root.tsx
│   │   └── index.tsx
│   ├── styles
│   │   └── main.css
│   ├── main.tsx
│   └── ...
├── .gitignore
├── biome.json
├── components.json
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── vite.config.ts
└── ...

Support & Contribute

If you found this project helpful or enjoyed using it, please consider giving it a ⭐️ on GitHub! It helps others find the project and motivates us to keep improving.