https://github.com/react-ts-apps/task-nest-app
A task board application that displays tasks organized by status in separate columns. Users can drag and drop tasks between columns to update their status. The app also supports adding new tasks and editing existing ones.
https://github.com/react-ts-apps/task-nest-app
dnd-kit react styled-components tailwindcss typescript webpack
Last synced: 4 months ago
JSON representation
A task board application that displays tasks organized by status in separate columns. Users can drag and drop tasks between columns to update their status. The app also supports adding new tasks and editing existing ones.
- Host: GitHub
- URL: https://github.com/react-ts-apps/task-nest-app
- Owner: React-Ts-Apps
- Created: 2025-04-20T13:55:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-03T13:57:53.000Z (5 months ago)
- Last Synced: 2026-02-04T02:18:52.871Z (5 months ago)
- Topics: dnd-kit, react, styled-components, tailwindcss, typescript, webpack
- Language: TypeScript
- Homepage: https://task-nest-app.onrender.com/
- Size: 1.89 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TaskNest Frontend
TaskNest is a task management application built with **React**, **TypeScript**, **Webpack**, and styled using **TailwindCSS** and **styled-components**. This project aims to showcase modern frontend development practices with a modular and scalable architecture.
## 🌍 Live Demo
**🔗 [View TaskNest Live](https://task-nest-app.onrender.com/)**
---
## 🚀 Features
- ⚛️ React 19 for robust UI
- 🔷 TypeScript for static type safety
- 🎨 TailwindCSS & styled-components for flexible styling
- 🛠️ Custom Webpack configuration
- 🧩 ESLint with TypeScript and React plugins
- 🔄 Theme context management
- 📦 Ready for GitHub Pages deployment
## 🧩 Setup Instructions
### 📦 1. Clone the Repository
git clone https://github.com/react-ts-apps/task-nest-app.git
cd task-nest-app/task-front-end
### 🔧 2. Install Dependencies
npm install
### 🚀 3. Start Development Server
npm start
### 🏗️ 4. Build for Production
npm run build
### 🎨 5. Build TailwindCSS Separately (Optional)
npm run build:css
### 🧪 6. Linting
This project uses ESLint with the following configuration:
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-plugin-react
- eslint-plugin-import
To lint your code:
npx eslint src --ext .ts,.tsx
### 🔗 7. Deployment (Render)
- Deployed using Render.
- Visit:
https://render.com/
### 🧰 8. Tech Stack
- React 19
- TypeScript
- Webpack 5
- TailwindCSS 4
- styled-components
- ESLint
- PostCSS