An open API service indexing awesome lists of open source software.

https://github.com/mayurasandakalum/ict-with-mayura


https://github.com/mayurasandakalum/ict-with-mayura

Last synced: 3 months ago
JSON representation

Awesome Lists containing this project

README

          

# πŸš€ ICT with ΰΆΈΰΆΊΰ·”ΰΆ» (Mayura)


🌟 Interactive ICT Learning Platform for Sri Lankan Students 🌟


A modern, visual learning experience for Information and Communication Technology education



[![Live Demo](https://img.shields.io/badge/🌐_Live_Demo-Visit_Site-blue?style=for-the-badge)](https://mayurasandakalum.github.io/ict-with-mayura)
[![Built with React](https://img.shields.io/badge/Built_with-React-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)

---

## πŸ“š About the Project

**ICT with ΰΆΈΰΆΊΰ·”ΰΆ»** is an innovative educational platform designed specifically for Sri Lankan students learning Information and Communication Technology. The platform combines modern web technologies with interactive mind mapping to create an engaging and visual learning experience.

### 🎯 Key Features

- πŸ—ΊοΈ **Interactive Mind Maps** - Visualize complex ICT concepts using advanced markmap technology
- 🌍 **Sinhala Language Support** - Full interface and content in Sinhala for local students
- πŸ“± **Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices
- 🎨 **Dark/Light Theme** - Choose your preferred learning environment
- πŸ“Š **Grade-wise Content** - Structured learning paths for grades 9-13
- πŸš€ **Fast Performance** - Built with modern Vite and React for lightning-fast loading

### πŸŽ“ Grade Coverage

| Grade Level | Content |
| -------------- | ---------------------------------- |
| 9 ΰ·ΰ·Šβ€ΰΆ»ΰ·šΰΆ«ΰ·’ΰΆΊ | Foundation ICT concepts |
| 10-11 ΰ·ΰ·Šβ€ΰΆ»ΰ·šΰΆ«ΰ·’ΰΆΊ | ΰ·ƒΰ·ΰΆΈΰ·ΰΆ±ΰ·Šβ€ΰΆΊ ΰΆ΄ΰ·™ΰ·… (O-Level) curriculum |
| 12-13 ΰ·ΰ·Šβ€ΰΆ»ΰ·šΰΆ«ΰ·’ΰΆΊ | ΰΆ‹ΰ·ƒΰ·ƒΰ·Š ΰΆ΄ΰ·™ΰ·… (A-Level) advanced topics |

---

## πŸ› οΈ Tech Stack

- **Frontend**: React 18 + TypeScript
- **Build Tool**: Vite
- **Visualization**: Markmap (D3.js based mind mapping)
- **Styling**: CSS3 with custom themes
- **Routing**: React Router DOM
- **Database**: Supabase integration
- **Deployment**: GitHub Pages

---

## πŸš€ Quick Start

### Prerequisites

- Node.js (v16 or higher)
- npm or yarn package manager

### Installation

1. **Clone the repository**

```bash
git clone https://github.com/mayurasandakalum/ict-with-mayura.git
cd ict-with-mayura
```

2. **Install dependencies**

```bash
npm install
```

3. **Start development server**

```bash
npm run dev
```

4. **Open your browser**
Navigate to `http://localhost:5173`

### πŸ”§ Available Scripts

| Command | Description |
| ----------------- | ------------------------ |
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run deploy` | Deploy to GitHub Pages |
| `npm run lint` | Run ESLint |

---

## 🌟 Features in Detail

### Interactive Mind Maps

- **Visual Learning**: Complex ICT concepts presented as interactive mind maps
- **Zoom & Navigate**: Pan, zoom, and explore topics in detail
- **Hierarchical Structure**: Information organized in logical, easy-to-follow hierarchies

### Modern User Experience

- **Responsive Design**: Optimized for all screen sizes
- **Theme Support**: Switch between light and dark modes
- **Fast Loading**: Optimized performance with code splitting and lazy loading

### Educational Content

- **Curriculum Aligned**: Content matches Sri Lankan ICT curriculum
- **Progressive Learning**: Build knowledge step by step through grades
- **Visual Aid**: Mind maps help in better retention and understanding

---

## πŸ“ Project Structure

```
ict-with-mayura/
β”œβ”€β”€ πŸ“ public/
β”‚ β”œβ”€β”€ πŸ“ data/ # Educational content (markdown files)
β”‚ └── πŸ“ assets/ # Images and static resources
β”œβ”€β”€ πŸ“ src/
β”‚ β”œβ”€β”€ πŸ“ components/ # Reusable React components
β”‚ β”œβ”€β”€ πŸ“ pages/ # Main application pages
β”‚ β”œβ”€β”€ πŸ“ contexts/ # React context providers
β”‚ β”œβ”€β”€ πŸ“ hooks/ # Custom React hooks
β”‚ └── πŸ“ lib/ # Utility functions and configurations
β”œβ”€β”€ πŸ“„ package.json # Dependencies and scripts
β”œβ”€β”€ πŸ“„ vite.config.ts # Vite configuration
└── πŸ“„ tsconfig.json # TypeScript configuration
```

---

## 🀝 Contributing

We welcome contributions from the community! Here's how you can help:

1. **Fork the repository**
2. **Create a feature branch** (`git checkout -b feature/amazing-feature`)
3. **Commit your changes** (`git commit -m 'Add some amazing feature'`)
4. **Push to the branch** (`git push origin feature/amazing-feature`)
5. **Open a Pull Request**

### πŸ“ Areas for Contribution

- πŸ“š Adding more educational content
- πŸ› Bug fixes and improvements
- 🎨 UI/UX enhancements
- 🌐 Translation improvements
- πŸ“± Mobile experience optimization

---

## πŸ“ž Support & Contact

- πŸ‘¨β€πŸ« **Instructor**: Mayura Sandakalum
- 🌐 **Website**: [ICT with ΰΆΈΰΆΊΰ·”ΰΆ»](https://mayurasandakalum.github.io/ict-with-mayura)
- πŸ“§ **Email**: Contact through the website
- πŸ› **Issues**: [GitHub Issues](https://github.com/mayurasandakalum/ict-with-mayura/issues)

---

## πŸ“œ License

This project is created for educational purposes. Please respect the intellectual property and use it responsibly for learning.

---

## πŸ™ Acknowledgments

- πŸ—ΊοΈ **Markmap.js** - For providing excellent mind mapping capabilities
- βš›οΈ **React Team** - For the amazing framework
- πŸš€ **Vite** - For the blazing fast build tool
- πŸŽ“ **Sri Lankan Education System** - For the curriculum guidance

---


🌟 Made with ❀️ for Sri Lankan ICT Students 🌟


Empowering the next generation through visual and interactive learning



**[πŸš€ Try it now!](https://mayurasandakalum.github.io/ict-with-mayura)**