"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.
htmlrev.com
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
Build a SaaS App with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets
| 🟢 Full Video | 🔴 Demo |
|---|---|
| Full Video | Demo |
Get all the help you need
Join the Community for FREE if you want to learn how to make money this year with websites! Share all bugs and solutions in the discord. Would love to collaborate and get to know talented developers like yourself Discord
Features in this application.
- 🤯 Real-time cursors
- 📝 Real-time text selection
- ⏱️ Real-time database and collaboration
- 🟢 Real-time presence
- 🗑️ Move to trash functionality
- 😜 Custom emoji picker
- 🌙 Light mode dark mode
- 🚨 Next.js 13 app router
- 🗺️ 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
- ✳️ Websockets
- …
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
Project Portfolio
A simple and Beautiful Porfolio made with Nextjs and Shadcn Ui.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
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
joschan21
/
digitalhippo
A Modern Fullstack E-Commerce Marketplace for Digital Products
DigitalHippo - A Modern Fullstack E-Commerce Marketplace for Digital Products
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
Getting started
To get started with this project, run
git clone https://github.com/joschan21/digitalhippo.git
and copy the .env.example variables into a separate .env file, fill them out & and that's all you need to get started!
Acknowledgements
- Payload for making this project possible
License
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
Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023
This is a repository for Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023
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
Prerequisites
Node version 18.x.x
Cloning the repository
git clone https://github.com/AntonioErdeljac/next13-discord-clone.git
Install packages
npm i
Setup .env file
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY…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
adrianhajdin
/
ecommerce
Learn how to build an incredible e-commerce webshop with an admin dashboard and CMS using Next 14, Stripe, TypeScript, and Payload CMS.
Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe
🌟 Become a top 1% Next.js 14 developer in only one course
🚀 Land your dream programming job in 6 months
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
Fullstack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL
This is a repository for Fullstack Trello Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL
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
Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023
This is a repository for Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023
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
Prerequisites
Node version 18.x.x
Cloning the repository
git clone https://github.com/AntonioErdeljac/next13-lms-platform.git
Install packages
npm i
Setup .env file
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=
DATABASE_URL=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
STRIPE_API_KEY…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 is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
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 Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
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
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
Quill - A Modern Fullstack SaaS-Platform
Built with the Next.js 13.5 App Router, tRPC, TypeScript, Prisma & Tailwind
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
Getting started
To get started with this project, run
git clone https://github.com/joschan21/quill.git
and copy the .env.example variables into a separate .env file, fill them out & and that's all…
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
taqui-786
/
project-friendz
A Social Media Platform made with Nextjs, Redis and Authjs etc.
This is a Next.js project with Shadcn ui create-next-app.
Best Project To Begineer to learn =>
Nextsjs
Typescript
Shadcn ui [https://ui.shadcn.com/]
Editorjs [https://editorjs.io/]
@mantine/hooks [https://www.npmjs.com/package/@mantine/hooks]
useform-hooks
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
Top comments (6)
Thanks for this list! 👍
These projects seem to be pretty complex and cover pretty much helpful functionality. But for those who want just to start with the basics of the new app router, I'd suggest exploring this one: github.com/focusreactive/MVP-NextJ...
Thank you so much for your great suggestion for beginners 💖
Awesome article Taqui. Thank you very much for mentioning HTMLrev. I really appreciate the support
You'r welcome Iucian 💖
Fantastic list! Thanks for sharing! 🤜🏽🤛🏽
You'r welcome Leonardo 💖