Angular Image Hosting

Image hosting app built with Angular and Firebase.

Developed by Oleksandr Dudynets

Run Steps

1. Clone the repository.

git clone https://github.com/dudynets/Angular-Image-Hosting

2. Install NPM packages (requires Yarn Package Manager installed).

yarn install

3. Create a new Firebase project in the Firebase console.
   1. Enable the Authentication service in the Firebase console and add a Google authentication provider.
   2. Enable the Firestore database in the Firebase console.
   3. Enable the Cloud Storage service in the Firebase console.
   4. Enable the Firebase Hosting service in the Firebase console.
4. Add a new web app to the project in the Firebase console.
   1. Create a config.ts file in the root directory of the project and copy the contents of the config.example.ts file into it (you can also rename the config.example.ts file to config.ts).
   2. Copy the Firebase config from the Firebase console into the config.ts file.
5. Create a Syncfusion account and get a free Community license key or a free trial license key.
   1. Copy the Syncfusion license key into the config.ts file.
6. Install Angular CLI and Firebase CLI.

npm install -g @angular/cli firebase-tools

6. Login to Firebase.

firebase login

7. Choose a Firebase project to use.

firebase use [YOUR_PROJECT_ID]

9. Run the app in development mode.

yarn start

10. Open the app in a browser at http://localhost:4200, login with Google and create a new user.

Run Using Docker

1. Clone the repository.

git clone https://github.com/dudynets/Angular-Image-Hosting

2. Create a new Firebase project in the Firebase console.
   1. Enable the Authentication service in the Firebase console and add a Google authentication provider.
   2. Enable the Firestore database in the Firebase console.
   3. Enable the Cloud Storage service in the Firebase console.
   4. Enable the Firebase Hosting service in the Firebase console.
3. Add a new web app to the project in the Firebase console.
   1. Create a config.ts file in the root directory of the project and copy the contents of the config.example.ts file into it (you can also rename the config.example.ts file to config.ts).
   2. Copy the Firebase config from the Firebase console into the config.ts file.
4. Create a Syncfusion account and get a free Community license key or a free trial license key.
   1. Copy the Syncfusion license key into the config.ts file.
5. Run the docker-compose file.

docker-compose up

6. Open the app in a browser at http://localhost, login with Google and create a new user.

Deployment Steps

1. Complete all steps from the Run Steps section.
2. Run the deployment script.

yarn firebase:deploy

3. You should see the app URL in the console output.

Notes

• Make sure you have the latest stable version of Node.js installed (tested with Node.js v18.18.0).
• At the time of writing, Syncfusion provides a free Community license key for non-commercial use and a free trial license key. This may change in the future.
• This project was generated with Angular CLI version 16.2.5.

License

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