Wikipedia Clone with React JS

Introduction

• Objective: Build a Wikipedia clone using ReactJS and Wikipedia API.
• Features:
  • Fetch data from Wikipedia API.
  • Search for Wikipedia pages and display their contents.
• Libraries Used:
  • ReactJS.
  • Microsoft Fluent UI for styling.

Steps to Build the Wikipedia Clone

1. Project Setup

• Create a new React app.
• Remove the boilerplate code.
• Set a title for the app as "Wikipedia."

2. Install Fluent UI

• Use Microsoft's Fluent UI library for styling.
• Install the library and wrap the app with FluentProvider.

3. Add Input Box for Search

• Use Fluent UI's input component.
• Add a placeholder text: Search Wikipedia.
• Make the input box a controlled component using the useState hook.

4. Add Search Button

• Create a button component labeled Search.
• On button click, call an async function (searchWiki) to fetch search results.

5. Fetch Wikipedia Data

• Use two APIs:
  • Search API to get the list of pages.
  • Content API to fetch details of a clicked page.
• API Details:
  • Use query parameters like action, list, srsearch, and format.

6. Handle Loading and Error States

• Manage loading state using a loading variable.
• Handle API errors with a try-catch block.

Display Search Results

• Map over the pages array to display titles as clickable links.
• Wrap each result in a Fluent UI card.
• Show metadata like timestamp and word count.

Show Page Content

• When a link is clicked:
  • Fetch page content using the Content API.
  • Display the page text.
• Handle CORS issues by setting origin=*.

Styling

• Use Fluent UI's useStyles hook for custom styles.
• Adjust layout with margin and width properties for a clean interface.

Test Functionality

1. Enter a query (e.g., Pikachu) in the input box.
2. Click Search to fetch results.
3. Click on a result to display the content.

Final Output

• A functional Wikipedia clone styled like a Microsoft web app.
• Features a responsive search and content display.

Notes

• Ensure API calls handle edge cases (e.g., empty queries).
• Use descriptive logging for debugging.
• Optimize performance by avoiding unnecessary re-renders.