Abbass's Portfolio

LovedByMen.com

December 31, 2024 (5mo ago)

👨🏻‍💻 $ ls -al Abbass -- Women's first fashion social network built using React and Next.js, fully responsive across all devices

💻 Source Code • 🎥 Live •

lovedbymen.com

📍 Technical Architecture Overview

LovedByMen is engineered with a high-performance, scalable, and modern web architecture, purpose-built to support a social networking experience with rich media, real-time interaction, and e-commerce integrations.

⚙️ Frontend Architecture

The frontend of LovedByMen takes inspiration from Civitai’s clean and user-centric design. It's built on Next.js, enabling:

Server-side rendering (SSR) and static site generation (SSG) for optimal performance and SEO.
Seamless routing and page transitions.
Fast load times and progressive enhancement.

The UI layer is developed using the Mantine UI Kit, which ensures a consistent, responsive, and accessible design system across all devices, supporting both light and dark themes out of the box.

🔗 API and Backend Layer

The API layer is powered by tRPC, which allows for end-to-end type safety between frontend and backend without requiring REST or GraphQL. This enables rapid development with fewer bugs and better developer experience.

Backend logic is implemented in TypeScript, adhering to strict typing.
Prisma ORM manages schema migrations and database access with clarity and type safety.
PostgreSQL is used as the primary relational database, providing robustness and scalability for user data, posts, messages, and transactional records.

🔍 Search and Analytics

LovedByMen is optimized for discoverability and insights:

Meilisearch is integrated for blazing-fast, typo-tolerant search across content, users, and tags—providing real-time, relevant results.
ClickHouse, a column-oriented analytics database, powers advanced data aggregation, user behavior analytics, and real-time metrics with high efficiency and performance.

☁️ Cloud Infrastructure

Cloudflare R2 is used to securely store and globally serve static assets, including user-uploaded images, profile pictures, and marketing content.
Caching and edge delivery via Cloudflare CDN enhance global accessibility and latency reduction.

💬 Real-Time Features

A custom WebSocket-based chat server was developed and integrated to support real-time direct messaging, with typing indicators, message receipts, and instant delivery.
Redis is used to manage server-side caching and pub/sub communication, ensuring real-time updates and minimal latency.

🛒 Affiliate & Commerce Integration

To power its product discovery and monetization features, LovedByMen integrates:

Awin and AliExpress affiliate APIs, syncing and displaying hundreds of thousands of fashion-related products with tracking capabilities for monetization.
A dynamic affiliate tracking layer for influencers and users participating in the platform’s fashion economy.

💳 Payments and Monetization

Stripe is fully integrated to support a seamless and secure payment experience, including one-time payments, subscriptions (for membership tiers), and tipping functionality.
The platform supports currency conversion and fraud prevention, leveraging Stripe’s international payment infrastructure.

🧪 Scalability, Testing, and Future-Proofing

All modules are developed with scalability in mind using a modular monorepo structure (non-Turborepo).
CI/CD pipelines ensure continuous deployment and testing.
The architecture supports easy plug-in of future modules such as live streaming, AI personalization, and internationalization.

This comprehensive stack positions LovedByMen to scale globally as a fashion-centric social networking platform that blends community, commerce, and culture with a technical foundation built for performance, growth, and innovation.

✨ Features

🌏 Contributing

PRs and Issues are welcome! 🫵🏻

Please read the Contributing Guideline for details on our code of conduct, and the process for submitting pull requests to us.

🔩 Getting Started

$ git clone git@github.com:PetaTech/LovedByMen.git
$ cd LovedByMen
$ npm install
$ npm run dev   # Open http://localhost:3000 with your browser to see the result.

📲 Contact Info

Abbass Sharara

📩 E-mail: abas.cool.dev@gmail.com
🧳 Linkedin: Abbass Sharara
👨🏻‍💻 GitHub: PetaTech

🪪 License

This work is licensed under a Apache License2.0 by Abbass Sharara.

You include a copy of the original license in any distributions or substantial portions of the code.
You clearly state any changes made to the original source.
You preserve any required notices and attributions.
If a significant portion of this code is reused, a link back to this repository is appreciated but not required.

This software is provided "as is", without warranty of any kind.

Made with 🖤 by @Abbass