A calendar application that refreshes you with cute pet images. Go to the site: https://petcalendar.azurewebsites.net/
PROD Build (release build):
QA Build:
This project is finished as the assignment for two sections of NZMSA/2020-Phase-1:
Detailed responses are as follows:
In response to the DevOps - Azure Pipeline requirements:
- Azure build pipeline: Enable a continuous deployment to create releases on new commits to develop and master branches.
- I created a QA Pipeline, niuniuanran.PetCalendar-QA, which automatically runs upon new commits to BOTH develop and master branches.
- The pipeline is defined at azure-pipelines-QA.yml.
- Azure release pipeline - Enable a continuous deployment to deploy your release to Azure for new commits to master branch.
- I created a production Pipeline, niuniuanran.PetCalendar-PROD, which automatically runs upon new commits to master branch only.
- The pipeline is defined at azure-pipelines-PROD.yml.
- A deployed website on Azure
- The link to the deployed website is https://petcalendar.azurewebsites.net/
- A short description of your build and release pipelines in your project README:
- I added automated test and coverage report to the build pipelines, which could be viewed at each build.
- QA Pipeline and PROD Pipeline follow the same steps: Install Node.js -> npm install and build -> archieve files -> publish build artifacts. Therefore, I used a template, azure-template.yml to reuse code.
- Unsplash requires a secret ACCESS KEY for authorization. I created a Variable Group, Unsplash to make the secret available to the application.
In response to the Web-App requirements:
- Create a new typescript and react web app
- Connect this application to a different 3rd party REST API
- This application is connected to Unsplash Image API to fetch HD pet images for the user.
- Allow users to input information that will be utilised by the API
- User will be able to choose from six pets, which the API uses to search for pet images.
- Make use of a UI library like Material-UI.
- A range of Material-UI components are used to improve the visual expression and responsiveness of the Application.
- Utilise source control through GitHub.
You could access the application through https://petcalendar.azurewebsites.net/, or alternatively you can build up the application on your machine following these three steps:
To run the app on your local machine, you will first need to have an Unsplash API credential.
Go to the Unsplash Image API page and create a new Application.
Save the Access Key and the Application Name:
Create pet-calendar/.env.development file. Follow the format of (pet-calendar/.env.development)[https://github.com/niuniuanran/PetCalendar/blob/develop/pet-calendar/env.example] and paste the strings from Step 1 into it.
Run the following steps to start the application:
$ cd pet-calendar
$ npm install
$ npm run start
Now enjoy your pet calendar at http://localhost:3000/.