A full-stack web application that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The frontend is built with React.js, the backend uses Node.js (with Express), and data is persisted in a MySQL database. This project is a practical example for beginners and intermediate developers looking to understand how to connect a React frontend to a Node.js backend with a relational database.
- Create new records in the database via an intuitive UI.
- Read and display existing records in a dynamic table.
- Update existing records with inline editing or dedicated forms.
- Delete records with confirmation prompts for safety.
- Frontend: React.js, TailwindCSS
- Backend: Node.js, Express.js
- Database: MySQL
git clone https://github.com/Josephat-S/CRUD-using-React.js-and-Node.js-with-Mysql.git
cd CRUD-using-React.js-and-Node.js-with-Mysql- Sever
- Install dependencies:
npm install-
Configure your MySQL database:
- Create a database in MySQL.
- Update your database configuration with your DB credentials.
-
Start the backend server:
npm start- Navigate to the frontend directory.
- Install dependencies:
npm install- Start the React development server:
npm run devOpen http://localhost:5173 in your browser.
- Use the web interface to add, view, edit, and delete records.
- All changes are reflected in the MySQL database.
This project is licensed under the MIT License.
This project is a hands-on demonstration of full-stack web development using modern JavaScript technologies. It provides a clear example of how to:
- Structure a web application with separate client and server codebases.
- Connect a React frontend to a Node.js/Express backend.
- Interface with a MySQL database for persistent data storage.
Perfect for those learning full-stack development or seeking a template for their own CRUD-based projects.