Daftar Isi
- "Learn from the Other's Code"
- 1. Notion Clone
- Build a SaaS App with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets
- Get all the help you need
- Features in this application.
- 2. Nextjs Simple Portfolio with Shadcn UI
- Project Portfolio
- Getting Started
- 3. digitalhippo -A ecommerce app with Admin Dasboard
- DigitalHippo - A Modern Fullstack E-Commerce Marketplace for Digital Products
- Features
- Getting started
- Acknowledgements
- License
- 4. Discord clone in Nextjs 13
- Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023
- Prerequisites
- Cloning the repository
- Install packages
- Setup .env file
- 5. Ecommerce Platform with Nextjs 14
- 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
- 6. Twitch Clone in Nextjs 14
- Fullstack Twitch Clone: Next.js 14, Livestreaming, React, Prisma, Stripe, Tailwind, MySQL
- 7. LMS Platform with Nextjs
- Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023
- Prerequisites
- Cloning the repository
- Install packages
- Setup .env file
- 8. Once more an E-commerce app with Nextjs
- Getting Started
- Learn More
- Deploy on Vercel
- 9. itZmyLink
- Getting Started
- Learn More
- Deploy on Vercel
- 10. Blogging app
- 11. quill - A SaaS-Platform
- Quill - A Modern Fullstack SaaS-Platform
- Features
- Getting started
- 12. Friendz - A social media 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
- Learn More
- That's it 👋
tags
NextJS
Web Dev
tutorial
id
3
published
Dec 17, 2023
reading_time
category
Framework
Programming
Web Development
Tutorial
Technology
author
"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 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 |
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.
#nextjs#Web Dev#tutorial
T
Tentang Tim Editorial
Profil penulis belum tersedia. Konten dikurasi oleh tim editorial kami.
Komentar
Bagian komentar akan diaktifkan segera
