Hey there! 👋 Welcome to PixTrends, a vibrant community where you can explore, share, and stay updated on the latest trends in photography, art, and design. Whether you're an artist, designer, or just someone who loves beautiful visuals, PixTrends is your go-to platform for daily inspiration. 🌟
Get PixTrends up and running locally with these simple steps:
-
⬇️ Clone the Repository:
git clone https://github.com/onosejoor/PixTrends.git cd PixTrends -
📦 Install Dependencies:
npm install # Or yarn install, or pnpm install -
⚙️ Set Up Environment Variables:
- Create a
.env.localfile in the root directory. - Add your environment variables based on the
.env.examplefile. Make sure to fill in the necessary keys like MongoDB URI, Cloudinary credentials, etc.
SESSION_SECRET="your_secret_key" MONGODB_URI="mongodb://localhost:27017/pixtrends" CLOUDINARY_APIKEY="your_cloudinary_api_key" CLOUDINARY_SECRET="your_cloudinary_api_secret" CLOUDINARY_CLOUD_NAME="your_cloudinary_cloud_name" - Create a
-
🏃 Run the Development Server:
npm run dev # Or yarn dev, or pnpm devOpen http://localhost:3000 in your browser to view the app.
PixTrends is designed to be intuitive and engaging. Here’s how to make the most of it:
Creating an Account
1. **Navigate to the Sign-Up Page**: Click on the "Sign Up" link in the navigation bar. 2. **Fill in the Required Information**: Provide your name, email, username, and password. 3. **Verify Your Email**: Enter the OTP (One-Time Password) sent to your email address. 4. **Start Exploring**: Once your account is verified, you can start exploring the latest trends!
// Example: Sign-up form component
<SignUpForm />Posting Visuals
1. **Go to the Create Page**: Click on the "+" icon in the navigation bar. 2. **Add Content**: Enter a description and upload your image(s). 3. **Post**: Click the "Post" button to share your visual with the community.
Exploring Trends
1. **Navigate to the Trending Page**: Click on the "Trending" link in the navigation bar. 2. **Discover**: Browse the latest trending posts and users. 3. **Search**: Use the search bar to find specific content or users.
// Example: Trending page component
<TrendingPosts />- 🖼️ Image Sharing: Upload and share your stunning photos, artworks, and designs.
- 👤 User Profiles: Create and customize your profile to showcase your unique style.
- 🔎 Trend Discovery: Stay up-to-date with the latest visual trends in the community.
- 🔔 Notifications: Get real-time updates on likes, comments, and follows.
- 💬 Comments: Share your thoughts and feedback on posts.
- ❤️ Likes: Show appreciation for your favorite visuals.
| Technology | Description | Link |
|---|---|---|
| Next.js | React framework for building web applications | https://nextjs.org/ |
| TypeScript | Superset of JavaScript which adds static typing. | https://www.typescriptlang.org/ |
| Tailwind CSS | Utility-first CSS framework for rapid UI development | https://tailwindcss.com/ |
| MongoDB | NoSQL database for storing application data | https://www.mongodb.com/ |
| NextAuth.js | Authentication library for Next.js | https://next-auth.js.org/ |
| Cloudinary | Cloud-based image management service | https://cloudinary.com/ |
| Ioredis | A robust Redis client for Node.js | https://github.com/luin/ioredis |
| Lucide React | Beautifully simple, pixel-perfect icons for React | https://lucide.dev/ |
We welcome contributions from the community! Here's how you can help:
- 🐛 Report Bugs: Submit detailed bug reports to help us squash those pesky issues.
- 💡 Suggest Features: Share your ideas for new features and improvements.
- 🛠️ Submit Pull Requests: Contribute code changes to fix bugs or add new features.
To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Implement your changes and write tests.
- Submit a pull request with a clear description of your changes.
This project is licensed under the MIT License.
