ClaudiaRojasSoto / Markdown_Previewer

The Markdown Previewer 📝 is an easy-to-use, interactive tool designed to convert Markdown-formatted text into rendered HTML in real time. Users can type or paste their Markdown code in the editing area, and see a live preview of the rendered content in the preview area.

Markdown Previewer

📗 Table of Contents

• 📗 Table of Contents
• 📖 Markdown_Previewer
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Project Structure
    • Setup
    • Install
    • Usage
    • Run tests
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 Markdown_Previewer

The Markdown Previewer is an easy-to-use, interactive tool designed to convert Markdown-formatted text into rendered HTML in real time. Users can type or paste their Markdown code in the editing area, and see a live preview of the rendered content in the preview area.

🛠 Built With

Tech Stack

React-redux

• This project use React

HTML

• This project use HTML.

CSS

• The CSS is used to provide the design in the whole page.

Linters

• The Linters are tools that help us to check and solve the errors in the code
This project count with two linters:
• CSS
• JavaScript

Key Features

• SPA
• CRA
• Styles
• Router
• Logged
• Toolkit
• React-Redux
• Jest & React Test Library
• Deployment

(back to top)

🚀 Live Demo

You can see a Demo here.

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps. This project requires Node.js and npm installed on your machine.

-Node.js -npm

-Clone this repository to your local machine using:

git clone https://github.com/ClaudiaRojasSoto/Markdown_Previewer.git

-Navigate to the project folder:

cd math_magicians

-Install the project dependencies:

npm install

To start the development server, run the following command:

npm start

Project Structure

The project follows the following folder and file structure:

• /src: Contains the source files of the application.
• /src/index.js: Main entry point of the JavaScript application.
• /src/App.js: Top-level component of the application where components are rendered.
• /src/components: Directory for React components.
• /src/components/Editor.js: Component for the Editor
• /src/components/Previewer.js: Folder for the Previewer.
• /src/redux: Directory for Redux management.
• /src/redux/store.js: Redux store configuration.
• /src/redux/actions: Folder for Redux actions.
• /src/redux/actions/markdownActions.js: Actions for markdown management.
• /src/redux/reducers: Folder for Redux reducers.
• /src/redux/reducers/markdownReducer.js: Reducer for markdown management.
• /public: Contains the public files and assets of the application.
• /public/index.html: Base HTML file of the application.
• /build: Contains the generated production files.

Setup

Clone this repository to your desired folder: https://github.com/ClaudiaRojasSoto/Markdown_Previewer.git

Install

Install this project with: install Stylelint and ESLint

Usage

To run the project, execute the following command: just need a web Browser

Run tests

To run tests, run the following command: npm start you just need a simple web browser to run this project for a test

👥 Authors

👤 Claudia Rojas

• GitHub: @githubhandle
• LinkedIn: LinkedIn
• AngelList: AngelList

(back to top)

🔭 Future Features

• User keys - login

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project show support by following this account

(back to top)

🙏 Acknowledgments

• Microverse for providing the opportunity to learn Git and GitHub in a collaborative environment.

• GitHub Docs for providing a wealth of information on Git and GitHub.

(back to top)

📝 License

This project is MIT.

(back to top)