React Project - Developing a Social Media App

Introduction

• Technology Stack: MongoDB, Express, React, Node.js
• Fully Responsive: The app will be fully responsive
• Sections: Project will be divided into sections:
  • Front-end (React and Tailwind CSS)
  • Back-end and Integration

Overview of Features

• Login Page
  • Click to reset forgotten password
  • Proper validation for sign up
  • Verification email system (expires in 1 hour)
• Profile Page
  • Profile update with profession, location, and profile picture
  • Friend requests and acceptance
  • Post creation (with/without images)
  • Like, comment, and reply on posts
  • Complex comment system
  • Post search functionality
  • Light and dark themes
  • Password reset system

Setting Up the Project

• Create Project Folder: social_media
• Initialize React App: npx create-react-app client and navigate to client folder
• Install Tailwind CSS: Follow installation steps and configure tailwind.config.js
• Setup Project Structure: Retain only necessary files in src

Project Structure

• Pages and Components
  • pages: Home, Login, Register, Profile, ResetPassword
  • components: TopBar, ProfileCard, FriendsCard, SuggestedFriends, PostCard, CommentForm

React Router Setup

• Routing
  • Install dependencies: react-router-dom
  • Setup routes for Home, Profile, Register, Login, Reset Password
• Protected Routes
  • Implement ProtectedRoute to check if user is authenticated

Redux Setup

• Store and Reducers
  • Install dependencies: @reduxjs/toolkit, react-redux
  • Configure store and combine reducers: user slice, theme slice, post slice

Frontend Development

Components Details

• TopBar: Includes search bar, theme toggle, notifications, logout
• ProfileCard: Displays user details and allows profile updates
  • Displays friend count, account verification, join date, social links
• FriendsCard: Displays list of friends
• SuggestedFriends: Displays list of suggested friends for sending requests
• PostCard: Handles displaying individual posts
  • Includes like, comment, and reply features
• CommentForm: Handles form for posting comments

Forms and State Management

• Form Handling
  • Use react-hook-form for form validation and submission
• State Management
  • Use useSelector to access Redux state and useDispatch to dispatch actions

User Authentication and Verification

• Login and Registration
  • Implement proper authentication and validation
  • Email verification for registration
• Password Reset
  • Password reset functionality with email link

Theme Management

• Light/Dark Theme
  • Toggle between light and dark themes using Redux

Integration and Backend Setup (Next Steps)

• To Be Covered
  • Backend development with Node.js and Express
  • Database integration using MongoDB
  • Connecting frontend with backend

Conclusion

• Upcoming Parts: Stay tuned for backend integration
• Call to Action: Like, subscribe and support

---

Note: Always ensure your state and props are correctly managed and components are properly structured for a seamless integration.