DEV Community

Cover image for The best Wikipedia Clone
Nam H. Le
Nam H. Le

Posted on

The best Wikipedia Clone

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.


  • 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 format (unparsed) from MediaWiki API.
  2. Feed content into self-implemented Wikitext Parser.
  3. Use awesome React library to render real web pages.

Installation & Usage

  • To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone

# 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]




See the open issues for a list of proposed features (and known issues).


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


What I learned


  • 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 variables
  • Responsive Typography
  • Dynamic grid


  • Testing with Jest
  • Custom Webpack
  • Deploy with AWS Amplify with custom Redirects
  • Git for developing new features

Source Code


Discussion (0)