Back to Projects

🩵❤️ Cuervored | Social Network

NextjsTypeScriptReact QueryTailwind CSSPrismaMongoDB

A dedicated social network for fans of San Lorenzo de Almagro

🩵❤️ Cuervored | Social Network

Links

View on GitHubLive Demo

Created

September 1, 2024

Project README

Detailed documentation about this project

Technologies

Next.js 14ReactTypeScriptTailwind CSSshadcn/uiNextAuth.jsAxiosBcryptjsReact-Hook-FormZodReact QueryPrismaMongoDB

Overview

CuervoRed is a production-grade, full-stack social network tailored for San Lorenzo fans. It delivers a seamless, real-time experience for sharing posts, following users, tracking match attendance, and engaging with the community. Built with a modern, scalable architecture, it leverages the best of the React/Next.js ecosystem, robust authentication, and a flexible NoSQL backend.

What & Why

What

CuervoRed is a production-grade, full-stack social network tailored for San Lorenzo fans. It delivers a seamless, real-time experience for sharing posts, following users, tracking match attendance, and engaging with the community.

Why

As a San Lorenzo fan, I thought about how to connect all supporters in an app dedicated exclusively to the club — a place to follow other fans, post updates, comment, debate, and even discover who you've shared the stadium with. When San Lorenzo plays at home, you can 'check in' through the app to say you're going to the match, and you can also see who else has checked in.

The Challenge

Build an interactive social platform with maintainable code. And the most important thing is learn, learn and learn.

Highlights

  • Modular Next.js App Router structure
  • Prisma ORM with MongoDB Atlas
  • Server/Client component separation
  • Centralized API route handling
  • React Query for caching and background updates
  • Dynamic imports and memoized components
  • Optimized image uploads and transformations
  • NextAuth.js with JWT, OAuth, and credentials
  • Route-level middleware for access control
  • Zod-powered validation everywhere
  • Infinite scroll, skeleton loaders, and toasts
  • Responsive, accessible UI (Radix, Tailwind)
  • Optimistic UI for posts, likes, and comments
  • Error boundaries for posts and async data
  • ESLint, strict TypeScript, and modular hooks

Features

  • OAuth (GitHub, Google) and credentials login
  • JWT session management
  • Profile editing with avatar upload and bio
  • Follow/unfollow users
  • Infinite scroll feed (For You, Following)
  • Create, edit, and delete posts with image upload
  • Like/unlike posts
  • Comment on posts (with validation)
  • Optimistic UI for likes/comments
  • Track attendance for upcoming matches
  • View who is attending each match
  • Attendance expiration and status
  • User search with instant results
  • Who to follow suggestions
  • Responsive, accessible design
  • Skeleton loaders and toasts
  • Error boundaries for async data
  • Dark/light theme support

Pages

Public Pages

/auth/login- Login page with OAuth and credentials
/auth/register- Registration page
/- Home feed with posts
/:username- User profile page
/:username/edit- Edit profile page
/matches- Upcoming matches list
/settings- User settings
/match-attendance/:matchId- See who is attending a match
/search- Search users and posts

Architecture

Type: Next.js App Router

Modular Next.js App Router structure with Prisma ORM and MongoDB Atlas. Server/Client component separation with centralized API route handling.

Layers

app/

Next.js app directory (routing, layouts, pages)

components/

UI and feature components (modular, domain-driven)

data/

Data fetching and API logic

hooks/

Custom React hooks

lib/

Utilities, Prisma client, validation schemas

routes/

Route definitions and middleware

types/

TypeScript types and Prisma payloads

utils/

Utility functions (image, date, etc.)

Project Structure

Type: Next.js App Router

prisma/- Prisma schema and migrations
public/- Static assets
src/app/- Next.js app directory (routing, layouts, pages)
src/components/- UI and feature components (modular, domain-driven)
src/data/- Data fetching and API logic
src/hooks/- Custom React hooks
src/lib/- Utilities, Prisma client, validation schemas
src/routes/- Route definitions and middleware
src/types/- TypeScript types and Prisma payloads
src/utils/- Utility functions (image, date, etc.)

Installation

  1. Clone the repository git clone https://github.com/valentinzoia/cuervored.git
  2. Install dependencies npm install or yarn install
  3. Configure environment variables cp .env.example .env.local
  4. Fill in MongoDB, Cloudinary, NextAuth, and OAuth credentials
  5. Run Prisma migrations npx prisma migrate deploy
  6. Generate Prisma client npx prisma generate
  7. Start development server npm run dev

Learnings

Mastered Next.js 14 App Router patterns and server components; Deepened understanding of MongoDB with Prisma ORM - learned complex queries and aggregations; Improved handling of authentication flows and session management; Gained experience building social features (follows, feeds, notifications concept); Built efficient social feed with pagination and real-time updates using React Query infinite queries and optimistic updates; Implemented match prediction with date/time handling across timezones; Created responsive UI that works well on mobile for matchday usage; Managed complex state between posts, users, and matches.

Challenges

  • Building an efficient social feed with pagination and real-time updates - solved using React Query infinite queries and optimistic updates
  • Implementing match prediction with date/time handling across timezones
  • Creating a responsive UI that works well on mobile for matchday usage
  • Managing complex state between posts, users, and matches

Screenshots

Back to all projects