The best Wikipedia Clone

Nam Hoang Le — Wed, 01 Jul 2020 05:22:17 +0000

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

Fetch Wikitext format (unparsed) from MediaWiki API.
Feed content into self-implemented Wikitext Parser.
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

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.

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

Credits

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

Forem: Nam Hoang Le