/postgres-react-text-search

Basic text search in PostgreSQL with LIKE operator and method to avoid SQL injection on simple React frontend

Primary LanguageJavaScriptMIT LicenseMIT

Contributors Forks Stargazers Issues MIT License LinkedIn


PostgreSQL-React Basic Text Searching

Basic text search in PostgreSQL with LIKE operator and method to avoid SQL injection on simple React frontend

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Resources

About The Project

More of a personal repo - an exercise to learn about SQL injection attacks and interacting between React and PostgreSQL with minimal backend (I usually would throw Django in here)

Built With

Obviously this template was built with PostgreSQL and React. Most React code through create-react-app. Here's links to Django and React:

Getting Started

Just a simple search. The React frontend is pretty much vanilla, and the pg-database is simple.

Prerequisites

For this template to work you need to have nodejs and postgresql installed. Just download install both and then:

Update node to the most recent version:

npm install npm@latest -g

Installation

  1. Clone the repo and make it your current working directory
    git clone https://github.com/repo.git
    then
    cd repo

  1. You may have to install react-scripts. Do this by

    npm i -g react-scripts

  2. Create database in PostgreSQL - use the database.sql commands once in psql CLI. Create database partydb, create table users, and insert all users. Copy and paste from document. You can double-check you have 500 users with:

    SELECT COUNT(*) FROM users;

  3. For frontend and backend, get/install all packages for each (while in their directory):

    yarn

    or

    npm install

  4. Run backend with:

    node index

  5. Run frontend with:

    yarn start

    or

    npm start

Usage

To edit the React frontend, see the README.md in /frontend directory

Roadmap

Show a more fleshed out example of using this template using data more than just names.

Let me know of any issues - See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

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

Resources

Definitely check out the PostgreSQL and React documentation for tutorials and questions.