brahmgupta / agl-programming-challenge Goto Github PK

To complete AGL Programming challenge, there is a full stack solution using .NET CORE REST API to serve transformed JSON data and also REACT application to connect to this API and display data in format as mentioned in challenge.

.NET Core API is hosted on Azure Cloud.

This application connects with external API 'http://agl-developer-test.azurewebsites.net/people.json to get list of owners with pets. Then it transforms data (using LINQ) and returns JSON response with gender of owners with list of cat names in alphabetical order.

This application is hosted on Azure Cloud with end points:

• GET (gender of owners with list of cat names) - https://agltestapi20200310032121.azurewebsites.net/api/pets
• Swagger - https://agltestapi20200310032121.azurewebsites.net/swagger

It is developed using:

• .NET Core with Visual Studio 2019
• MediatR, CQRS & Dependecy Injection pattern
• FluentResults package to handle API response
• Tests are written using Xunit and NSubstitute
• Documentation is supported by SWAGGER
• Logging for Error, Information and Trace logs.

To run this application on local machine:

• Clone this solution and run using VS 2019.
• It will run on localhost using port 17733 - http://localhost:17733/
• Navigate to URL to get JSON response with gender of owners with list of cat names - http://localhost:17733/api/pets
• Swagger End point - http://localhost:17733/swagger

[{"ownerGender":"Male","catNames":["Garfield","Jim","Max","Tom"]},{"ownerGender":"Female","catNames":["Garfield","Simba","Tabby"]}]

This UI project is created with React JS.

It connects with .NET Core API to get list of gender of owners with cats.

Then it renders this list on UI using different components under folder 'src/components/Owners'.

Link to API Endpoint is configured under /src/utils/constants.js file

It is developed using:

• React JS with Visual Studio Code
• React Hooks
• UI Atomic pattern to create reusable components
• axios package to connect to API
• Tests are written using testing-library/react
• FLOW for typecheck

Male

• Garfield
• Jim
• Max
• Tom

Female

• Garfield
• Simba
• Tabby

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

A static type checker for JavaScript