This Angular application provides a Wikipedia autocomplete search to help you quickly find information and navigate to original Wikipedia pages.
Check out the live version here: Wikipedia Content Search
If you'd like to run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/irowbin/wikipedia-search.git
-
Navigate to the project directory:
cd wikipedia-search -
Install the dependencies:
npm install
-
Run the application:
nx serve
The app should now be running at
http://localhost:4200/.
- Live Wikipedia Search: Start typing, and the app displays search results in real-time to help you find information quickly.
- Infinite Scrolling with Virtualization: To keep the UI smooth and responsive, only 10 items are rendered in the viewport at a time. As you scroll, the next 100 items are loaded and appended to the list.
- Easy Navigation: Click on any suggestion to navigate directly to the original Wikipedia page.
- Node.js (version 20 or higher)
- Nx: A smart build system with first-class monorepo support (nx.dev)
- Angular: A platform for building mobile and desktop web applications (angular.io)
- NgRx: Reactive state management for Angular (ngrx.io)
- Tailwind CSS: A utility-first CSS framework (tailwindcss.com)
- Tailwind UI Components: Leveraged components from HyperUI and Creative Tim
- Google Roboto Font: For clean and modern typography (Google Fonts)
In addition to nx serve, there are other scripts you might find useful:
-
Build the project:
nx build # outputs to dist/ -
Run unit tests:
nx test # to run all tests currently used jest
-
Lint the code:
nx lint --fix # to automatically fix linting issues
For more commands and detailed options, you can refer to the Nx documentation.
Contributions are welcome! If you have ideas for improvements or run into issues, feel free to open an issue or submit a pull request.
This project is open source and available under the MIT License.