Skip to content

Commit eebef3c

Browse files
authored
Update README.md
1 parent 08d30c9 commit eebef3c

File tree

1 file changed

+40
-24
lines changed

1 file changed

+40
-24
lines changed

README.md

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,60 @@
1-
# Getting Started with Create React App
1+
# React + Node.js + MySQL CRUD Template
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3+
[![Node.js](https://img.shields.io/badge/Node.js-v18.x-green?logo=node.js&style=for-the-badge)](https://nodejs.org/)
4+
[![React](https://img.shields.io/badge/React-v18.x-blue?logo=react&style=for-the-badge)](https://reactjs.org/)
5+
[![MySQL](https://img.shields.io/badge/MySQL-v8.x-blue?logo=mysql&style=for-the-badge)](https://www.mysql.com/)
6+
[![License](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)](LICENSE)
7+
[![GitHub stars](https://img.shields.io/github/stars/DMS-Ranil/react-node-mysql-crud-template?style=social)](https://github.com/yourusername/yourrepo/stargazers)
8+
[![GitHub followers](https://img.shields.io/github/followers/DMS-ranil?style=social)](https://github.com/yourusername)
49

5-
## Available Scripts
10+
---
611

7-
In the project directory, you can run:
12+
## 🚀 Project Overview
813

9-
### `npm start`
14+
This is a **full-stack CRUD template** using:
1015

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
16+
- **Backend:** Node.js + Express + MySQL (`mysql2` package)
17+
- **Frontend:** React + Bootstrap 5
18+
- **Features:**
19+
- Create, Read, Update, Delete products
20+
- RESTful API with validation & error handling
21+
- Responsive UI with React Hooks
22+
- Simple and clean code to jumpstart your projects
1323

14-
The page will reload when you make changes.\
15-
You may also see any lint errors in the console.
24+
Perfect starter boilerplate for beginners and intermediate developers.
1625

17-
### `npm test`
26+
---
1827

19-
Launches the test runner in the interactive watch mode.\
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
28+
## 🎯 Features
2129

22-
### `npm run build`
30+
- Fully functional CRUD operations on Products
31+
- Backend API with MySQL connection pooling
32+
- React frontend with Bootstrap styling
33+
- Loading states and user-friendly alerts
34+
- Modular, well-structured codebase
35+
- Easy to customize and extend
2336

24-
Builds the app for production to the `build` folder.\
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
37+
---
2638

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
39+
## 🎞️ Demo
2940

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
41+
<img width="1889" height="876" alt="Demo Picture" src="https://github.com/user-attachments/assets/8b8ebae6-07c3-4101-8b28-4fdc0b890030" />
3142

32-
### `npm run eject`
3343

34-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
44+
---
3545

36-
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
46+
## 💻 Getting Started
3747

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
48+
### Prerequisites
3949

40-
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
50+
- Node.js v18 or newer
51+
- MySQL server installed and running
52+
- `npm` package manager
4153

54+
### Setup Backend
4255

43-
<img width="1889" height="876" alt="Screenshot 2025-11-15 143546" src="https://github.com/user-attachments/assets/016554a0-0c89-4a06-9272-4c36e683f355" />
56+
1. Clone the repo:
4457

58+
```bash
59+
git clone https://github.com/DMS-ranil/react-node-mysql-crud-template
60+
cd react-node-mysql-crud-template/backend

0 commit comments

Comments
 (0)