Promptopia is a Next.js-based web application where users can authenticate using their Google account, write and share creative prompts, view other users' prompts, and manage their own prompts in a profile section. This project was created to explore and understand the basics of Next.js while building a functional and user-friendly application.
- Google Authentication: Seamless user login using Google OAuth.
- Create Prompts: Users can write and publish their creative prompts.
- View Prompts: Browse prompts written by other users.
- Profile Management:
- Edit your prompts.
- Delete prompts you no longer want to share.
- Responsive Design: Optimized for various screen sizes.
Follow these steps to run the project locally:
- Node.js installed on your system.
- MongoDB Atlas cluster set up and a connection URI.
- Google Cloud Console project for OAuth credentials.
-
Clone the repository:
git clone https://github.com/Meet-Thakkar21/promptopia.git
-
Navigate to the project directory:
cd promptopia -
Install dependencies:
npm install # or yarn install -
Create a
.env.localfile in the root directory and add the following:GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret MONGODB_URI=your-mongodb-atlas-uri NEXTAUTH_URL=http://localhost:3000
-
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to see the app in action.
promptopia/
├── app/ # Next.js app directory
│ ├── api/ # API routes for authentication and data handling
│ ├── profile/ # User profile section
│ └── page.js # Home page
├── components/ # Reusable components
├── models/ # Mongoose models for MongoDB
├── utils/ # Utility functions
├── styles/ # CSS and global styles
├── .env.local # Environment variables
└── README.md # Project documentation
- Frontend: Next.js, React.js
- Backend: Node.js, Express
- Database: MongoDB Atlas
- Authentication: NextAuth.js with Google OAuth
- Styling: Tailwind CSS
This project helped in understanding:
- The app directory structure in Next.js.
- How to integrate NextAuth.js for authentication.
- Connecting a Next.js app with MongoDB Atlas.
- CRUD operations using Mongoose.
- Add search and filtering functionality for prompts.
- Allow users to like or comment on prompts.
- Enhance UI with animations and better styling.
- Implement dark mode support.
Contributions are welcome! If you’d like to improve this project:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Make your changes and commit them:
git commit -m "Add feature-name" - Push to your branch:
git push origin feature-name
- Open a pull request.
Feel free to reach out with any questions or suggestions! 😊