Personalized Content Dashboard

A dynamic, user-centric dashboard for tracking and interacting with personalized content—news, recommendations, and social posts—in a modern, engaging interface. Built as part of a Software Development Engineer (SDE) Intern - Frontend Development Assignment.

Live Demo

https://feedforge-lac.vercel.app/

Project Overview

This project is a feature-rich, interactive dashboard that aggregates content from multiple sources and empowers users to customize their experience. It demonstrates advanced frontend architecture, state management, API integration, and UI/UX best practices using React, Next.js, TypeScript, and Redux Toolkit.

Core Features

• Personalized Content Feed

  • Users can configure their favorite categories (e.g., technology, sports, finance) via a settings panel.
  • Preferences are persisted using Redux Toolkit and localStorage.
  • Fetches personalized news (NewsAPI), recommendations (e.g., TMDB/Spotify), and social posts (mock or real API).

• Interactive Content Cards

  • Each content piece is displayed as a card with images, headlines, descriptions, and actions ("Read More", "Play Now").
  • Infinite scrolling or pagination for efficient browsing.

• User Dashboard Layout

  • Responsive layout with sidebar navigation and a top header (search bar, user settings, account info).
  • Unified feed for news, recommendations, and social posts.
  • Trending section for top items by category.
  • Favorites section for user-marked content.

• Search Functionality

  • Search bar to find content across all categories.
  • Debounced search for performance.

• Advanced UI/UX

  • Drag-and-drop to reorder content cards (React DnD/Framer Motion).
  • Dark mode toggle (Tailwind CSS, CSS custom properties).
  • Smooth transitions, loading spinners, and card hover effects (Framer Motion/CSS animations).

• State Management & Logic

  • Global state with Redux Toolkit.
  • Async data fetching with Redux Thunks or RTK Query.
  • User preferences and session data persisted with localStorage or Redux Persist.

Tech Stack

• React
• Next.js
• TypeScript
• Redux Toolkit
• Tailwind CSS
• shadcn-ui
• Framer Motion (animations, drag-and-drop)
• RTK Query / Redux Thunks (API integration)
• Jest/React Testing Library (testing)

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or bun

Installation

# Clone the repository
git clone https://github.com/yourusername/feedforge.git
cd feedforge

# Install dependencies
npm install
# or
bun install

Running Locally

npm run dev
# or
bun run dev

Open your browser to http://localhost:3000 (or the port shown in your terminal).

Testing

npm run test

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have suggestions or improvements.

License

This project is licensed under the MIT License.