https://github.com/raka-coder/react-supabase-crud-taskmanager
https://github.com/raka-coder/react-supabase-crud-taskmanager
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/raka-coder/react-supabase-crud-taskmanager
- Owner: Raka-coder
- Created: 2025-03-23T07:29:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T08:11:39.000Z (about 1 year ago)
- Last Synced: 2025-03-23T08:28:38.540Z (about 1 year ago)
- Language: JavaScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Manager CRUD Application
This project is a simple task manager application built using Vite, React, Tailwind CSS, and Supabase. It allows users to perform CRUD (Create, Read, Update, Delete) operations on tasks.
## Features
- Add new tasks with a title and description.
- View a list of all tasks.
- Update task details.
- Delete tasks.
- Filter tasks by their completion status.
## Tech Stack
- **Vite**: A build tool that provides a faster and leaner development experience for modern web projects.
- **React**: A JavaScript library for building user interfaces.
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **Supabase**: An open-source Firebase alternative that provides a real-time database and authentication.
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Raka-coder/react-supabase-crud-taskmanager.git
cd react-supabase-crud-taskmanager
```
2. Install the dependencies:
```bash
npm install
```
3. Set up Supabase:
- Go to [Supabase](https://supabase.io) and create an account.
- Create a new project and obtain your API keys.
- Create a `tasks` table using the following SQL:
```sql
create table tasks (
id uuid default uuid_generate_v4() primary key,
title text not null,
description text,
is_completed boolean default false,
created_at timestamp default now()
);
```
- Add `RLS` (Row Level Security) policy.
- Disable `RLS` (Row Level Security) for the table.
4. Configure environment variables:
- Create a `.env` file in the root of your project and add your Supabase credentials:
```
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-anon-key
```
### Running the Application
- Start the development server:
```bash
npm run dev
```
- Open your browser and navigate to `http://localhost:5173` to see the application in action.
### Building for Production
- Build the application for production:
```bash
npm run build
```
- Preview the production build:
```bash
npm run preview
```