Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devanonitos/share-promptapp-nextjs

Build web app Share prompt AI is based on Next.js 13.4
https://github.com/devanonitos/share-promptapp-nextjs

axios-restful fullstack-development mongodb mongoose next-auth nextjs13 reactjs tailwind-css

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/devanonitos/share-promptapp-nextjs
Owner: DevAnonitos
License: other
Created: 2023-05-06T08:44:57.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-09-03T05:32:53.000Z (4 months ago)
Last Synced: 2024-10-14T23:25:56.444Z (2 months ago)
Topics: axios-restful, fullstack-development, mongodb, mongoose, next-auth, nextjs13, reactjs, tailwind-css
Language: JavaScript
Homepage:
Size: 1.47 MB
Stars: 8
Watchers: 1
Forks: 3
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: license.md
- Security: SECURITY.md

Awesome Lists containing this project

README

Share Prompt App

## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 📌 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Reference](#reference)
6. 🚀 [More](#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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)

**Clone this repository**

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

**Installation**

Install the project dependencies by using npm:

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

```env
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](https://console.cloud.google.com/).
- To have `NEXTAUTH_SECRET` please access the website [https://www.cryptool.org](https://www.cryptool.org/en/cto/openssl) 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**

```bash
npm run dev
```

Open [http://localhost:3000/](http://localhost:3000/) in your browser to view the project.

## 🔗 Reference

- [Next.js](https://nextjs.org/) - learn about Next.js fullstack framework and API.
- [React.js](https://react.dev/) - learn about concepts and examples of React library.
- [NextAuth.js](https://next-auth.js.org/) - a library auth is available for developers.
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript) - a programming language use for web developer.
- [TailWind-CSS](https://tailwindcss.com/) - a framework css is connivent to build style.
- [MongoDB](https://www.mongodb.com/) - a non-sql is easy to use and scale your database.

## 🚀 More

**Contact me**

- [Facebook](https://www.facebook.com/baonguyenno1412)
- [Fanpages](https://www.facebook.com/DevAnonitos/)
- [Instagram](https://www.instagram.com/devanonitos/)
- [Thread](https://www.threads.net/@devanonitos)
- [Twitter](https://twitter.com/BaoNo1144)