PixelPost is a Community Platform where users can create, share, and explore AI-generated images. The application uses React for the client-side, Node.js and Express for the server-side, Azure CosmosDB for data storage, and Azure Blob Storage for image storage. Authentication and authorization are handled using Auth0.
- AI-generated image creation using OpenAI's API👾
- User authentication with Auth0🔑
- Personalized user profiles👤
- Like and comment on posts👍🏻
- Dark mode support🌗
- Image storage and management with Azure Blob Storage📷
- Community showcase for sharing and exploring images🖼
- Responsive UI for a seamless experience on all devices📲
React: For building the user interface Tailwind CSS: For styling Auth0: For authentication and authorization
Node.js: For server-side JavaScript Express: For building the API CosmosDB: For data storage Azure Blob Storage: For image storage Auth0: For authentication and authorization
- Node.js (v14 or higher)
- npm (v6 or higher)
- Azure account (for Blob Storage)
- Auth0 account
- CosmosDB account
- Clone the repository:
git clone https://github.com/your-username/pixelpost.git
cd pixelpost
- Install dependencies for both client and server:
cd client
npm install
# Install server dependencies
cd ../server
npm install
Create a .env file in both the client and server directories and add the following environment variables:
VITE_AUTH0_DOMAIN=your-auth0-domain
VITE_AUTH0_CLIENT_ID=your-auth0-client-id
VITE_CLIENT_SECRET=your-auth0-client-secret
VITE_AUTH0_AUDIENCE=your-auth0-audience
VITE_BASE_URL=http://localhost:8080
AUTH0_DOMAIN=your-auth0-domain
AUTH0_AUDIENCE=your-auth0-audience
AZURE_BLOB_CONNECTION_STRING=your-azure-blob-connection-string
AZURE_CONTAINER_NAME=your-azure-container-name
COSMOSDB_URL=your-cosmosdb-url
OPENAI_API_KEY=your-openai-api-key
Client
cd client
npm run dev
Server
cd server
npm start
pixelpost/
├── client/
│ ├── .env
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ ├── README.md
│ ├── src/
│ │ ├── App.jsx
│ │ ├── assets/
│ │ ├── components/
│ │ ├── constant/
│ │ ├── context/
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── Pages/
│ │ ├── utils/
│ ├── tailwind.config.js
│ ├── vercel.json
│ └── vite.config.js
├── server/
│ ├── .env
│ ├── .gitignore
│ ├── index.js
│ ├── mongodb/
│ │ ├── connect.js
│ │ ├── models/
│ ├── package.json
│ ├── routes/
│ │ ├── dalleRoutes.js
│ │ ├── postRoutes.js
│ ├── services/
│ │ ├── azureBlobService.js
│ ├── utils/
│ │ ├── loginOrCreateUser.js
│ └── vercel.json
Contributions are welcome! Please submit a pull request for any changes. Lets make it Creative😎