An awesome photo streaming platform for photographers and photo enthusiasts!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
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.
- 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.
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.
POST /api/auth/register
- Create a new user accountPOST /api/auth/login
- Login to an existing user accountPOST /api/auth/change-password
- Change the password of the user account (Authenticated)
POST /api/account/:username/
- Update the user accountDELETE /api/account/:username/
- Delete the user accountGET /api/account/:username/downloads
- Get the downloads of the user accountPOST /api/account/:username/interrest
- Update the interrest of the user accountPOST /api/account/:username/change-profile-image
- Change the profile image of the user account
GET /api/photos
- Get photos with paginationsGET /api/photos/:id
- Get a photo by idPOST /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 trackingGET /api/photos/random
- Get random photo/s based on teh query parametersGET /api/photos/:id/statistics
- Get the statistics of a photoGET /api/photos/tags
- Get all the tags with paginationsPOST /api/photos/likes
- Get all the likes related with a userDELETE /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 photoPOST /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)
GET /api/collections
- Get all the collections with paginationsGET /api/collections/:id
- Get a collection by idPOST /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 collectionPOST /api/collections/:id
- Add a photo to a collection (Authenticated)GET /api/colletions/:id/related
- Get all the related collections with a collection
GET /api/search/photos
- Search photos with paginationsGET /api/search/collections
- Search collections with paginationsGET /api/search/users
- Search users with paginations
GET /api/stats/total
- Get the total statistics of the platformGET /api/stats/month
- Get the monthly statistics of the platform
GET /api/users
- Get all the users with paginationsGET /api/users/:username
- Get a public profile of a user by usernameGET /api/users/:username/intereests
- Get the interrests of a userGET /api/users/:username/photos
- Get all the photos uploaded by a userGET /api/users/:username/collections
- Get all the collections created by a userGET /api/users/:username/likes
- Get all the likes of a userGET /api/users/:username/stat
- Get the statistics of a userPOST /api/users/:username/follow
- Follow a userGET /api/users/:username/portfolio
- Get the portfolio of a user
- 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.
To get a local copy up and running follow these simple steps.
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
To get a local copy up and running follow these simple steps.
-
Clone the repo
git clone https://github.com/ShavinAnjithaAlpha/PhotoShav
-
Install NPM packages for the frontend
cd client npm install
-
Install NPM packages for the backend
cd server npm install
-
Setup the MySQL database
cd server/src/config
open the config.json and update the database credentials and configurations for the development environment
-
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 -
Create the
.env
file for the serveruse the template procide in the
.env.example
file and create a new.env
file in theserver
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
andNEW_RELIC_LICENSE_KEY
are optional. If you want to use the new relic monitoring you can add these values to the.env
file. -
Start the backend server
cd server npm start
-
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
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
- Feature 1
- Feature 2
- Feature 3
- Nested Feature
See the open issues for a full list of proposed features (and known issues).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt
for more information.
-
Shavin Anjitha (shavin@shavin.live) (LinkedIn)
-
Project Link: https://github.com/ShavinAnjithaAlpha/PixelStream