React.
js Mastery Exercise: Mini Social Media App
Project Overview
Build a Mini Social Media App ('ReactGram') to master React.js through practical steps. Learn JSX, props,
state, hooks, API calls, and more.
Step 1: Setup
- Initialize using Vite: `npm create vite@latest reactgram --template react`
- Optionally, integrate Tailwind CSS.
- Clean up the boilerplate.
Step 2: Profile Card Component
- Create `ProfileCard` component.
- Props: `username`, `profilePicture`, `bio`.
- Use Tailwind for styling.
Step 3: Post Feed
- Create a `PostFeed` component.
- Pass an array of posts and render using `.map()`.
- Include `PostCard` component with user, caption, likes.
Step 4: Like Button
- Add a like button to `PostCard`.
- Use `useState` to manage likes count.
Step 5: Add Post Form
- Controlled form to create a new post.
- Inputs: `caption`, `image URL`
- Append new post to state.
React.js Mastery Exercise: Mini Social Media App
Step 6: React Router
- Add routing with `react-router-dom`.
- Routes: `/` (home), `/profile` (user profile).
Step 7: useEffect + API
- Use `useEffect` to fetch user data.
- Use JSONPlaceholder or ReqRes API.
Step 8: Context API
- Create `UserContext` to store logged-in user.
- Use it in `Header`, `ProfileCard`, etc.
Step 9: Custom Hook
- Create a custom hook `usePosts()` to manage post logic.
Step 10: Optimization
- Use `React.memo` to optimize rendering.
- Add lazy loading and error boundaries.
Bonus Challenges
- Add comments to posts.
- Implement dark mode.
- Save to localStorage.
- Add Framer Motion animations.
- Make it mobile responsive.
Submission
React.js Mastery Exercise: Mini Social Media App
- GitHub repo or zip file.
- Include screenshots and a README.
