https://github.com/pushpender015/task-nest

https://github.com/pushpender015/task-nest

context-api css customhooks html javascript localstorage reacthooks reactjs redux tailwindcss

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/pushpender015/task-nest
• Owner: Pushpender015
• Created: 2025-03-07T12:49:43.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-03-07T15:44:46.000Z (4 months ago)
• Last Synced: 2025-03-12T11:16:17.478Z (4 months ago)
• Topics: context-api, css, customhooks, html, javascript, localstorage, reacthooks, reactjs, redux, tailwindcss
• Language: JavaScript
• Homepage: https://task-nest-five.vercel.app
• Size: 62.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Task Nest

Task Nest is a modern, responsive Todo application built with React, Redux Toolkit, and Tailwind CSS. It offers a simple authentication mechanism, robust todo management with CRUD operations, an integrated weather widget, and a customizable dark/light theme.

## Features

- **User Authentication**  

  A simple login page that requires users to enter valid credentials to access the app.  

  **Login Credentials:**  

  - **Username:** `admin`  

  - **Password:** `password`

- **Todo Management**  

  - Add new todos, update existing ones, mark them as complete/incomplete, and delete them.  

  - Two display modes: List view and Block view.  

  - Todos are stored in Redux and persisted to localStorage.

- **Weather Widget**  

  Displays the current temperature fetched from the [Open Meteo API](https://open-meteo.com/).  

  - Automatically refreshes every 10 minutes with a manual refresh option.

- **Responsive Sidebar**  

  Features user profile information, navigation links, and a progress indicator (circular progress bar) based on the completion of todos.

- **Dark/Light Theme Toggle**  

  Easily switch between dark and light modes. The selected theme is stored in localStorage and applied globally.

- **Persistent State**  

  Redux state changes (authentication status and todos) are persisted in localStorage, so your session remains active even after a page refresh.

## Technologies

- **React:** For building the user interface with functional components and hooks.

- **Redux Toolkit & React Redux:** For state management and data persistence.

- **Tailwind CSS:** For a utility-first approach to styling.

- **Vite:** For a fast and modern development environment.

- **Heroicons:** For clean, modern icons.

- **LocalStorage:** For persisting user data and session state.

## Project Structure

```

Task Nest/

├── public/

│   └── index.html               # HTML template

├── src/

│   ├── Components/

│   │   ├── Login.jsx            # Login page component

│   │   ├── Sidebar.jsx          # Sidebar with user profile and progress bar

│   │   ├── TodoForm.jsx         # Form component for adding todos

│   │   ├── TodoItem.jsx         # Todo item component for listing/updating/deleting todos

│   │   └── WeatherWidget.jsx    # Weather widget component displaying temperature

│   ├── context/

│   │   ├── TodoContext.js       # Todo context (example usage; Redux handles state)

│   │   └── ThemeContext.jsx     # Theme context for dark/light mode toggle

│   ├── Features/

│   │   ├── auth/

│   │   │   └── authSlice.js     # Redux slice for authentication

│   │   └── todos/

│   │       └── todosSlice.js    # Redux slice for todo management

│   ├── hooks/

│   │   └── useFetch.js          # Custom hook for fetching weather data

│   ├── App.jsx                  # Main application component

│   ├── index.css                # Global styles with Tailwind CSS

│   ├── main.jsx                 # Entry point; renders App with Redux and Theme providers

│   └── store.js                 # Redux store configuration with localStorage persistence

├── package.json                 # Project dependencies and scripts

├── postcss.config.js            # PostCSS configuration

├── tailwind.config.js           # Tailwind CSS configuration

└── vite.config.js               # Vite configuration file

```

## Getting Started

### Prerequisites

- [Node.js](https://nodejs.org/) (v14 or later)

- npm (v6 or later) or yarn

### Installation

1. **Clone the repository:**

   ```bash

   git clone 

   ```

2. **Navigate to the project directory:**

   ```bash

   cd 10todocontextlocal

   ```

3. **Install dependencies:**

   ```bash

   npm install

   ```

4. **Start the development server:**

   ```bash

   npm run dev

   ```

   The application will run at `http://localhost:3000` (or the port specified by Vite).

## Contributing

Contributions are welcome! Please open issues or submit pull requests for improvements, bug fixes, or new features.

## Acknowledgements

- **Open Meteo API:** For providing weather data.

- **Vite:** For a blazing fast development experience.

- **Tailwind CSS:** For efficient styling.

- **Redux Toolkit:** For simplifying state management.