Share Prompt App

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 📌 Features
4. 🤸 Quick Start
5. 🔗 Reference
6. 🚀 More

🤖 Introduction

Share prompt app is a simple web application based on Nextjs framework. With modern UI/UX web app, share prompt app has more features with signin, signup, create post and view profile user.

⚙️ Tech Stack

• Next.js 13.4
• NextAuth.js
• JavaScript
• Tailwind CSS
• MongoDB

📌 Features

• 👉 SignIn Account: Users can sign in to their accounts by using Google Authentication provider and gain access to the SharePromptApp features and functionalities.
• 👉 SignOut Account: Users have to sign out their account, terminating their session and ensuring their privacy and security information.
• 👉 Search Post by tag: Allow users can search for their prompts on specific tags, it will return correct results to specific topics.
• 👉 Create Post, Edit Post and Delete Post: Users can create new posts, edit existing posts, and delete posts they no longer want. This feature is useful for users to manage their posts.
• 👉 Copy Prompt: Users can copy prompts or contents of posts to share and paste them into the others place.
• 👉 View Other Users ProfilePage: Users can have the ability to view other users profile pages on the SharePromptApp. To explore their profile pages and view another contents of the SharePromptApp.
• 👉 Google Authentication using NextAuth: Enable secure Google authentication using NextAuth.js, ensuring streamlined and truth login auth.
• 👉 Responsive Layout Website: Develop a fully responsive website to ensure optimize UI/UX with various devices, from desktop to mobile layout.

🤸 Quick Start

Follow step by step to set up the project locally on your device.

Prerequisites

Make sure that you have the following installed dependencies:

• Git
• Node.js
• npm (Node Package Manager)

Clone this repository

https://github.com/NguyenBao23131/Share-promptApp-Nextjs.git
cd share-prompt-ai

Installation

Install the project dependencies by using npm:

npm install

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

GOOGLE_ID=""
GOOGLE_CLIENT_SECRET=""
MONGODB_URI=""

NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_URL_INTERNAL="http://localhost:3000"
NEXTAUTH_SECRET=

Caution

Note:

• If you want to get key GOOGLE_ID and GOOGLE_CLIENT_SECRET, you should access the website GoogleCloud.
• To have NEXTAUTH_SECRET please access the website https://www.cryptool.org and type command line in terminal tool openssl rand -base64 32 to generate random private key.
• To have MONGODB_URI, you can get a private key from my mongodb database.

Running the Project

npm run dev

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

🔗 Reference

• Next.js - learn about Next.js fullstack framework and API.
• React.js - learn about concepts and examples of React library.
• NextAuth.js - a library auth is available for developers.
• JavaScript - a programming language use for web developer.
• TailWind-CSS - a framework css is connivent to build style.
• MongoDB - a non-sql is easy to use and scale your database.

🚀 More

Contact me

• Facebook
• Fanpages
• Instagram
• Thread
• Twitter