My First React App, markView: An Interactive Markdown Previewer

Documenting your work in the form of article, so that everyone can understand it easily. In my thoughts is the awesome work. So, here is mine documentation for , my first app. markView: Interactive Markdown Previewer React Before we start discussing about it. You should definitely check its working: 👉 Go live, and check it out : check🚀 👉 If you want to see its code : check🚀 Let's now we start our article. 💡 How I Got the Idea Nowadays, I am learning front end coding. So when I completed the module of it, I was so amazed by , that I wanted to practice more on it. And as we all know; React React Creating a project is the best way to practice something new. Then I started thinking what I should made. So, from where I am learning (front end), there is a project module in it. I searched it for ideas. And luckily I found the project idea, , which I decided to make. Finally, the results are in front of you, . markdown previewer markView 📦 What is in it and How its Components Look In this section, we will discuss what exactly markView contains, and how its various component look. Open markView, and erase default content in . Then, markView will look something like this : md Editor Mainly it is containing a , which is showing the name of our app, with its logo. And when you hover on it , it will transform its scale and seems like zoom. Header Then it is containing the part of our app, in which we have an editor prompt for our markdown, in which we can write the markdown of which we want to preview the result. The result of our markdown will be shown in preview area. They both have hover effect. Main If you want to work with an editor prompt only then you can expand it, it will cover the whole screen, and preview area will go hidden. And the same can also be done with the preview area. Lastly, it is containing of our app, in which as you can see some links are given. Footer ❓My File Structure in VS Code As we all know, having a good file structure is an essential part of development. It eases the understanding and development of project. My final file structure for was something like this: markView It is containing some in-built files and folders, like: folder; node modules folder; public folder; source file; git ignore file; package-lock file and package file, that you get when you run . readme create-react-app And a folder you get, when you run in your project folder. folder, I created to add some image in file. build npm run build Images readme The main folders on which we have to focus are the folder, and little bit on the folder. As public folder contains file for HTML and favicon, which we want to change , and source folder, in my case, contain files for all components and their styling. source public I did some changes in HTML file, in public folder, for my app name and favicon for my app. So, it looks something like: And our source folder is containing a folder which contains file for our different components, and a folder which contains file for styling our components. So, it looks like: component style favicon in Component was used in Header. So, you can see that we made a file for every component. This is how I find it easy to make a . project development 👏 You've Reached The End! Congrats 👏, you have reached the end of the article. In this article, we did discussion on markView: Interactive Markdown Previewer. This is an open source project with , so you can and it. MIT License fork improve Thank you for reading it till the end.