I am thrilled to share an incredible web development and innovation journey in this blog post. Over time, I have embarked on a quest to recreate and reimagine some of the most popular web applications, resulting in a diverse collection of full-stack clones that reflect my passion for coding and technology.
From the e-commerce giant Amazon to the real-time messaging platform WhatsApp, each clone is a testament to my dedication to mastering various technologies and showcasing their capabilities.
In this post, we'll delve into the features and functionalities of these remarkable clones, offering a glimpse into the world of web development and the endless possibilities it presents.
Most of the codes of these clones are open source. You can check it from my GitHub account.
If you like this blog post and my work, don't forget to subscribe to my YouTube channel. It would help me a lot.
https://www.youtube.com/@KishanSheth21/videos?embedable=true
1. Full Stack Amazon Clone
✅ Built using Next.js
✅ Styled with Tailwind CSS
✅ Backend generated using Amplication
✅ State Management with Zustand
✅ Typescript for type safety
✅ Login Signup using JWT Tokens
✅ API calls using Axios
✅ Recharts for charts
✅ Next UI for excellent prebuilt components
✅ React Pro Sidebar for prebuilt excellent sidebar.
✅ Admin Panel
✅ Table Pagination
✅ Categories CRUD (Create/Read/Update/Delete)
✅ Products CRUD (Create/Read/Update/Delete)
✅ Order Management
✅ Dashboard for Admin
✅ Admin Login
✅ User Login & Signup
✅ User view products
✅ User search products
✅ User adds products to the cart
✅ User place order
✅ And many more features that you can watch from the video below
https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true
2. Full Stack Airbnb Clone
✅ Built using Next.js
✅ Styled with Tailwind CSS
✅ Backend generated using Amplication
✅ State Management with Zustand
✅ Realtime Maps using Mapbox API
✅ Login Signup using JWT Tokens
✅ API calls using Axios
✅ Create Listings
✅ View Listings
✅ Book Listings
✅ Delete Listings
✅ Add Listing to Wishlist
✅ Remove Listing from Wishlist
✅ View booked Listings
✅ Search Listings
✅ Search Listings using Map
✅ View Listings Data on Map
https://www.youtube.com/watch?v=nkmPmUpUM6U&embedable=true
3. Full Stack Fiverr Clone
✅ Built with Next.js
✅ Used Prisma For ORM
✅ PostgreSQL for DB
✅ Node.js for backend
✅ Express for Node.js framework
✅ Firebase for Login
✅ Styled using Tailwind CSS
✅ Axios for API Calls
✅ Stripe for Payment Gateway
✅ Typescript for type Safety
✅ Cookies and JWT for Auth Management
✅ Multer for Image Upload
✅ Create Gigs
✅ View Gigs
✅ Search Gigs
✅ Rate Gigs
✅ Order Gigs
✅ Chat with Admin/User
✅ Revenue Analytics
✅ Payment with Stripe
https://www.youtube.com/watch?v=cJ7xvBkuqiA&embedable=true
4. Full Stack Whatsapp Clone
✅ Next.js For Frontend
✅ Node.js with Express as Backend
✅ Prisma as ORM with PostgreSQL
✅ Google Login Using Firebase
✅ Socket.io for Messages
✅ Styled using Tailwind CSS
✅ Context for State Management
✅ Wavesurfer for live Audio Waveforms
✅ Login with Google using Firebase: Seamlessly sign in with your Google account via Firebase integration.
✅ Switch between multiple databases using Prisma: Customize your database preferences to suit your needs effortlessly.
✅ Send and Receive Messages using Sockets: Real-time messaging capabilities using Socket.io for instant communication.
✅ Voice Call and Video Call Feature: Enjoy crystal clear voice and video calls within the app.
✅ Voice Notes with Live Audio Waveforms: Send and receive voice notes accompanied by live audio waveforms for an enhanced messaging experience.
✅ Support for Emoji: Express yourself with a wide range of emojis to add fun and emotions to your conversations.
✅ Send Images: Share images with your friends and loved ones effortlessly.
✅ Online/Offline Functionality: Identify your contacts' online and offline status.
✅ Search Messages: Quickly find specific messages using the search functionality.
✅ Capture Photo From Camera: Take instant photos using your device's camera and send them instantly.
✅ Message Read Status: Know when your recipients have read your messages.
✅ Message Time: Stay updated with the time stamps of messages for better organization.
https://www.youtube.com/watch?v=keYFkLycaDg&embedable=true
5. Full Stack Netflix Clone
✅ Built with React
✅ Used TMBD API for movie data
✅ React Router DOM for navigation
✅ Axios for API Calls
✅ Redux Toolkit for State Management
✅ Firebase for Login using Google
✅ Backend in Node.js with Express
✅ Mongoose and MongoDB for DB
✅ Styled using Styled Components
https://www.youtube.com/watch?v=HgaJW2I4Mbk&embedable=true
6. Spotify Clone With Spotify API
✅ Built with React
✅ Styled with Styled Components
✅ Used Spotify API for Using Real-Time Data
✅ Used Context for State Management
✅ Used Spotify API for player Controls
✅ Play/Pause Track
✅ View Spotify Account Playlist
✅ Play Track from Playlist
✅ Forward/Backward Track
✅ Volume Increase/Decrease
https://www.youtube.com/watch?v=ajVcLGEw8Xw&embedable=true
7. YouTube Clone With YouTube Data API
✅ Built using React
✅ Styled with Tailwind CSS
✅ Typescript for Type Safety
✅ Redux Toolkit for State Management
✅ Axios for API calls
✅ React Router for Routing
✅ Infinite Scroll For Infinitely Scrolling of videos
✅ Used YouTube Data API to get the videos
✅ Search Videos
✅ Random Home Page Videos
✅ View the Video Page with all the details
✅ Metadata of videos
https://www.youtube.com/watch?v=I32ri7v3SYk&embedable=true
8. Zoom Clone
✅ Built with React
✅ Firebase for login using Google
✅ Firestore for storing the data and making the app serverless
✅ React Router for Routing
✅ Typescript for type safety
✅ Redux Toolkit for State Management
✅ Elastic UI for ready-made components
✅ Zegocloud prebuilt UI for Video Meetings
✅ You can schedule different types of meetings and join them
✅ Change Meetings Info
https://www.youtube.com/watch?v=KCqdXubNoE4&embedable=true
9 Candy Crush in React
✅ Created using React
✅ Used Redux Toolkit for State Management
✅ Styled with Tailwind CSS
✅ Typescript for Type Safety
✅ Fully Functional Candy Crush Game using React
✅ You will learn various best practices
✅ You will learn how to implement complex Logic
✅ Logic for valid and invalid moves developed
✅ Candies with 3 or 4 matches can be poped.
https://www.youtube.com/watch?v=tfV421C2r2A&embedable=true
What's Next?
I am working on these Clones next and will create a video before the end of the year.
- Full Stack Discord Clone
- Full Stack Instagram Clone
- Full Stack ChatGPT Clone
- Full Stack Twitter Clone
You can check the status of these clones on my Discord Server.
https://discord.com/invite/JjKwqn6Tm4?embedable=true
Conclusion
As the author of this blog post, I'm delighted to share this exciting array of full-stack clones. They stand as a testament to the endless possibilities of web development, showcasing the power of technology and innovation.
Whether you're a seasoned developer or just starting your coding journey, I hope these clones inspire you to explore, learn, and create. Stay tuned for more exciting projects on the horizon in the world of full-stack development.
Also published here