The best Wikipedia Clone
Tags: react, showdev, javascript, parser
Published: 2020-07-01 05:22:17


## About The Project

> **_Wikipedia_** is a multilingual online encyclopedia created and maintained as an open collaboration project by a community of volunteer editors using a wiki-based editing system. It is the largest and most popular general reference work on the World Wide Web. - Wikipedia

To make it more readable and useful, I decided to redesign it completely with the knowledge I learned when use React.

<p align="center">
  <img width="460" height="300" src="https://user-images.githubusercontent.com/28835226/86202185-c1883980-bb8b-11ea-9a58-88e7713f875d.png">
</p>

<p align="center">
  <img  src="https://user-images.githubusercontent.com/28835226/86202426-61de5e00-bb8c-11ea-8816-292aba527c26.png">
</p>

## Features

- Live Tooltip for quick references
- Syntax highlighting
- Dark/Light mode
- Mobile/desktop mode
- Bottom Navigation Bar
- Live Search Bar

## How it works

1. Fetch [Wikitext](https://en.wikipedia.org/wiki/Help:Wikitext) format (unparsed) from [MediaWiki API](https://www.mediawiki.org/wiki/API:Main_page).
2. Feed content into self-implemented [Wikitext Parser](https://develop).
3. Use awesome [React](https://reactjs.org) library to render real web pages.

## Installation & Usage

- To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:

```bash
# Clone this repository
$ git clone https://github.com/nam288/WikiClonia.git

# Go into the repository
$ cd WikiClonia

# Install dependencies
$ npm install

# Run the app
$ npm start
```

- Open favorite browser and go to `http://localhost:3000/[article-name]`

## Demo

[Demo](https://master.d1sss67267jb3h.amplifyapp.com/JavaScript)

## Roadmap

See the [open issues](https://github.com/nam288/WikiClonia/issues) for a list of proposed features (and known issues).

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Credits

- [Wikipedia](https://www.wikipedia.org)
- [React JS](https://reactjs.org)
- [Prettier](https://prettier.io)
- [Prism](https://prismjs.com)
- [Convert Unit](https://www.npmjs.com/package/convert-units)
- [React Spinners](https://www.npmjs.com/package/react-spinners)
- [Lazysizes](https://www.npmjs.com/package/lazysizes)

## What I learned

### React
- How to use React hooks: useState, useEffect and its dependencies to subcribe event and make APIs call, self-implemented custom hooks as well as Context API, DOM Element API
- How React Router really works.

### CSS

- CSS variables
- Responsive Typography
- Dynamic grid

### DevOps
- Testing with Jest
- Custom Webpack
- Deploy with AWS Amplify with custom Redirects
- Git for developing new features

## Source Code
[Github](https://github.com/nam288/WikiClonia)