Skip to content

Commit f844b7e

Browse files
Update README.md
1 parent f67d4b9 commit f844b7e

1 file changed

Lines changed: 102 additions & 38 deletions

File tree

README.md

Lines changed: 102 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,134 @@
1-
# Getting Started with Create React App
1+
# Text Operator 🚀
2+
**React • Docker • GitHub Actions • CI/CD**
23

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4+
Text Operator is a React-based web application that allows users to perform common text transformations and analysis.
5+
The project is fully containerized using Docker and deployed using an automated CI/CD pipeline with GitHub Actions.
46

5-
## Available Scripts
7+
---
68

7-
In the project directory, you can run:
9+
## ✨ Features
810

9-
### `npm start`
11+
- Convert text to **uppercase**
12+
- Convert text to **lowercase**
13+
- Remove **all extra spaces**
14+
- Trim **leading and trailing spaces**
15+
- Display **word count** and **character count**
16+
- Estimate **reading time**
17+
- Responsive and clean UI
1018

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
19+
---
1320

14-
The page will reload when you make changes.\
15-
You may also see any lint errors in the console.
21+
## 🛠 Tech Stack
1622

17-
### `npm test`
23+
- **Frontend:** React
24+
- **Containerization:** Docker (multi-stage build)
25+
- **Web Server:** Nginx
26+
- **CI/CD:** GitHub Actions
27+
- **Container Registry:** Docker Hub
1828

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.
29+
---
2130

22-
### `npm run build`
31+
## 🧠 Project Architecture
2332

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.
33+
```
2634
27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
35+
React Source Code
36+
37+
Docker Multi-stage Build
38+
39+
Nginx (Production Server)
40+
41+
Docker Image
42+
43+
GitHub Actions (CI/CD)
44+
45+
Docker Hub
46+
47+
Running Container
2948
30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
49+
````
3150
32-
### `npm run eject`
51+
---
3352
34-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
53+
## 🐳 Docker Setup
3554
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.
55+
### Build the Docker image locally
56+
```bash
57+
docker build -t textoperator .
58+
````
3759
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.
60+
### Run the container
3961
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.
62+
```bash
63+
docker run -d -p 80:80 --name mytextoperator textoperator
64+
```
4165

42-
## Learn More
66+
Open in browser:
4367

44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
68+
```
69+
http://localhost
70+
```
4571

46-
To learn React, check out the [React documentation](https://reactjs.org/).
72+
---
4773

48-
### Code Splitting
74+
## 🔄 CI/CD Pipeline (GitHub Actions)
4975

50-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
76+
* Triggered on every push to the `main` branch
77+
* Automatically:
5178

52-
### Analyzing the Bundle Size
79+
* Builds the Docker image
80+
* Logs into Docker Hub securely using GitHub Secrets
81+
* Pushes the image to Docker Hub
5382

54-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
83+
### Secrets Used
5584

56-
### Making a Progressive Web App
85+
* `DOCKER_USER`
86+
* `DOCKER_PASS` (Docker Hub Personal Access Token)
5787

58-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
88+
No secrets are committed to the repository.
5989

60-
### Advanced Configuration
90+
---
6191

62-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
92+
## 📦 Docker Hub Image
6393

64-
### Deployment
94+
Pull the image directly from Docker Hub:
6595

66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
96+
```bash
97+
docker pull prashant2496/mytextoperator:latest
98+
```
6799

68-
### `npm run build` fails to minify
100+
---
69101

70-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
102+
## 🔐 Security Practices
103+
104+
* Docker credentials stored securely using **GitHub Secrets**
105+
* No hard-coded secrets in code or workflows
106+
* GitHub Secret Scanning & Push Protection enabled
107+
108+
---
109+
110+
## 📚 What I Learned
111+
112+
* React production build lifecycle
113+
* Docker multi-stage builds
114+
* CI/CD automation with GitHub Actions
115+
* Secure secret management
116+
* Debugging real-world CI/CD pipeline issues
117+
* Container lifecycle management
118+
119+
---
120+
121+
## 🚀 Future Enhancements
122+
123+
* Deploy on AWS EC2
124+
* Add HTTPS with Let’s Encrypt
125+
* Integrate backend APIs (Node.js)
126+
* Use Docker Compose for multi-service setup
127+
128+
---
129+
130+
## 👤 Author
131+
132+
**Prashant Narwade**
133+
Aspiring Backend & DevOps Engineer
134+
Learning by building 🚀

0 commit comments

Comments
 (0)