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 markView: Interactive Markdown Previewer, my first React app.

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 React module of it, I was so amazed by React, that I wanted to practice more on it. And as we all know;

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, markdown previewer, which I decided to make. Finally, the results are in front of you, 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 md Editor. Then, markView will look something like this :

Mainly it is containing a Header, 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.

Then it is containing the Main 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.

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 Footer of our app, in which as you can see some links are given.

❓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 markView was something like this:

It is containing some in-built files and folders, like:

node modules folder;
public folder;
source folder;
git ignore file;
package-lock file;
package file and
readme file, that you get when you run
```
create-react-app
```
.

And a build folder you get, when you run

npm run build

in your project folder. Images folder, I created to add some image in readme file.

The main folders on which we have to focus are the source folder, and little bit on the public 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.

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 component folder which contains file for our different components, and a style folder which contains file for styling our components. So, it looks like:

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 MIT License, so you can fork and improve it.

Thank you for reading it till the end.