Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/apiz23/learn-flow

Krenovator X Syntech Website Competition
https://github.com/apiz23/learn-flow

Last synced: 2 months ago
JSON representation

Krenovator X Syntech Website Competition

Awesome Lists containing this project

README 

        
# LearnFlow - Edu Tech [Next-Gen Learning Platform]



LearnFlow is a Next-Gen Learning Platform built for the **Krenovator & Syntech Online Programming Web App Competition**. This web application aims to enhance the learning experience by offering an interactive platform for quizzes, flashcards, and educational content. It is built using HTML, CSS, and JavaScript, and it integrates both personal and public APIs to fetch and display data.



---



## Introduction



LearnFlow is a learning platform that incorporates modern techniques to enhance the user experience. The website allows users to take quizzes, view flashcards, and access educational content to test their knowledge on various subjects and topics. The platform dynamically fetches data using APIs and stores relevant data in the browser's local storage for later use.



---



## Goal of Project Competition



The goal of this project is to:



- **Build an interactive website** using HTML, CSS, and JavaScript.

- **Fetch data** from personal and public APIs.

- **Implement responsiveness** for a seamless user experience.

- **Create a dynamic learning experience** with quizzes, flashcards, and interactive content.



---



## Project Functionality



The LearnFlow website includes several key features:



- **Quizzes Section**: Users can choose subjects and topics to test their knowledge through quizzes.

- **Flashcards**: Users can view flashcards to increase their general knowledge.

- **Responsive Design**: The website is designed to be fully responsive, ensuring a good user experience across all devices.

- **Local Storage**: Local storage is used to store data for specific periods, allowing users to pick up where they left off.

- **API Integration**: The website fetches educational content from both personal and public APIs.



---



## Challenges Faced



While building this website, the following challenges were encountered:



- **Hardcoding of Design and Backend**: Due to time constraints, the design and backend were hardcoded, which limited flexibility in development.

- **Component Reusability**: Dynamic reuse of components across different pages was difficult, requiring manual fetching and insertion of content into the HTML.

- **Limitations in Modern Learning Styles**: The goal of implementing advanced features such as AI-generated content related to questions was challenging due to time and technological constraints.



---



## References



- **GitHub Repository**: [LearnFlow GitHub Repository](https://github.com/username/LearnFlow)

- **Personal API**: [hafizuAPI](https://api.example.com)



---



## Installation



To run this project locally, follow these steps:



1. **Clone the repository**:



   ```bash

   git clone https://github.com/username/LearnFlow.git

   cd LearnFlow

   ```



2. **Open index.html in your preferred web browser**.



The website does not require any server-side setup since it's a static HTML, CSS, and JavaScript-based application.



## Usage



Once the project is running, you can use the following features:



The LearnFlow website includes several key features:

- **Quizzes**: Choose subjects and topics, and test your knowledge through interactive quizzes.

- **Flashcards**: View flashcards with general knowledge or subject-specific information.

- **Progress Tracking**: Your progress in quizzes and flashcards is saved using local storage.

- **Responsive Design**: The website will adapt its layout to work seamlessly on desktop, tablet, and mobile devices.



## Contact Information



- **Participant Name**: Muhammad Hafizuddin Bin Abdul Hamid

- **Contact**: +6011-11263463, [email protected]