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.

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

Roadmap

See the open 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
• React JS
• Prettier
• Prism
• Convert Unit
• React Spinners
• 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