Share-promptApp-Nextjs

Build web app Share prompt AI is based on Next.js 13.4

OTHER License

Stars
6
View Code on GitHub
Ecosystems: MongoDB, Mongoose, React, Tailwind CSS

📋 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:

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