Skip to content

Commit ab48b01

Browse files
authored
Update README.md
1 parent ea22c98 commit ab48b01

File tree

1 file changed

+34
-49
lines changed

1 file changed

+34
-49
lines changed

README.md

Lines changed: 34 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,55 @@
1-
# Getting Started with Create React App
1+
# Rich Text Editor in React using Material UI
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3+
_👀 Medium like text editor in React
44

5-
## Available Scripts
5+
![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
6+
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
7+
![MUI](https://img.shields.io/badge/MUI-%230081CB.svg?style=for-the-badge&logo=mui&logoColor=white)
68

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

9-
### `npm start`
11+
I was facing issues with implementing a Text Editor in React, previously I had a hassle-free implementation in Vue for one of the projects I have on Github. Many things did not work for me. I tried packages like React Slate, React-draft-wysiwyg and more. But, they had dependency related issues. Many of them lacked concrete examples. This package called **'mui-rte'** did work for me at last in this project bootstrapped with create-react-app.
1012

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13+
This also has some warnings though which I might address in the future, but I needed a quick solution for the time being.
1314

14-
The page will reload when you make changes.\
15-
You may also see any lint errors in the console.
15+
## Requirements 🏃
1616

17-
### `npm test`
17+
- Node
18+
- React
19+
- Material UI
20+
- Draft JS
1821

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.
22+
## Install 💥
2123

22-
### `npm run build`
24+
```
25+
npm install
26+
npm start
27+
```
2328

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.
29+
The React app is configured to run by default on port 3000.
2630

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
31+
## Features
2932

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
33+
- Text Editor
34+
- Can have hyperlinks and images.
35+
- Can parse HTML output from the editor to send to the back-end server.
3136

32-
### `npm run eject`
37+
## Deployment
3338

34-
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
39+
Docker deployment using Nginx to be added in the future.
3540

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.
41+
## Development
3742

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.
43+
_Easily set up a local development environment!_
3944

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.
45+
- clone
46+
- `npm install`
47+
- `npm start`
4148

42-
## Learn More
49+
**Start coding!** 🎉
4350

44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
51+
Clone this repo on your machine, navigate to its location in the terminal and run:
4552

46-
To learn React, check out the [React documentation](https://reactjs.org/).
53+
## Contributing
4754

48-
### Code Splitting
49-
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)
51-
52-
### Analyzing the Bundle Size
53-
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)
55-
56-
### Making a Progressive Web App
57-
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)
59-
60-
### Advanced Configuration
61-
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)
63-
64-
### Deployment
65-
66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67-
68-
### `npm run build` fails to minify
69-
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)
55+
All contributions are welcome!

0 commit comments

Comments
 (0)