PixelStream - Stock Photography Platform

An awesome photo streaming platform for photographers and photo enthusiasts!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

PixelStream is a photo streaming platform for photographers and photo enthusiasts. It allows users to upload, share, and view photos from around the world. The platform provides a simple and intuitive interface for users to interact with the photos and photographers they love. Also, it provides a platform for photographers to showcase their work and connect with other photographers, so they can learn and grow together.

Features of PixelStream

• Photo Uploading: Easily upload images along with relevant information such as properties, camera specifications, and tags.
• Collection Management: Customize and manage collections, include related photos, and edit collection properties.
• Profile Management: Showcase your work to the public and connect with other users through profile management. folow other users and get followed by other users. Also tracked the liked photos and downloaded photos.
• Content Searching: advanced searching capabilities for photos, collections, and users using tags and properties.
• Unique UI: Experience a unique user interface with a dynamic background and a modern dark color theme for a seamless user experience.
• Photo Management: manage your photos by editing their properties, adding tags, and viewing their statistics.
• Engagement Featured: Easily manage your photos by expressing your preferences through liking or disliking, and download them for convenient access. Leave comments to provide feedback and engage with others.
• Statistics Tracking: Track the statistics of your photos, collections, and user profile to understand your audience and improve your content.

PixelStream is a web-based application that operates its user interface directly in the browser. Its server-side backend is constructed entirely with Node.js and Express.js, which provides a RESTful API for the frontend to consume. The frontend, on the other hand, is built with React.js and employs the React Context API for efficient state management. Additionally, the application uses Vanilla CSS for styling and is designed as a single-page application (SPA) that relies on React Router for navigation. Redis is used as a http cache between the backend and the frontend to improve the performance of the application.

(back to top)

Built With

• Backend and API: Node.js with Express
• Database: MySQL
• Cache: Redis
• Frontend: React with Vanilla CSS

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Make sure you have the following installed on your machine:

• Node.js
• NPM package manager

  npm install npm@latest -g

• MySQL
• Vite (for the frontend)

Also you want to have an Azure Blob Storage account to store the images uploaded by the users. if you don't have an Azure account you can create a free account here

if you want to use the new relic monitoring you can create a new relic account and get the license key and app name. New Relic

Installation

To get a local copy up and running follow these simple steps.

1. Clone the repo

   git clone https://github.com/ShavinAnjithaAlpha/PhotoShav

2. Install NPM packages for the frontend

   cd client
   npm install

3. Install NPM packages for the backend

   cd server
   npm install

4. Setup the Azure blob storage account

   create an azure blob storage account and get the nessasary credentials and urls mentioned in the .env.axample file

5. Create the .env file for the server

   use the template procide in the .env.example file and create a new .env file in the server folder. Update the values with the actual values.

   PORT={PORT}
   NODE_ENV={node environment mode}
   AZURE_CONNECTION_STRING={azure connection string}
   BLOB_CONTAINER_NAME={blob container name}
   AZURE_STORAGE_ACCOUNT={azure storage account}
   NEW_RELIC_APP_NAME={new relic app name} // optional
   NEW_RELIC_LICENSE_KEY={new relic license key} // optional
   
   REDIS_URL={redis url}
   
   // database configurations (ldevelopment database)
   MYSQL_HOST={database hostname}
   MYSQL_USER={database username}
   MYSQL_PASSWORD={database password}
   MYSQL_DATABASE={database name} // default: pixelstream
   MYSQL_PORT={database port} // default: 3306
   
   // optional (only if you use a production database)
   MYSQL_HOST_PROD={production database hostname}
   MYSQL_USER_PROD={production database username}
   MYSQL_PASSWORD_PROD={production database password}
   MYSQL_DATABASE_PROD={production database name} // default: pixelstream
   MYSQL_PORT_PROD={production database port} // default: 3306

   Note: The NEW_RELIC_APP_NAME and NEW_RELIC_LICENSE_KEY are optional. If you want to use the new relic monitoring you can add these values to the .env file. Also, production database confogurations are optional, only use if you have a production database.

6. Create the .env file for the frontend

7. use the template procide in the .env.example file and create a new .env file in the client folder. Update the values with the actual values.

   VITE_PORT={PORT}
   VITE_APP_API_URL={backend api url}
   
   VITE_LOCATION_API_URL={geoapify api url}
   VITE_LOCATION_API_KEY={geoapify api key}

   Note: The VITE_REDIS_URL is optional. If you want to use the redis cache you can add this value to the .env file.

8. Start the backend server

   cd server
   npm start

9. Run the frontend server

   cd client
   npm start

   If you want to run the server and client at the same time you can use the following command

    npm run dev

(back to top)

Usage

Here are some screenshots of the PixelStream Web platform:

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

• Shavin Anjitha ([email protected]) (LinkedIn) (Portfolio)

• Project Link: https://github.com/ShavinAnjithaAlpha/PixelStream

(back to top)

Acknowledgments

• Choose an Open Source License
• GitHub Pages
• Conventional Commits
• Redis
• Font Awesome Icons
• Material UI Icons

(back to top)