Front-end Boilerplate

Front-end boilerplate using React.js, React-three-fiber, Tailwind CSS, Typescript, and GSAP library.

Features

• Vite.js for overall bundling
• React.js framework for web app development
• Third party library for redux(redux/toolking) and router
• Tailwind CSS
• Three.js through React-three-fiber for 3d-development
• GSAP library for fast and easy animation
• Typescript for scalability.

Run Locally

Download the repository

Go to the project directory

Install dependencies(npm or yarn):

  npm install
  yarn

Start the vite development server(npm or yarn):

  npm run dev
  yarn dev

Build your work(npm or yarn, target ES6)

  npm run build
  yarn build

Folder Structure

Folder name is self explanatory

src
├── assets
│   ├── fonts
│   ├── icons
│   ├── images
│   ├── videos
│   └── index.ts
├── components
│   ├── TestComponent.tsx
│   └── index.ts
├── content
│   ├── TestContent.ts
│   └── index.ts
├── hooks
│   ├── use-name-of-hooks.ts
│   └── index.ts
├── pages
│   ├── TestPage.tsx
│   └── index.ts
├── services
│   ├── TestService.tsx
│   └── index.ts
├── stores
│   ├── TestStore.ts
│   └── index.ts
└── types
    ├── TestTypes.ts
    └── index.ts

Documentation

React.JS
React-router
Redux-toolkit
React-three-fiber Three.JS
Gsap
Tailwind CSS
Typescript

Authors

• @abeljrgit