devanonitos / share-promptapp-nextjs Goto Github PK

Share Prompt App

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

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.

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

• 👉 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.

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.

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

Contact me

• Facebook
• Fanpages
• Instagram
• Thread
• Twitter