|
1 | | -# Getting Started with Create React App |
| 1 | +# Text Operator 🚀 |
| 2 | +**React • Docker • GitHub Actions • CI/CD** |
2 | 3 |
|
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. |
4 | 6 |
|
5 | | -## Available Scripts |
| 7 | +--- |
6 | 8 |
|
7 | | -In the project directory, you can run: |
| 9 | +## ✨ Features |
8 | 10 |
|
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 |
10 | 18 |
|
11 | | -Runs the app in the development mode.\ |
12 | | -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. |
| 19 | +--- |
13 | 20 |
|
14 | | -The page will reload when you make changes.\ |
15 | | -You may also see any lint errors in the console. |
| 21 | +## 🛠 Tech Stack |
16 | 22 |
|
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 |
18 | 28 |
|
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 | +--- |
21 | 30 |
|
22 | | -### `npm run build` |
| 31 | +## 🧠 Project Architecture |
23 | 32 |
|
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 | +``` |
26 | 34 |
|
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 |
29 | 48 |
|
30 | | -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
| 49 | +```` |
31 | 50 |
|
32 | | -### `npm run eject` |
| 51 | +--- |
33 | 52 |
|
34 | | -**Note: this is a one-way operation. Once you `eject`, you can't go back!** |
| 53 | +## 🐳 Docker Setup |
35 | 54 |
|
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 | +```` |
37 | 59 |
|
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 |
39 | 61 |
|
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 | +``` |
41 | 65 |
|
42 | | -## Learn More |
| 66 | +Open in browser: |
43 | 67 |
|
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 | +``` |
45 | 71 |
|
46 | | -To learn React, check out the [React documentation](https://reactjs.org/). |
| 72 | +--- |
47 | 73 |
|
48 | | -### Code Splitting |
| 74 | +## 🔄 CI/CD Pipeline (GitHub Actions) |
49 | 75 |
|
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: |
51 | 78 |
|
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 |
53 | 82 |
|
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 |
55 | 84 |
|
56 | | -### Making a Progressive Web App |
| 85 | +* `DOCKER_USER` |
| 86 | +* `DOCKER_PASS` (Docker Hub Personal Access Token) |
57 | 87 |
|
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. |
59 | 89 |
|
60 | | -### Advanced Configuration |
| 90 | +--- |
61 | 91 |
|
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 |
63 | 93 |
|
64 | | -### Deployment |
| 94 | +Pull the image directly from Docker Hub: |
65 | 95 |
|
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 | +``` |
67 | 99 |
|
68 | | -### `npm run build` fails to minify |
| 100 | +--- |
69 | 101 |
|
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