Pixelance is a comprehensive marketplace for digital assets such as icons, images, and more. Built using cutting-edge technologies, Pixelance ensures seamless integration and performance for both buyers and sellers of digital assets.
- Features
- Technologies Used
- Setup Instructions
- Environment Variables
- Database Configuration
- Updating Next Configuration for Remote Image Patterns
- Install Dependencies
- Run Pixelance
- License and Ownership
- Comprehensive digital asset marketplace
- Secure payments via Stripe
- Responsive design with Tailwind CSS
- Real-time communication and notifications
- User authentication and management
- Seamless integration with MongoDB for data storage
- Frontend: React, Next.js, TypeScript, shadcn-ui, Tailwind CSS, lucide-react
- State Management: Zustand
- Backend: Express.js, tRPC server and client, Payload CMS
- Database: MongoDB
- Authentication and Notifications: Resend, Nodemailer
- Payments: Stripe
- Utilities: Body-parser, dotenv, cross-env, nodemon, swiper, zod, postcss
To set up and run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/patrickgunnar/pixelance.git
cd pixelance
Fill in the required keys and secrets in the .env file or rename .env_example to .env.
To run this application, you must have accounts on the following platforms and obtain the necessary keys and secrets:
- Stripe: Sign up at Stripe and obtain your secret key and webhook secret.
- Resend: Sign up at Resend and obtain your API key.
- Stripe: Go to your Stripe dashboard and set the webhook URL to https://"your-url"/api/webhooks/stripe
- Listens for the "checkout.session.completed" event.
Ensure these values are correctly set in your .env file.
- PAYLOAD_SECRET="" (any secure key)
- NEXT_PUBLIC_SERVER_URL="" (application URL)
- MONGODB_URL=""
- RESEND_API_KEY=""
- STRPE_SECRET_KEY=""
- STRIPE_WEBHOOK_SECRET=""
- Ensure your MongoDB database is running.
- Update the MONGODB_URL in the .env file with your database credentials.
To ensure your images are displayed correctly, you need to configure your URL in the Next.js settings. Follow these steps:
-
Open the next.config.mjs file:
- Locate and open the next.config.mjs file in your project root directory.
-
Update the Remote Patterns:
- Within the images section, find the remotePatterns array.
Add your hostname (URL) and protocol to the remotePatterns array as shown below:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'your-domain.com',
},
],
},
};
Replace your-domain.com with your actual domain and adjust the pathname if necessary.
npm install
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
All rights and intellectual property over Pixelance are exclusively owned by Patrick Gunnar.