"Learn from the Other's Code"
Hey Coders, it's me Md Taqui Imam. In today's blog, I want to share some of the best GITHUB repositories to learn NEXTJS.
NextJS is a popular JavaScript framework that allows us to build dynamic sites and apps with React.
And Don't forget to Visit HTMLrev 👇 Once
Free HTML Templates for Websites on HTMLrev
Discover carefully selected free HTML templates for websites, landing pages, one pagers, coming soon, blogs, portfolios, ecommerce and dashboards.
And Don't forget to drop a (💖) and save it for later 📌.
Let's check out and Star⭐ these top projects📝
So First is 👇
1. Notion Clone
| 🟢 Full Video | 🔴 Demo |
| Full Video | Demo |
This is a SaaS App with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets. It has various features like:
🗺️ Creating free plan restrictions
💰 Take monthly payments
📧 Custom email 2FA invitation
⚡️ Supabase Row level policy
👨👨👧👦 Real-time Collaboration
👾 Deployment
🤑 Custom Rich text editor
📚 Update profile settings
📍 Manage payments in a portal
🔐 Custom Authentication
etc......
2. Nextjs Simple Portfolio with Shadcn UI
A simple and Beautiful Porfolio made with Nextjs and Shadcn Ui.
This portfolio site was build with Nextjs + ShadcnUI = 🔥 . It features a clean design made with Tailwind CSS and includes pages like about, projects, resume and contact.
As someone learning web development, a portfolio is very important to showcase your skills. This is a perfect starter portfolio template to get inspired from!
3. digitalhippo -A ecommerce app with Admin Dasboard
Built with the Next.js 14 App Router, tRPC, TypeScript, Payload & Tailwind
Features
🛠️ Complete marketplace built from scratch in Next.js 14
💻 Beautiful landing page & product pages included
🎨 Custom artwork included
💳 Full admin dashboard
🛍️ Users can purchase and sell their own products
🛒 Locally persisted shopping cart
🔑 Authentication using Payload
🖥️ Learn how to self-host Next.js
🌟 Clean, modern UI using shadcn-ui
✉️ Beautiful emails for signing up and after purchase
✅ Admins can verify products to ensure high quality
⌨️ 100% written in TypeScript
🎁 ...much more
DigitalHippo is an amazing ecommerce app built with NextJS, Stripe and other popular technologies. It allows users to sell and purchase digital products online.
I was amazed by features like product categories, admin dashboard and checkout process. The code is very clean and well organized too.
For anyone wanting to build an online store, this is a must study project to understand integration of payments and marketplace functionality.
4. Discord clone in Nextjs 13
Features:
Real-time messaging using Socket.io
Send attachments as messages using UploadThing
Delete & Edit messages in real time for all users
Create Text, Audio and Video call Channels
1:1 conversation between members
1:1 video calls between members
Member management (Kick, Role change Guest / Moderator)
Unique invite link generation & full working invite system
Infinite loading for messages in batches of 10 (tanstack/query)
Server creation and customization
Beautiful UI using TailwindCSS and ShadcnUI
Full responsivity and mobile UI
Light / Dark mode
Websocket fallback: Polling with alerts
ORM using Prisma
MySQL database using Planetscale
Authentication with Clerk
A Full Stack Discord clone build with Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL ..
This project shows how to code a messaging platform similar to Discord using NextJS, Socket.io and other tools.
I think the live chat and realtime presence is so cool to have in an app. Learning how websockets work under the hood can really enhance your skills.
5. Ecommerce Platform with Nextjs 14
This project help you to learn to Build and Deploy a full stack E-commerce App with an Admin Dashboard, CMS & Stripe.
This repository contains the code for a f*ull-featured ecommerce site* with admin dashboard and CMS.
Features like product management, user roles and payments integration are built following best practices.
6. Twitch Clone in Nextjs 14
Key Features:
📡 Streaming using RTMP / WHIP protocols
🌐 Generating ingress
🔗 Connecting Next.js app to OBS / Your favorite streaming software
🔐 Authentication
📸 Thumbnail upload
👀 Live viewer count
🚦 Live statuses
💬 Real-time chat using sockets
🎨 Unique color for each viewer in chat
👥 Following system
🚫 Blocking system
👢 Kicking participants from a stream in real-time
🎛️ Streamer / Creator Dashboard
🐢 Slow chat mode
🔒 Followers only chat mode
📴 Enable / Disable chat
🔽 Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
📚 Sidebar following & recommendations tab
🏠 Home page recommending streams, sorted by live first
🔍 Search results page with a different layout
🔄 Syncing user information to our DB…
This project shows how to develop a live streaming platform similar to Twitch with features like broadcasting, comments and more.
Streaming video in realtime seems very challenging but the code is cleanly structured.
Learning how services like LiveKit and websockets are leveraged here can definitely help budding developers produce innovative products.
7. LMS Platform with Nextjs
Key Features:
Browse & Filter Courses
Purchase Courses using Stripe
Mark Chapters as Completed or Uncompleted
Progress Calculation of each Course
Student Dashboard
Teacher mode
Create new Courses
Create new Chapters
Easily reorder chapter position with drag n’ drop
Upload thumbnails, attachments and videos using UploadThing
Video processing using Mux
HLS Video player using Mux
Rich text editor for chapter description
Authentication using Clerk
ORM using Prisma
MySQL database using Planetscale
An LMS or learning management system platform built with Nextjs, React, Stripe, Mux, Prisma, Tailwind, MySQL etc.
Key Features :
Browse & Filter Courses
Purchase Courses using Stripe
Mark Chapters as Completed or Uncompleted
Progress Calculation of each Course
Student Dashboard
Teacher mode
Create new Courses
Create new Chapters
Easily reorder chapter position with drag n’ drop
Upload thumbnails, attachments and videos using UploadThing
Video processing using Mux
HLS Video player using Mux
Rich text editor for chapter description
Authentication using Clerk
ORM using Prisma
MySQL database using Planetscale.
8. Once more an E-commerce app with Nextjs
This E-commerce app is good for Beginners developers to practice how things works.
The project structure and integration of features like cart, products and checkout are put together thoughtfully while maintaining performance.
9. itZmyLink
This is a social media reference landing page application developed with NextJS 13. I think services like these popularized by Linktree are very useful.
Studying clean coding practices in this project will build a strong foundation.
Learning how to d*eploy on platforms like Vercel* is also valuable as web developers nowadays.
10. Blogging app
safak / markdown-blog
A simple blogging platform created with NextJS and Hugo. Writing blogs and documentation is an important part of all tech careers.
This project can teach us good habits like markdown syntax and how static site generation works. It's the perfect starting point for learning content management and publishing flows.
11. quill - A SaaS-Platform
Built with the Next.js 13.5 App Router, tRPC, TypeScript, Prisma & Tailwind
A note-taking Web app that allows users to easily capture notes with images, formatting and more.
Key Features :
🛠️ Complete SaaS Built From Scratch
💻 Beautiful Landing Page & Pricing Page Included
💳 Free & Pro Plan Using Stripe
📄 A Beautiful And Highly Functional PDF Viewer
🔄 Streaming API Responses in Real-Time
🔒 Authentication Using Kinde
🎨 Clean, Modern UI Using 'shadcn-ui'
🚀 Optimistic UI Updates for a Great UX
⚡ Infinite Message Loading for Performance
📤 Intuitive Drag n’ Drop Uploads
✨ Instant Loading States
🔧 Modern Data Fetching Using tRPC & Zod
🧠 LangChain for Infinite AI Memory
🌲 Pinecone as our Vector Storage
📊 Prisma as our ORM
🔤 100% written in TypeScript
🎁 ...much more.
12. Friendz - A social media app
A social media application built with NextJS, Editorjs, Taiwindcss and other tools.
Features like
authentication
profiles
Like , Comment and Follow
realtime feed
Redis
Prisma ORM
Much more
That's it 👋
These are the best Github repositories for mastering nextjs and lerning how things work in real in techs.
Studying projects created by skilled developers will definitely accelerate our skills with NextJS.
I hope this list provided you some inspiration to become experts with this wonderful framework!
Please let me know if you need any help exploring these repositories.
Happy Coding