Social Media Dashboard

Description

This project involves creating a static social media dashboard displaying user information and an overview of user activities. This intermediate project provides hands-on experience with component design and layout in React, focusing on assembling a dashboard interface.

Requirements

The Social Media Dashboard should include the following features:

• User information section displaying profile details such as name, profile picture, and bio.
• Activity overview with widgets showing metrics like recent posts, friends count, and messages.
• A responsive layout that adapts to different screen sizes using Tailwind CSS.

Key Concepts

• Designing reusable React components for UI elements.
• Implementing a cohesive and clean dashboard layout.
• Styling applications with Tailwind CSS for responsive design.
• Managing component state and data flow in React applications.

Learning Objectives

After completing this project, students will be able to:

• Build a social media dashboard with React using component composition.
• Design complex layout structures effectively leveraging Tailwind CSS.
• Implement a seamless user interface with responsive design considerations.
• Handle component-based state and props to manage static data effectively.

$ npm create vite@latest social-media-dashboard -- --template react-ts

$ yarn create vite social-media-dashboard --template react-ts

$ bun create vite social-media-dashboard --template react-ts