afx-nicolas/blog-coderockr

Blog Coderockr

Desktop	Mobile

Features ⭐

• Infinite scroll page
• Single article page
• Contact modal
• XSS (Cross-site scripting) Prevention
• Responsive layout
• Post creation
• Performance
• SEO
• SSR (Server-side Rendering)

Dependencies 📦

• Next.js - Modern framework to render React on the server (SSR)
• DOMPurify and Isomorphic DOMPurify - Sanitize content and prevent XSS
• Phosphor React - Icons library

Running the project

Development Server

To run the development server follow the steps:

Create a .env.local in the root of the project and put the following content with the API URL:

NEXT_PUBLIC_API_URL="PUT THE API URL HERE"

Run the application:

# NPM
npm install && npm run dev

# Yarn
yarn install && yarn dev

Build the Project

To build and run the project locally follow the steps:

Create a .env.production in the root of the project and put the following content with the API URL:

NEXT_PUBLIC_API_URL="PUT THE API URL HERE"

Build the application:

# NPM
npm install && npm run build

# Yarn
yarn install && yarn build

After the build, run the application:

# NPM
npm run start

# Yarn
yarn start

blog-coderockr's Issues

Explain project on README

Description

Describe the project in the README, including information about main features, third-party dependencies, and screenshots of the app, and explain how to build and run the application.

Tasks

• Add main features
• Add dependencies list
• Add screenshots
• Add build and run instructions

Validate API response

Description

Validate object schema coming from API response, if is invalid filter doesn't render the item.

Tasks

• Create a function that receives the object and the valid schema to validate the object
• Filter the API response using the validation function

Add infinite scroll

Description

Add infinite scroll to load articles when touch the end of the page dynamically.

Tasks

• Fetch more articles when touch the end of the page
• Add a state to manage API current page

Prevent XSS from articles strings

Description

Prevent possible XSS from HTML injection from articles.

Tasks

• Sanitize all HTML strings before injecting them into the page.

Add single post page

Description

Add a dynamic post page based on the article id.

Tasks

• Render a article post component
• Show the main info about article
• Render article rich-text