데브허브 | DEVHUB | How To Build Full Stack Social Media Marketplace App Using React JS | Listing Website Using PERN
How To Build and Deploy Full Stack Social Media Marketplace or Buy and Sell website using PERN Stack | Build listing website using React
👉 Clerk Auth: https://go.clerk.com/iBiOefq
👉 Neon: https://get.neon.com/GdIJT9H
👉 Inngest: https://innge.st/Yt-gs-6
👉 ImageKit: https://tinyurl.com/2s7fnc8n
👉 Assets & Source Code: https://greatstack.dev/p/flipearn
👉 Live Preview: https://flipearn.vercel.app
👉 Part 2 Tutorial: • Part 2 - Build Full Stack Social Media Ma...
ImageKit docs: https://tinyurl.com/tnybufw3
Inngest YT Channel: / @inngest
SUBSCRIBE: @GreatStackDev
-------------------
In this video, we are going to build and deploy a Full stack Social Profile marketplace Application using PERN Stack. In this full stack marketplace project, users can buy and sell their social media profiles. It is an online buy and sell website.
Any user can signup on this website and list their social media profile for sale. Then we have created the admin panel, where admin can verify and update the social profile credentials. After updating the credentials user can buy that social profile and receive the credentials on email.
In this project we have create user authentication and subscription billing using Clerk. Clerk makes it easy to handle user sign-in, sign-up and account management. With clerk’s subscription billing feature, we can provide advanced features to our premium members. We can also offer the free trail of the premium plan.
We have added Inngest in this project to manage the Background Jobs. Using inngest functions we will send new order and listing emails. It will also help us handle Clerk webhooks more efficiently.
To store user, listings and order data we are going to use Neon. Neon is a server less PostgreSQL database that helps developers build reliable and scalable applications quickly.
To store and optimize images we have used ImageKit. ImageKit is a real-time media processing product that helps optimize, stream, and transform images and videos for the web. It can automatically compress and convert images and videos to a suitable format for every device.
#fullstack #greatstack #coding #programming #fullstackproject #fullstackwebdevelopment #collegeprojects #webdevelopment #postgresql #marketplace #reactjs
---- Timestamp ----
00:00 Project Overview
09:44 Basic React Project
38:33 Create Home Page
01:01:50 Setup User Authentication using Clerk
02:17:37 Create Marketplace Page
03:38:00 Create Listing Details Page
04:39:45 Create Chat Box
05:23:41 Create Messages page
05:50:51 Create My Listings page
07:11:38 Create Manage Listing page
08:03:54 Create My Orders Page
08:30:29 Setup admin pages
08:38:12 Create Backend Server
04:44:49 Connect Neon Database
08:54:11 Integrate Clerk Auth in Backend
08:56:47 Integrate Inngest for Background Jobs
09:36:52 Integrate ImageKit for image storage and transformation
10:47:43 Connect Listing APIs with Frontend
11:37:47 Connect Chat APIs with Frontend
-------------------
Watch Full Stack Food Order Website tutorial:
👉 • How To Create Full Stack Food Delivery Web...
Watch Full Stack Chat App tutorial:
👉 • Full Stack Real-time Chat Application with...
Watch Full Stack Music Streaming Website
👉 • How To Create Full Stack Spotify Clone App...
Watch Full Stack Blog Website Tutorial
👉 • How To Create Full Stack Blog App Using Ne...
-------------------------------------
Build more React JS projects:
Complete Portfolio Website In React:
👉 • How To Make Portfolio Website Using React ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React JS Using OpenAI API...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Generator App In React U...
Create Weather App In React
👉 • How To Create Weather App Using React JS I...
-------------------------------------
Images Credit:
https://www.pexels.com/https://unsplash.com/https://www.freepik.com/
-------------------------------------
Connect with me:
👉 https://linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack
