aurda012/codelounge

A StackOverflow Alternative.

📋 Table of Contents

🤖 Introduction
⚙️ Tech Stack
🔋 Features
🤸 Quick Start

🤖 Introduction

Find answers to your coding problems. CodeLounge is a community-driven platform designed to empower developers worldwide. Ask questions, engage with the community and collaborate on projects.

⚙️ Tech Stack

Next.js
TypeScript
MongoDB
Clerk
OpenAI
TipTap Editor
Lowlight
Imagekit
Shadcn
Tailwind CSS

🔋 Features

👉 Authentication: Latest Clerk implementation with sign-in and sign-up pages.

👉 CodeLounge AI: Get an instant answer to your question thanks to CodeLounge's OpenAI integration.

👉 Home-Page: Allows people to view and search all of the published questions along with filtering for newest, recommended, frequent and unanswered.

👉 Question Details Page: Allows users to view the question details with formatted code along with all answers and the opportunity for you to answer yourself!

👉 Ask A Question: Easy to use and intuitive text editor with implementation of code blocks based on popular languages. CodeLounge AI will instantly provide you with an answer.

👉 Community: Enables users to find and search for other developers part of the CodeLounge community.

👉 Collection: Provides users with the ability to see their saved questions.

👉 Find Jobs: Easily search and filter through some of the latest software engineering jobs on the market.

👉 Tags: Search for "tags" that have been added to questions. Find questions with specific frameworks, features, etc.

👉 Profile: View user profiles with an interesting badge system for their activity on CodeLounge along with their questions and answers.

👉 Edit Question: Provides the ability to edit your question with updated details. Will also provide an updated answer from the CodeLounge AI.

👉 Delete Questions/Answers: Easily delete your question or answer.

👉 Editor Keyboard Actions: Allows users to utilize keyboard shortcuts for various actions, including copying, pasting, deleting, indenting and more.

👉 Global Search: Easily find questions/answers you're looking for with an implemented global search.

👉 Loading States: Skeletonized loading states for all pages along with a global loading state and a top-loader.

👉 SEO Best Practices: Implemented server side metadata to populate all needed metadata based on individual questions, tags, etc. 100% SEO score on Lighthouse.

👉 Performance: Implemented dynamic imports along with best practices to provide a 100% Lighthouse performance score.

and many more, including code architecture, advanced react hooks, reusability, etc.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Git
Node.js
npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/aurda012/codelounge.git
cd codelounge

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_CLERK_WEBHOOK_SECRET=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

MONGODB_URL=

NEXT_PUBLIC_SERVER_URL=

OPENAI_API_KEY=

NEXT_PUBLIC_IMAGE_KIT_KEY=
NEXT_PUBLIC_IMAGE_KIT_URL=
IMAGE_KIT_PRIVATE_KEY=

Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the OpenAI, Clerk, and MongoDB.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

aurda012 / codelounge