Back to projects

OnseDz Platform

A full-stack MERN web application featuring a modern frontend, secure authentication, and dynamic content management.

ReactRedux ToolkitViteTailwind CSSFlowbiteMaterial UINode.jsExpress.jsMongoDBMongooseJWTBcryptReact QuillDraft.js
Source Code

# OnseDz Platform


The official web platform for OnseDz, built as a comprehensive full-stack solution to manage and deliver dynamic web content.


Project Overview


OnseDz is a robust web application designed to provide a seamless user experience through a responsive React frontend and a scalable Node.js backend. The platform integrates modern design principles with secure backend services, handling everything from user authentication to content administration.


Technologies Used


  • Frontend: React, Redux Toolkit, Vite
  • Styling: Tailwind CSS, Flowbite, Material UI
  • Backend: Node.js, Express.js
  • Database: MongoDB (Mongoose)
  • Authentication: JWT (JSON Web Tokens), Bcrypt
  • Content Management: React Quill, Draft.js

    • Key Features


    1. **Dynamic Content Management**: Integrated rich-text editors (React Quill) allowing for easy creation and formatting of content.

    2. **Secure Authentication**: Robust user login and registration system protected by JWT and bcrypt encryption.

    3. **Responsive UI/UX**: A mobile-first design utilizing Tailwind CSS and Flowbite components for consistent visuals across devices.

    4. **State Management**: Efficient global state handling using Redux Toolkit and Redux Persist.


    Project Details


    This project adopts a monolithic repository structure where the client and server coexist, streamlining the development and deployment process. The backend serves as a RESTful API, while the frontend consumes these endpoints to render a dynamic user interface.


    ### Challenges


  • State Persistence: Ensuring user sessions and preferences remain active across page reloads without compromising security.
  • Rich Text Handling: Managing the storage and rendering of complex HTML content generated by the WYSIWYG editors.
  • File Uploads: Implementing secure file handling for user avatars and content images using Multer.

    • ### Solutions


  • Redux Persist: Implemented Redux Persist to automatically save and rehydrate the application state from local storage.
  • Component Architecture: Utilized a mix of Headless UI and Material UI components to build accessible and interactive interface elements.
  • Express Middleware: Structured the backend with modular middleware for error handling, authentication verification, and CORS management.

    • Conclusion


    The OnseDz platform represents a polished execution of the MERN stack, demonstrating how modern libraries and frameworks can be orchestrated to build a functional, real-world web application.