Skip to content

lakshya-20/first-draft

Repository files navigation

First Draft

License GitHub code size in bytes GitHub last commit
React.js Next.js MongoDB Bootstrap

Project description

This project is the full-stack application made using Next.js, allowing users to write and share their blogs. For backend Serverless Functions are used written with Node.js. Given below are some of the key feature of this app.

  1. Server-side rendering the components.
  2. Code splitting, pre-rendering the pages.
  3. Fast content delivery network.
  4. Allow users to write blog and get a URL to share it with anyone.
  5. Feature to update or delete the blog.
  6. User authentication for better security

Working

Parsing the markdown

  • Setp 1: Parsing the markdown from frontend using marked, which is low-level compiler for parsing markdown.
  • Step 2. Sanitize the generated HTML using Dompurify as marked does not output the sanitized html.

Rendering parsed html

  • Use dangerouslySetInnerHTML to set HTML directly from React, which is an attribute under DOM elements in React.

Development Setup

Before setting up the development environment make sure you have downloaded the npm ~6.14 and Node.js ~14.16 and added them to path variables. Downloading Node.js

Building the Code

  1. Clone the repository using command:

    git clone https://github.com/lakshya-20/first-draft.git
  2. Install NPM packages

    npm install
  3. Update the .env.development file with required environment variables.

  4. In the root directory run

    npm run dev
    
  5. Open http://localhost:3001 to view it in the browser.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. In case of multiple commits squash them. You can find guide here: how to squash commits
  5. Run the tests with (npm run test) and make sure all tests are passed.
  6. Push your branch (git push origin my-new-feature)
  7. Create a new Pull Request, following the template