About The Project

This project is a CRUD application built with React and TypeScript. It features state management using Context API, Reducer, and Redux, and is styled with Tailwind CSS. The project demonstrates best practices for scalable state management and modern frontend development workflows.

User Interface

• Clean interface built with React and TypeScript.
• Dynamic elements for user interaction powered by Context API, Reducer, and Redux.
• Styled with Tailwind CSS for a modern and responsive design.

Built With

This project was developed using a variety of modern web technologies and libraries to ensure a responsive and dynamic user experience.

• [![React][React.com]][React-url]
• [![TypeScript][TypeScript.com]][TypeScript-url]
• [![Tailwind CSS][TailwindCSS.com]][TailwindCSS-url]
• [![Vite][Vite.com]][Vite-url]
• [![Redux][Redux.com]][Redux-url]

(back to top)

Getting Started

Follow these steps to set up the project locally and get it running on your machine. The instructions will guide you through the process of cloning the repository and configuring any required settings.

Prerequisites

Before setting up the project, make sure you have the following tools and libraries installed or configured as needed:

• Node.js
  Ensure you have Node.js installed. You can download it from Node.js.

• npm
  npm is included with Node.js. Verify the installation by running:

  npm -v
  

Installation

Follow these steps to install and set up the project on your local machine:

1. Clone the repository

   git clone https://github.com/gayanukabulegoda/React-Crudify-TS.git
   

2. Navigate to the project directory

   cd React-Crudify-TS
   

3. Install dependencies

   npm install
   

4. Start the development server

   npm run dev
   

(back to top)

Usage

To use the application, follow these steps:

1. Add Data: Navigate to the "Add" section to add new customers or items.
2. Update Data: Use the "Update" section to modify existing customer or item details.
3. Delete Data: Go to the "Delete" section to remove customers or items from the system.
4. View Dashboard: The "Dashboard" provides an overview of all customers and items.

(back to top)

Branches

The project is available in three branches, each demonstrating different state management techniques:

• dev/context-api: Implements state management using Context API.
• dev/reducer: Implements state management using Reducer.
• dev/redux: Implements state management using Redux.

Switch to the appropriate branch to explore different implementations.

  git checkout dev/context-api  # For Context API
  git checkout dev/reducer      # For Reducer
  git checkout dev/redux        # For Redux

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

© 2025 Gayanuka Bulegoda