Problem Statement

For most educational organizations, having a question bank is crucial for testing students’ skills. These organizations or enterprises can include universities, course centers, or even expert individuals.

This web solution is not just a question-storing tool for experts; it also generates exams using stored questions. Exams are created based on a set time frame and a predefined ratio of question difficulties. For example, a teacher can input a requirement for a 30-minute exam with 30 questions, specifying that 5 should be hard, 23 easy, and 2 medium-level.

On the student side, this software ensures that exams can be taken even with poor or unstable network connections. Once a student submits an exam, the grading process is immediate, and results appear right after submission.

Both teachers and students have dashboards displaying analytics based on their previous actions. Teachers’ dashboards show insights into the number and difficulty levels of the questions they have contributed. Students’ dashboards provide analytics on their grades and the number of exams they have taken within a specific time frame.

The system supports different types of teachers: master teachers and standard teachers. Questions submitted by standard teachers must be reviewed and approved by master teachers before being used in exam generation.

Technical details

System design

Both Server Side Rendering and Client Side Rendering should be used in this solution, the landing page should be curable to the server and be SEO-oriented, exam application should be Client Side Rendered to handle question updates without sending new requests to the server before displaying it which will introduce interrupted exam experience, especially in poor internet connection environments.

Tech Stack

Laravel

For server-side logic and SSR pages, especially the landing page

Vue

For exam SPA (single-page application)

Others

• Client side state management: Pinia
• Data Visualization: D3
• Route: Vue Router General styling solution used for both Laravel and Vue: Tailwind

Non-Technical Deetails

Why is it not live now?

• Overly Wired Vue and Laravel Components – The integration between Vue and Laravel is overly complex, making it difficult to maintain and debug, which is not a general rule for Laravel-Vue projects.
• Treating Laravel as React Components – The Laravel backend is being used in a way similar to how React components work, which is not optimal for Laravel’s intended architecture.
• Software Design and Architecture Refactored – The provided software design has been changed and no longer aligns with the current implementation in the codebase.
• What is the purpose of publishing an uncompleted project on the portfolio?

Built Before Deep Understanding of Laravel – This project was developed before gaining in-depth knowledge of the Laravel ecosystem, leading to architectural mistakes.

• Created Early in Experience – It was built when I had just 1 year of experience; now, with 3+ years, my skills and approach have significantly improved.
• Still a Favorite Project – Despite its flaws, it remains one of my favorite projects due to its concept and impact.
• Ability to Re-Implement – indeed, I can re-implement it with a better architecture, as I have already built more complex projects in my portfolio.

Note

Don’t forget to visit the source code of that smart solution (before refactoring): https://github.com/Mohamed-Aymn.