PixelStream - Photo Streaming 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

• Create photographer profiles
• Upload photos
• Photo Collections
• Like/Dislike on photos
• Search for photos, collections and photographers
• Follow/Unfollow photographers
• Track photo views, downloads, and likes
• View your profile and stats
• View other photographers' profiles and stats

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.

Architeture of the Backend

The backend of the application is constructed using Node.js and Express.js. To facilitate communication with the frontend, it employs a RESTful API. This API can be adapted and integrated with other applications, such as mobile apps, with the appropriate customizations and permissions. The backend utilizes MySQL as its database to store all data. Additionally, Azure Blob Storage is employed to store images uploaded by users.

The architecture of the backend is typical three layered architecture that most of the web applications and API services use. The three layers are:

• Controller Layer

  The controller layer is responsible for handling the incoming requests from the frontend and sending the response back to the frontend. The controller layer is the entry point of the backend server. It is responsible for routing the requests to the appropriate service layer and sending the response back to the frontend.

• Service Layer

  The service layer is responsible for handling the business logic of the application. It is responsible for processing the data and sending it to the database layer for storage. The service layer is the core of the backend server. It is responsible for processing the data and sending it to the database layer for storage.

• Data Access Layer

  The data access layer is responsible for interacting with the database. It is responsible for fetching the data from the database and sending it to the service layer for processing. The data access layer is the interface between the backend server and the database. It is responsible for fetching the data from the database and sending it to the service layer for processing.

RESTful API Endpoints

1. /api/auth

• POST /api/auth/register - Create a new user account
• POST /api/auth/login - Login to an existing user account
• POST /api/auth/change-password - Change the password of the user account (Authenticated)

2. /api/account (Authenticated)

• POST /api/account/:username/ - Update the user account
• DELETE /api/account/:username/ - Delete the user account
• GET /api/account/:username/downloads - Get the downloads of the user account
• POST /api/account/:username/interrest - Update the interrest of the user account
• POST /api/account/:username/change-profile-image - Change the profile image of the user account

3. /api/photos

• GET /api/photos - Get photos with paginations
• GET /api/photos/:id - Get a photo by id
• POST /api/photos - Upload a new photo (Authenticated)
• POST /api/photos/:id/like - Like a photo (Authenticated)
• POST /api/photos/:id/dislike - Dislike a photo (Authenticated)
• POST /api/photos/:id/download - Download a photo with user tracking (Authenticated)
• GET /api/photos/:id/get - download a photo without user tracking
• GET /api/photos/random - Get random photo/s based on teh query parameters
• GET /api/photos/:id/statistics - Get the statistics of a photo
• GET /api/photos/tags - Get all the tags with paginations
• POST /api/photos/likes - Get all the likes related with a user
• DELETE /api/photos/:id/like - Delete a like from a photo (Authenticated)
• DELETE /api/photos/:id/dislike - Delete a dislike from a photo (Authenticated)
• GET /api/photos/:id/tags - Get all the tags related with a photo
• POST /api/photos/:id/tags - Add new tags to a photo (Authenticated)
• GET /api/photos/:id/like - Get the like status of a photo (Authenticated)
• GET /api/photos/:id/dislike - Get the dislike status of a photo (Authenticated)

4. /api/collections

• GET /api/collections - Get all the collections with paginations
• GET /api/collections/:id - Get a collection by id
• POST /api/collections - Create a new collection (Authenticated)
• PUT /api/collections/:id - Update a collection (Authenticated)
• DELETE /api/collections/:id - Delete a collection (Authenticated)
• GET /api/collections/:id/photos - Get all the photos related with a collection
• POST /api/collections/:id - Add a photo to a collection (Authenticated)
• GET /api/colletions/:id/related - Get all the related collections with a collection

5. /api/search

• GET /api/search/photos - Search photos with paginations
• GET /api/search/collections - Search collections with paginations
• GET /api/search/users - Search users with paginations

6. /api/stats

• GET /api/stats/total - Get the total statistics of the platform
• GET /api/stats/month - Get the monthly statistics of the platform

7. /api/users

• GET /api/users - Get all the users with paginations
• GET /api/users/:username - Get a public profile of a user by username
• GET /api/users/:username/intereests - Get the interrests of a user
• GET /api/users/:username/photos - Get all the photos uploaded by a user
• GET /api/users/:username/collections - Get all the collections created by a user
• GET /api/users/:username/likes - Get all the likes of a user
• GET /api/users/:username/stat - Get the statistics of a user
• POST /api/users/:username/follow - Follow a user
• GET /api/users/:username/portfolio - Get the portfolio of a user

Special Notes

• The endpoints marked with Authenticated are protected routes. The user must be authenticated to access these routes. The user must provide a valid JWT token in the Authorization header to access these routes.

(back to top)

Built With

• 
• [![Node][Node.js]][Node-url]

(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 MySQL database

   cd server/src/config

   open the config.json and update the database credentials and configurations for the development environment

5. 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

6. 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

   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.

7. Start the backend server

   cd server
   npm start

8. 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

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

(back to top)

Roadmap

• Feature 1
• Feature 2
• Feature 3
  • Nested Feature

See the open issues for a full list of proposed features (and known issues).

(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 (shavin@shavin.live) (LinkedIn)

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

(back to top)

Acknowledgments

• Choose an Open Source License
• GitHub Pages
• Chart.js

(back to top)