12 Github Repositories To Master NextJS 🏆
Tags: webdev, javascript, tutorial, react
Published: 2023-12-14 16:12:54



## "Learn from the Other's Code"

**Hey Coders**, it's me [Md Taqui Imam](mdtaquiimam.vercel.app). **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**
{% embed https://htmlrev.com/ %}

{% cta https://htmlrev.com/ %}Get Free Templates🔥{% endcta %}

---

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 

{% embed https://github.com/webprodigies/webprodigies-cypress %}

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

{% embed https://github.com/taqui-786/Portfolio %}

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

{% embed https://github.com/joschan21/digitalhippo %}

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 

{% embed https://github.com/AntonioErdeljac/next13-discord-clone %}

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 

{% embed https://github.com/adrianhajdin/ecommerce %}

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 

{% embed https://github.com/AntonioErdeljac/next14-twitch-clone %}

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

{% embed https://github.com/AntonioErdeljac/next13-lms-platform %}

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

{% embed https://github.com/sangammukherjee/NextJS-Ecommerce-2023 %}

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

{% embed https://github.com/taqui-786/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

{% embed https://github.com/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

{% embed https://github.com/joschan21/quill %}

**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

{% embed https://github.com/taqui-786/project-friendz %}

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._

---


{% embed https://dev.to/random_ti %}

[![github](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/taqui-786) 

[![twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Taquiimam14)

[![portfolio](https://img.shields.io/badge/Portfolio-255E63?style=for-the-badge&logo=About.me&logoColor=white)](https://mdtaquiimam.vercel.app)

[![buymeacoffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/taquiDevloper)