NoteX is a modern, fast, and lightweight academic notes platform built with Astro. It is designed to organize university notes by semester and subject while providing a clean reading experience for technical and mathematics-heavy content.
The project uses Markdown-based notes, allowing content to be written and maintained as simple files while Astro handles routing, rendering, and static site generation.
- ⚡ Fast & Lightweight — Built with Astro for efficient static page generation and minimal client-side JavaScript.
- 📝 Markdown Notes — Write and organize notes using Markdown files.
- 🧩 MDX Support — Supports MDX for notes that require interactive or reusable components.
- 🧮 Mathematical Notation — Supports LaTeX-style mathematical expressions through KaTeX.
- 🎓 Semester Organization — Notes are organized by semester and subject for easy navigation.
- 📚 Subject-Based Structure — Each subject has its own dedicated collection of notes and resources.
- 🖼️ Subject Covers — Dedicated cover images are available for subjects.
- 🔗 Dynamic Routing — Semester and subject pages are generated using Astro's dynamic routing system.
- 📱 Responsive Interface — Designed to provide a comfortable reading experience across different screen sizes.
- Framework: Astro
- Language: TypeScript
- Styling: CSS
- Content: Markdown / MDX
@astrojs/mdx— Adds MDX support to Astro.katex— Renders mathematical expressions.remark-math— Parses mathematical notation in Markdown.rehype-katex— Converts parsed mathematical expressions into KaTeX-rendered HTML.astro-icon— Provides icon support throughout the interface.
The project is organized around semesters, subjects, and their associated notes.
NoteX/
└── src/
├── assets/
│ └── images/
│ └── subjectsCovers/
│
├── components/
│ └── ...
│
├── data/
│ └── notes/
│ ├── semester-2/
│ │ ├── biography-of-prophet-pbuh/
│ │ ├── data-communication-and-networking/
│ │ ├── digital-logic-and-design/
│ │ ├── object-oriented-programming/
│ │ ├── principles-of-software-engineering/
│ │ └── worship-system-of-islam/
│ │
│ ├── semester-3/
│ │ ├── advance-computer-networking/
│ │ │ └── images/
│ │ ├── data-structures-and-algorithms/
│ │ ├── ethical-system-of-islam/
│ │ ├── linear-algebra/
│ │ ├── modern-programming-languages/
│ │ └── social-system-of-islam/
│ │
│ └── semester-4/
│ ├── database-administration/
│ ├── english-language/
│ ├── ideological-studies/
│ ├── operating-system-concepts/
│ ├── religions-and-sects/
│ └── web-technologies/
│
├── icons/
│
├── pages/
│ ├── semesters/
│ │ └── [slug]/
│ │ └── [subject]/
│ │
│ └── ...
│
└── styles/
| Directory | Purpose |
|---|---|
src/assets/ |
Images and other assets processed by Astro |
src/assets/images/subjectsCovers/ |
Cover images for individual subjects |
src/components/ |
Reusable Astro/UI components |
src/data/notes/ |
Academic notes organized by semester and subject |
src/icons/ |
Project icons |
src/pages/ |
Astro pages and dynamic routes |
src/pages/semesters/[slug]/[subject]/ |
Dynamic subject note pages |
src/styles/ |
Global and component-related styles |
Notes are organized hierarchically:
Semester
↓
Subject
↓
Notes / Resources
For example:
src/data/notes/
└── semester-3/
└── linear-algebra/
├── ...
└── ...
This structure makes it possible to keep every subject independent while still providing a consistent navigation system throughout the website.
Make sure you have the following installed:
- Node.js: 22.x or newer
- npm: 10.x or newer
- Git
Check your installed versions:
node --version
npm --version
git --versionClone the repository:
git clone https://github.com/khalidrahmanhanify/NoteX.gitNavigate into the project:
cd NoteXInstall the dependencies:
npm installStart the local development server:
npm run devAstro will start the development server, normally available at:
http://localhost:4321
The development server automatically reloads when files are changed.
Create an optimized production build:
npm run buildThe generated files will be placed in:
dist/
After creating a production build, you can preview it locally:
npm run previewThis allows you to verify the production version before deployment.
The main Astro configuration is located at:
astro.config.mjs
Other important project configuration files include:
package.json
tsconfig.json
Contains the Astro configuration, integrations, Markdown/MDX configuration, and other framework-level settings.
Contains project metadata, dependencies, and npm scripts.
Contains TypeScript compiler configuration and project-wide type-checking settings.
New notes can be added to the appropriate semester and subject directory inside:
src/data/notes/
For example, a new note for Linear Algebra would belong under:
src/data/notes/semester-3/linear-algebra/
Keeping notes separated by semester and subject makes the content easier to maintain and allows the application to generate the appropriate pages automatically.
Contributions are welcome.
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name- Make your changes.
- Commit your changes:
git commit -m "feat: add new feature"- Push the branch:
git push origin feature/your-feature-name- Open a Pull Request.
NoteX is distributed under the MIT License.
See the LICENSE file for the complete license text.
Khalid Rahman Hanify
- GitHub: @khalidrahmanhanify
Built to make university notes organized, accessible, and easy to learn from.