CRUD Application FullStack

A full-stack CRUD (Create, Read, Update, Delete) application built with React, Node.js, Express, and PostgreSQL. This application allows users to manage client data through a modern and responsive user interface.

Table of Contents

• Features
• Technology Stack
• Installation
• Usage
• License
• Contributing
• Contact

Features

• Client Management: Add, edit, delete, and search for client records.
• Responsive Design: Works seamlessly on various devices.
• Modern UI: Built using Tailwind CSS and DaisyUI for an attractive user interface.
• PostgreSQL integration for storing database.
• RESTful API with Express.js

Technology Stack

• Frontend:
  • React
• Backend:
  • Node.js
  • Express.js
• Database:
  • PostgreSQL
• Styling:
  • Tailwind CSS
  • DaisyUI

Project Structure

Crud Application/
│ 
├── crud-backend/ 
│   ├── /src
│   │   ├── /controllers
│   │   │   └── userController.js
│   │   ├── /routes
│   │   │   └── userRoutes.js
│   │   ├── /services
│   │   │   └── userService.js
│   │   ├── db.js
│   │   └── index.js
│   ├── .env
│   └── package.json
├── crud-frontend/
│   ├── /public
│   ├── /src
│   ├── index.html
│   ├── package.json
│   ├── ReadMe.md
│   └── etc
└── README.md

Prerequisites

• Node.js (v18+ recommended)
• npm
• PostgreSQL
• Git (optional)

Installation

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/ishanpeshkar/Crud-Application-FullStack.git

2. Navigate to the project directory:

   cd Crud-Application-FullStack

3. Install backend dependencies:

   cd backend
   npm install

4. Install frontend dependencies:

   cd ../frontend
   npm install

5. Set up the PostgreSQL database:

   • Ensure PostgreSQL is installed and create a database as per the instructions in the repository. Database Setup
   • Start PostgreSQL.
   • Create the database and table.
   • Configure environment variables: Edit crud-backend/.env:

     PG_USER=postgres
     PG_HOST=localhost
     PG_DATABASE=clients_db
     PG_PASSWORD=your_postgres_password
     PG_PORT=5432
     

Usage

1. Run the backend server:

   cd backend
   npm start

2. Run the frontend application:

   cd frontend
   npm start

Run the Application

1. Start Backend

   cd crud-backend
   npm run dev

   or

   nodemon src/index.js

2. Start Frontend

   cd ../crud-frontend
   npm run dev

3. Open your browser and navigate to http://localhost:3000 to access the application.

License

This project is not licensed. Please check the repository for details.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue for any improvements or suggestions.

Contact

For any inquiries or feedback, please contact:

• Ishan Peshkar - GitHub Profile

Usage

• Open the frontend URL in your browser.
• Use the dashboard to add, edit, delete, and search clients.
• All changes are saved in the PostgreSQL database.

Troubleshooting

• Port in use: Change the port in the backend or frontend config.
• Database errors: Ensure PostgreSQL is running and .env credentials are correct.
• CORS errors: Backend should use cors() middleware.
• Dependencies missing: Run npm install in both `crud.