nhattanvu / myalbum

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

My Album

Website to share albums and photos with Google Maps locations

Status

Supporters 👏

Website

• URL:
  1. https://my-album.azurewebsites.net/ (Angular 8.0)
  2. https://my-album-react.azurewebsites.net/ (React 16.12)
• Email: [email protected] (for add/edit photo, album, comment and reply)
• Password: 2u)TAa
• Identity API: https://my-album.azurewebsites.net/swagger/index.html
• Album API: https://my-album-album-api.azurewebsites.net/swagger/index.html
• Photo API: https://my-album-photo-api.azurewebsites.net/swagger/index.html
• Comment API: https://my-album-comment-api.azurewebsites.net/swagger/index.html

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

0. Install Docker.
1. Open "src/Docker" folder and run:

docker-compose down
docker-compose build
docker-compose up

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

3. Verify by browsing https://localhost:5002/swagger/ successfully.
4. 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:
3. Deploy to Azure

Screenshots

1. [Photo] Explore
   

2. [Photo] World Map
   

3. [Album] Explore
   

4. [Album] View
   

5. [Photo] Add
   

6. [Photo] Edit
   

7. [Photo] View
   

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

9. [Photo] View >> Add Comment

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

11. [Photo] View >> Reply Comment