https://github.com/dotmavriq/tiligen
A Gruvbox dark-themed tier list maker with drag and drop functionality
https://github.com/dotmavriq/tiligen
gruvbox react tierlist tierlistmaker tiermaker typescript vitejs
Last synced: 2 months ago
JSON representation
A Gruvbox dark-themed tier list maker with drag and drop functionality
- Host: GitHub
- URL: https://github.com/dotmavriq/tiligen
- Owner: dotMavriQ
- Created: 2025-02-27T13:23:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T16:18:00.000Z (over 1 year ago)
- Last Synced: 2025-02-27T23:03:03.045Z (over 1 year ago)
- Topics: gruvbox, react, tierlist, tierlistmaker, tiermaker, typescript, vitejs
- Language: TypeScript
- Homepage: https://dotmavriq.github.io/TiLiGen/
- Size: 187 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gruvbox Tier List
A Gruvbox dark-themed tier list maker with drag and drop functionality.
## Features
- Clean, minimalist Gruvbox dark theme
- Drag and drop items between tiers
- Create new items
- Reset the grid
- Automatically snap items to grid positions
## Tech Stack
- React
- TypeScript
- Vite
- Styled Components
- react-beautiful-dnd
## Getting Started
### Prerequisites
- Node.js (v14+)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/tierlist.git
cd tierlist
```
2. Install dependencies:
```bash
npm install
# OR
yarn
```
3. Start the development server:
```bash
npm run dev
# OR
yarn dev
```
4. Open your browser and navigate to `http://localhost:5173`
## Usage
- Drag items from the pool to any tier
- Rearrange items within tiers
- Click "Add Item" to create a new item
- Click "Reset" to move all items back to the pool
## License
MIT