Skip to content

TypeScript-based React CRUD app using Formik for validation, Context API for state management, and IndexedDB for persistent storage. Features include Chakra UI tables, search, and filters for upvoted and recent records.

Notifications You must be signed in to change notification settings

moteeb-asad/react-crud

Repository files navigation

React CRUD with IndexedDB

A modern CRUD application built with React, TypeScript, and Vite, using IndexedDB for client-side storage.

Tech Stack

  • React 18
  • TypeScript
  • Vite
  • Chakra UI
  • Formik & Yup
  • IndexedDB

Features

  • Create, Read, Update, Delete operations
  • Client-side storage using IndexedDB
  • Form validation with Formik and Yup
  • Modern UI with Chakra UI
  • Type-safe development with TypeScript

Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
git clone https://github.com/yourusername/react-crud.git
cd react-crud
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev

The application will be available at http://localhost:3000.

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build locally
  • npm run lint - Run ESLint
  • npm run type-check - Run TypeScript type checking

Project Structure

src/
├── components/     # React components
├── context/       # React context
├── hooks/         # Custom hooks
├── pages/         # Page components
├── styles/        # Global styles
├── types/         # TypeScript types
└── utils/         # Utility functions

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License.

About

TypeScript-based React CRUD app using Formik for validation, Context API for state management, and IndexedDB for persistent storage. Features include Chakra UI tables, search, and filters for upvoted and recent records.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published