Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/basedhound/prompt-share_app_next

Next.js application for seamless AI prompt sharing. Easily explore, create, and share prompts with MongoDB and secure NextAuth. Enjoy modern design and responsive interface for optimal use.
https://github.com/basedhound/prompt-share_app_next

app bcrypt crud google-cloud mongodb mongoose next-auth nextjs nextjs14 prompt react tailwind

Last synced: 7 days ago
JSON representation

Next.js application for seamless AI prompt sharing. Easily explore, create, and share prompts with MongoDB and secure NextAuth. Enjoy modern design and responsive interface for optimal use.

Host: GitHub
URL: https://github.com/basedhound/prompt-share_app_next
Owner: basedhound
Created: 2024-01-19T09:04:18.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-08-06T15:35:33.000Z (3 months ago)
Last Synced: 2024-08-06T18:31:37.610Z (3 months ago)
Topics: app, bcrypt, crud, google-cloud, mongodb, mongoose, next-auth, nextjs, nextjs14, prompt, react, tailwind
Language: JavaScript
Homepage: https://prompt-share-fv.vercel.app
Size: 662 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Prompt Share

##
📋 Table of Contents

- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- 📝 [Features](#features)
- 🚀 [Quick Start](#quick-start)

##
✨ Introduction

**[EN]** Next.js application designed for seamless AI prompt sharing between users. Explore, create, and share prompts effortlessly with MongoDB integration and secure authentication via NextAuth. Enjoy a modern design and responsive interface for optimal user experience.

**[FR]** Application Next.js conçue pour le partage prompts entre utilisateurs. Découvrez, créez et partagez des prompts facilement grâce à l'intégration MongoDB et à l'authentification sécurisée via NextAuth. Profitez d'un design moderne et d'une interface responsive pour une expérience utilisateur optimale.

##
⚙️ Tech Stack

- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.

- [**Next.js**](https://nextjs.org/docs) is a React framework known for its server-side rendering (SSR) and static site generation (SSG) capabilities, enhancing performance and SEO for web applications. It offers features like automatic code splitting, API routes for server-side logic, and a plugin system for extensibility.

- [**NextAuth**](https://next-auth.js.org/getting-started/introduction) is an authentication library for Next.js and Express.js. It simplifies integration with various authentication providers (such as Google, Facebook, GitHub) and local authentication methods. NextAuth manages user sessions and token handling securely, providing a smooth and secure authentication experience for modern web applications.

- [**MongoDB**](https://www.mongodb.com/docs/atlas/getting-started/) is a NoSQL database system known for its flexibility and scalability, ideal for handling large volumes of unstructured or semi-structured data. It stores data in JSON-like documents, making it easy to integrate with modern applications. MongoDB's features include powerful querying capabilities, automatic sharding for horizontal scaling, flexible data models, and support for distributed transactions in recent versions.

- [**Mongoose**](https://mongoosejs.com/docs/) is an ODM (Object Data Modeling) library for MongoDB and Node.js. It simplifies interactions with MongoDB by allowing developers to define data models with strict schemas, built-in validations, database action hooks, and methods to streamline CRUD (Create, Read, Update, Delete) operations.

- [**Bcrypt**](https://www.npmjs.com/package/bcrypt) is a password hashing function based on Blowfish. It is used to securely hash passwords before storing them in a database. bcrypt is known for its resistance to brute-force attacks and deliberately slow hashing process, making it suitable for securing sensitive data like user passwords.

- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.

##
📝 Features

👉 **Modern Design with Glassmorphism Trend Style**: A modern and visually appealing design, incorporating the glassmorphism trend style for a sleek and contemporary appearance.

👉 **Discover and Share AI Prompts**: Allow users to discover AI prompts shared by the community and create their own prompts to share with the world.

👉 **Edit and Delete Created Prompts**: Users have the ability to edit their created prompts at any time and delete them when needed.

👉 **Profile Page**: Each user gets a dedicated profile page showcasing all the prompts they've created, providing an overview of their contributions.

👉 **View Other People's Profiles**: Users can explore the profiles of other creators to view the prompts they've shared, fostering a sense of community.

👉 **Copy to Clipboard**: Implement a convenient "Copy to Clipboard" functionality for users to easily copy the AI prompts for their use.

👉 **Search Prompts by Specific Tag**: Allow users to search for prompts based on specific tags, making it easier to find prompts related to specific topics.

👉 **Google Authentication using NextAuth**: Enable secure Google authentication using NextAuth, ensuring a streamlined and trustworthy login experience.

👉 **Responsive Website**: Develop a fully responsive website to ensure optimal user experience across various devices, from desktops to smartphones.

##
🚀 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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

```bash
git clone {git remote URL}
```

**Installation**

Let's install the project dependencies, from your terminal, run:

```bash
npm install
# or
yarn install
```

**Set Up Environment Variables**

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

```env
# Google
GOOGLE_ID=
GOOGLE_CLIENT_SECRET=

# MongoDB
MONGODB_URI=

# NextAuth.js
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=
```

Replace the placeholder values with your actual respective account credentials:

- [Google](https://console.cloud.google.com)
- [MongoDB](https://cloud.mongodb.com)
- [NextAuth](https://next-auth.js.org)

**Running the Project**

Installation will take a minute or two, but once that's done, you should be able to run the following command:

```bash
npm run dev
# or
yarn dev
```

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