dhanu1402 / social-media

Social_Media app

Learnings

1. Create next-app

   1. npx create-next-app .
   2. install tailwindcss postcss autoprefixer
      1. npx install tailwindcss postcss autoprefixer
      2. npx tailwindcss init -p
      3. update tailwind.config.js
      4. update global.css
      5. npm run dev

2. Layout structure

   1. add colors in tailwind.config.js

3. Sidebar navigation

4. Post form

5. Single post

   1. npm i react-clickout-handler

6. Animation on sidebar & dropdown

7. Profile page

8. Profile about / friends / photos

9. Saved post page

10. Notifications page

11. Login page

12. Styling for mobiles

13. setting up supabase and login

    1. setting up Google logins for your application consists of 3 parts:
       1. Create and configure a Google Project on the Google Cloud Platform Console
       2. Add your Google OAuth keys to your Supabase Project
       3. Add the login code to your Supabase JS Client App :- npm install @supabase/supabase-js
       4. npm install @supabase/auth-helpers-nextjs :- For next.js
       5. npm install @supabase/auth-helpers-react :- For react.js
       6. set up environment variables
       7. setup in app.js

14. Logout

15. User profile table in supabase

16. Show correct avatar and name on post form

// xewwy7-bokjeG-zokjur