Critical Mindset (formerly Elminwal)
Critical Mindset is a publishing platform, where individuals can read, write and share their interests.
Here is a deep dive into the architecture, technology, design, and programming patterns used for building this platform.
Architectural Decisions
Due to the interconnected nature of such projects, I have adopted a decoupled approach; i seperated frontend from backend.
Backend
The backend was the first component I built. I followed the MVC (Model-View-Controller) architecture, using Express.js as the primary framework. For robust user role management, I used JWT as the primary authentication and authorization strategy. Later on, I introduced Google SSO to improve the user experience. However, Google SSO is strictly used for initial user data fetching and validation; once validated, the backend sends back a JWT to establish an authenticated connection.
For security, all user passwords are hashed, and I implemented an OTP strategy for password reset requests.
Database
I chose a NoSQL database—specifically MongoDB paired with Mongoose as the Object-Document Mapper (ODM)—for its scalability. It allows for flexible data model changes at any time, which is ideal for the dynamic nature of a publishing platform.
Content Management
Content Management is quite similar to one in Medium.com, where we allow users to create accounts and write articles about their interests. Articles are categorized into certain predefined categories. Backend built to support English, Arabic, and French natively.
Payment Integration
Polar.sh has been introduced to do the heavy work of payment integration to some of platform features such as content download, newsletter, and access to exclusive content.
Frontend
The frontend is built primarily as a Single Page Application (SPA) using React.js with custom styling. I built a custom CSS library for the platform to ensure the utmost scalability and performance. I relied on the SCSS preprocessor to generate complex UIs and construct this library.
I took a minimalist approach when designing the UI components. You can view the live platform at https://critical-mindset.com.
Limitations
While adopting a Single Page Application (SPA) architecture provided a highly responsive and seamless user experience, it introduced a known trade-off regarding Search Engine Optimization (SEO). Because the platform’s content is rendered dynamically on the client side, search engine crawlers face difficulties effectively indexing the pages, significantly impacting organic discoverability.