EduLink

About the Project

EduLink is a centralized hub that makes it easier for learners to access content from reputable and high-quality sources. The goal is to create a web app that answers the question "Where can I learn X?".

Tech Stack

The web app uses Vite, React JS, HTML, and CSS. React was used instead of plain JavaScript because it could help build reusable components that would be important for ensuring scalability.

Important Components

Header

The header at the top of the web app contains the name of the website along with the the tagline.

Boxes

Each subject/skill is contained within a subject box, hovering over the subject causes it to scale up.

Modals

Clicking the subject box causes a modal to appear. Inside the modal are the links to different references.

Adding Another Subject/Skill

This project is able to scale up easily since the components can easily render another subject. Adding a subject/skill can be done by adding a dictionary to the list named webs located in the file named sub_details.jsx. The dictionary should be follow the following format:
{"name":"/Subject Name", "description":"/Description", "picture":"/thumbnail","links":[{"site": "name of website", "hyperlink": "link to website"}]}

Future Improvements

In future updates, it would be nice to add a submission bin for learning materials and resources. However, that might require money for storage and other interactive features.

Challenges

The biggest challenge was learning how to implement the features in React. This is my first project using this tech stack so there was a lot of spontaneous learning. I am most proud of the apps ability to render multiple boxes from one list.

Learnings

I learned a lot about React interfaces, I also learned about version history and uploading to github. This was an enjoyable experience for me overall.