Skip to content

Share photos/albums, support auto-tag by object detection, developed on .NET Core 3.1 and Angular 8.0/React 16.12, deployed on Azure/Docker

License

Notifications You must be signed in to change notification settings

NhatTanVu/myalbum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My Album logo

My Album

Website to share albums and photos with Google Maps locations

My Album demo

Status

Codecov AppVeyor

Supporters 👏

Stargazers repo roster for @NhatTanVu/myalbum

Website

Run in Microsoft Visual Studio Community 2019

  1. Setup DB by running 3 scripts in "src/WebSPA/sql"
  2. Open "src/MyAlbum.sln"
  3. Change Default connection string in either:
    1. React with: "src/WebSPA.React.Identity/appsettings.Development.json"
    2. Angular with: "src/WebSPA.Identity/appsettings.Development.json"
  4. Set Startup Projects using menu "Debug->Set Startup Projects..." for Debugging in either:
    1. React with projects: Web Apps/WebSPA.React.Identity and 3 projects in Services folder
    2. Angular with projects: Web Apps/WebSPA.Identity and 3 projects in Services folder
  5. Press F5 for Debugging

Run in Docker

  1. Install Docker.
  2. Open "src/Docker" folder and run:
docker-compose down
docker-compose build
docker-compose up
  1. Open "src/Docker" folder and install this SSL certificate to Local Computer's "Trusted Root Certification Authorities" folder:
File name: my-album.pfx
Password: 2u)TAa
  1. Verify by browsing https://localhost:5002/swagger/ successfully.
  2. Browse the website at http://localhost:5000/

Deploy to Azure

  1. Create 1 Azure App Service and 1 Azure SQL database
  2. Add 2 app settings: "ASPNETCORE_ENVIRONMENT" and "ConnectionStrings:Default" to Azure App Service: App Settings
  3. Deploy to Azure

Screenshots

  1. [Photo] Explore
    Explore Photos

  2. [Photo] World Map
    World Map

  3. [Album] Explore
    Explore Albums

  4. [Album] View
    View Album

  5. [Photo] Add
    Add Photo

  6. [Photo] Edit
    Edit Photo

  7. [Photo] View
    View Photo

  8. [Photo] View >> Object Detection (click on the photo)
    View Photo >> Object Detection

  9. [Photo] View >> Add Comment View Photo >> Add Comment

  10. [Photo] View >> Notify Comment (real-time)
    View Photo >> Update New Comment (real-time)

  11. [Photo] View >> Reply Comment
    View Photo >> Add & View Reply