Hackernoon logoMy First React App, markView: An Interactive Markdown Previewer by@hsnice

My First React App, markView: An Interactive Markdown Previewer

image
Himanshu Singh Hacker Noon profile picture

@hsniceHimanshu Singh

๐ŸŒ Web Developer | ๐Ÿ’ป dynamicprogrammer | ๐Ÿ—ธ hsnice16 | Himanshu Singh(on youtube)

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:

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 :

image

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:

image

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:

image

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:

image

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.

image
Himanshu Singh Hacker Noon profile picture
by Himanshu Singh @hsnice. ๐ŸŒ Web Developer | ๐Ÿ’ป dynamicprogrammer | ๐Ÿ—ธ hsnice16 | Himanshu Singh(on youtube)keep updated with me

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.