Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrianhajdin/jsmasterypro_devflow
Codebase for the Ultimate Next.js Course
https://github.com/adrianhajdin/jsmasterypro_devflow
nextjs nextjs15 react19
Last synced: 5 days ago
JSON representation
Codebase for the Ultimate Next.js Course
- Host: GitHub
- URL: https://github.com/adrianhajdin/jsmasterypro_devflow
- Owner: adrianhajdin
- Created: 2024-10-22T19:22:11.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-10T11:14:20.000Z (18 days ago)
- Last Synced: 2024-12-22T01:34:40.835Z (6 days ago)
- Topics: nextjs, nextjs15, react19
- Language: TypeScript
- Homepage: https://www.jsmastery.pro/next15
- Size: 3.55 MB
- Stars: 122
- Watchers: 9
- Forks: 49
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The Ultimate Next.js Course
Build this project step by step with our detailed course on JavaScript Mastery PRO Website. Join the JSM PRO family!
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Assets](#links)
## 🚨 Course
This repository contains the code corresponding to an in-depth course available on our JavaScript Mastery Pro Website.
If you prefer visual learning, this is the perfect resource for you. Follow our course to learn how to build projects like these step-by-step in a beginner-friendly manner
In this in-depth course, you’ll master Next.js by building and deploying a full-stack project, Devoverflow—a community-driven platform inspired by StackOverflow, enhanced with AI-powered answers, gamification, recommendations, and more. Using the latest features of Next.js, you’ll explore rendering strategies like SSG, ISR, SSR, PPR, Server Functions, Caching, & Revalidation to create a production-ready application.
The project uses MongoDB for a robust database layer, NextAuth (Auth.js) for versatile authentication options (Email/Password, GitHub, Google), and sleek styling with TailwindCSS and ShadCN UI. Devoverflow enables developers to ask questions, post answers, leverage AI for responses, vote, organize content, contribute, discover jobs, and explore recommended topics—all while engaging with gamified elements like badges and rewards.
If you're getting started and need assistance or encounter any bugs, you can join our active PRO Discord community, which has over 5k+ members. It's a place where people help each other out.
- Zod
- Next.js
- NextAuth
- Open AI
- MongoDB
- ShadCN UI
- TypeScript
- TailwindCSS
- React Hook Form
## 🔋 Features
👉 **Authentication**: Secure sign-in with NextAuth, supporting Email/Password, Google, and GitHub.
👉 **Home Page**: Displays questions with filters, search, and pagination for easy navigation.
👉 **Recommendations**: Personalized suggestions on the home page.
👉 **Complex Layout**: Organized layout with popular questions and tags in view.
👉 **Question Details**: View questions with rich content, including images and code blocks.
👉 **Voting**: Upvote/downvote on questions to highlight helpful content.
👉 **View Counter**: Tracks the number of views for each question.
👉 **Bookmarking**: Save questions for quick access later.
👉 **Answer Posting**: MDX editor with light/dark modes for submitting answers.
👉 **AI Answer Generation**: Get AI-generated responses to questions.
👉 **Answer Filtering**: Sort answers by newest or most-voted, with pagination.
👉 **Answer Voting**: Upvote/downvote answers to rank quality responses.
👉 **Collections**: Organized saved questions with filters, search, and pagination.
👉 **Community**: Browse all users with search, filters, and pagination.
👉 **Profile**: View user info, badges, and engagement history with pagination.
👉 **Job Finder**: Discover jobs with filters and search, tailored to the user’s location.
👉 **Tags Page**: List of all tags with question counts, filters, and pagination.
👉 **Tag Details**: View questions by tag with search and pagination.
👉 **Ask a Question**: Simple interface for posting new questions.
👉 **Edit & Delete**: Update or remove questions and answers with validation and authorization.
👉 **Global Search**: Find content across questions, users, tags, and more.
👉 **Responsive Design**: Fully optimized for a seamless experience on desktops, tablets, and mobile devices.
👉 **High Performance**: Fast loading and smooth interactions for an efficient user experience.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/JavaScript-Mastery-Pro/devflow-v2-record.git
cd devflow-v2-record
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
# Mongodb
MONGODB_URI=
# OpenAI
OPENAI_API_KEY=
# Rapid API
NEXT_PUBLIC_RAPID_API_KEY=
# Auth
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
AUTH_SECRET=
NEXTAUTH_URL=
# Tiny Editor
NEXT_PUBLIC_TINY_EDITOR_API_KEY=
NEXT_PUBLIC_SERVER_URL=
NODE_ENV=
```
Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the respective websites
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🔗 Assets
Assets used in the project can be found [here](https://drive.google.com/file/d/1nBru53dqIY4__A_WsburhpdiWUbdbncY/view?usp=sharing)
#